WPF Canvas Scaling/Transform to Fit

Question

Tôi đang reposting câu hỏi này vì tôi đã không nhận được nhiều phản ứng thời gian qua, hy vọng một chút ... Đọc thêm ... cố gắng làm là tạo một khung dữ liệu, điều đó sẽ tự động mở rộng nội dung của nó thành 'lấp đầy' lên không gian có sẵn. Sắp xếp giống như thu phóng để phù hợp với hoạt động. Thật không may là kỹ năng WPF của tôi vẫn chưa mạnh mẽ, và tôi đang cố gắng tìm ra cách để làm điều này phần cuối cùng. Tôi đã làm theo một số ví dụ databinding để có được các ràng buộc vải, nhưng không chắc chắn nếu có thể nó sai và cản trở tôi.

Tôi đã có hai vấn đề cơ bản tại thời điểm tùy thuộc vào cách tôi cố gắng và giải quyết những giải pháp, một trong hai:

• Tôi không biết làm thế nào để làm cho vải tái quy mô tự động qua XAML nếu có thể bằng cách sử dụng biến đổi .
• Tôi dường như không thể tham chiếu canvas ở phía sau mã , tôi đoán vì phần của nó của một ItemsControl?

Một ví dụ về những gì tôi đang cố gắng để đạt được, tôi đã có AI muốn thử và nhận được B:

(loại bỏ liên kết quá hạn đến một img)

Code tôi 'hiện nay đang sử dụng là khá đơn giản, chỉ cần tạo 4 chấm với một phối hợp nhất định, và một mô hình quan điểm khác để quấn những lên.

public class PointCollectionViewModel 
{ 
    private List<PointViewModel> viewModels; 
    public PointCollectionViewModel() 
    { 
     this.viewModels = new List<PointViewModel>(); 
     this.viewModels.Add(new PointViewModel(new Point(1, 1))); 
     this.viewModels.Add(new PointViewModel(new Point(9, 9))); 
     this.viewModels.Add(new PointViewModel(new Point(1, 9))); 
     this.viewModels.Add(new PointViewModel(new Point(9, 1))); 
    } 

    public List<PointViewModel> Models 
    { 
     get { return this.viewModels; } 
    } 
} 

public class PointViewModel 
{ 
    private Point point; 
    public PointViewModel(Point point) 
    { 
     this.point = point; 
    } 

    public Double X { get { return point.X; } } 
    public Double Y { get { return point.Y; } } 
} 

Sau đó PointCollectionViewModel được sử dụng như DATACON lều cho AutoResizingCanvas của tôi, trong đó có các XAML sau đây để thực hiện các ràng buộc:

<UserControl x:Class="WpfCanvasTransform.AutoResizingCanvas" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfCanvasTransform" 
    x:Name="parent"> 
    <ItemsControl x:Name="itemsControl" ItemsSource="{Binding Path=Models}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
     <Canvas x:Name="canvas" Background="DarkSeaGreen" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
      <Canvas.LayoutTransform> 
      <ScaleTransform ScaleY="-1" /> 
      </Canvas.LayoutTransform> 

     </Canvas> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate DataType="{x:Type local:PointViewModel}"> 
     <Ellipse Width="3" Height="3" Fill="Red"/> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    <ItemsControl.ItemContainerStyle> 
     <Style> 
     <Setter Property="Canvas.Top" Value="{Binding Path=Y}"/> 
     <Setter Property="Canvas.Left" Value="{Binding Path=X}"/> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
    </ItemsControl> 
</UserControl> 

Answer 1

Như dường như bạn Canvas không như đã cố định chiều rộng và chiều cao, tôi sẽ đưa nó vào một Viewbox:

<ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
     <Viewbox Stretch="Uniform"> 
      <Canvas x:Name="canvas" Background="DarkSeaGreen"> 
       <Canvas.LayoutTransform> 
       <ScaleTransform ScaleY="-1" /> 
       </Canvas.LayoutTransform> 
      </Canvas> 
     </Viewbox> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 

Cách khác, đặt toàn bộ số UserControl của bạn vào ViewBox.