WPF Canvas Scaling / Transform to Fit

Question

我正在重新提出這個問題，因為我上次沒有得到很多答復，希望一些重新措辭可能會有所幫助......

基本上我正在嘗試做的是創建一個數據綁定畫布，它將自動縮放其內容以“填充”可用空間。 有點像縮放以適應操作。 不幸的是，我的WPF技能還不是很強，我正在努力研究如何做到這一點。 我已經按照一些數據綁定示例來獲取畫布，但不確定是否錯誤並阻礙了我。

根據我嘗試和解決方案的方式，我現在有兩個基本問題：

• 如果可能使用轉換，我不知道如何通過XAML自動重新縮放畫布。
• 我似乎無法在后面的代碼中引用畫布，我猜是因為它是ItemsControl的一部分？

我想要實現的一個例子，我有AI想要嘗試獲得B：

（ 刪除過期鏈接到img ）

我目前使用的代碼非常簡單，只需使用給定的坐標創建4個點，並使用另一個視圖模型將其包裝起來。

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; } }
}

然后將PointCollectionViewModel用作我的AutoResizingCanvas的DataContent，它具有以下XAML來實現綁定：

<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

由於您的Canvas似乎沒有固定的寬度和高度，我會將其包含在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>

或者，將整個UserControl放入ViewBox 。