c# - Escalado de Lona WPF/Transformar para Encajar

canvas scaletransform

Question

Estoy replanteando esta pregunta ya que no recibí mucha respuesta la última vez, espero que un poco de redacción pueda ayudar ...

Esencialmente, lo que estoy tratando de hacer es crear un lienzo de base de datos, que escalará automáticamente su contenido para "llenar" el espacio disponible. Algo así como un zoom para ajustar la operación. Desafortunadamente, mis habilidades de WPF aún no son muy fuertes, y estoy luchando para descubrir cómo hacer esta última parte. He seguido algunos ejemplos de enlace de datos para encuadernar el lienzo, pero no estoy seguro de que tal vez esté mal y me esté dificultando.

Tengo dos problemas básicos en este momento, dependiendo de la forma en que trato de abordar la solución, ya sea:

• No sé cómo hacer que el lienzo se vuelva a escalar automáticamente a través de XAML si es posible mediante una transformación.
• Parece que no puedo hacer referencia al lienzo en el código de la parte de atrás, ¿estoy adivinando porque es parte de un ItemsControl?

Un ejemplo de lo que estoy tratando de lograr, tengo AI que quiero probar y obtener B:

( eliminado el enlace caducado a un img )

El código que estoy usando actualmente es bastante simple, simplemente creando 4 puntos con una coordenada dada y otro modelo de vista para resumirlos.

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

Luego, PointCollectionViewModel se usa como DataContent para mis AutoResizingCanvas, que tiene el siguiente XAML para implementar el enlace:

<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

Como su Canvas no parece tener ancho y altura fijos, lo incluiría en un 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>

Alternativamente, coloque su UserControl completo en un ViewBox .