web-dev-qa-db-ja.com

WPFキャンバスのスケーリング/フィットに変換

前回はあまり回答がなかったので、この質問を再投稿します。少し言い換えると役立つかもしれません...

基本的に私がやろうとしているのは、データバインドされたキャンバスを作成することです。これにより、コンテンツが自動的に拡大縮小され、使用可能なスペースが「埋められ」ます。操作に合わせてズームするようなものです。残念ながら、私のWPFスキルはまだそれほど強力ではなく、この最後の部分を実行する方法を見つけるのに苦労しています。いくつかのデータバインディングの例に従ってキャンバスをバインドしましたが、それが間違っていて邪魔になっているのかどうかはわかりません。

解決策に取り組む方法に応じて、現時点で2つの基本的な問題があります。

  • 変換を使用して可能であれば、XAMLを使用してキャンバスを自動的に再スケーリングする方法がわかりません。
  • 背後のコードでキャンバスを参照できないようですが、ItemsControlの一部であるためだと思いますか？

私が達成しようとしていることの例として、私はAを持っています。私は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>
c#wpfcanvasscaletransform
17
Ian

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に配置します。

19
Mart