前回はあまり回答がなかったので、この質問を再投稿します。少し言い換えると役立つかもしれません...
基本的に私がやろうとしているのは、データバインドされたキャンバスを作成することです。これにより、コンテンツが自動的に拡大縮小され、使用可能なスペースが「埋められ」ます。操作に合わせてズームするようなものです。残念ながら、私のWPFスキルはまだそれほど強力ではなく、この最後の部分を実行する方法を見つけるのに苦労しています。いくつかのデータバインディングの例に従ってキャンバスをバインドしましたが、それが間違っていて邪魔になっているのかどうかはわかりません。
解決策に取り組む方法に応じて、現時点で2つの基本的な問題があります。
私が達成しようとしていることの例として、私は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>
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
に配置します。