WPF Escalado lona / Transformar para ajustar

Question

Estoy volver a colocar esta pregunta ya que no se mucho de una respuesta última vez, es de esperar un poco de la nueva redacción podría ayudar ...

En esencia lo que estoy tratando de hacer es crear un lienzo de enlace de datos, que se escala automáticamente su contenido a 'llenar' el espacio disponible. Como una especie de zoom para ajustar la operación. Desafortunadamente mis habilidades WPF sin embargo, no son muy fuertes, y yo estoy luchando para encontrar la manera de hacer esta última parte. He seguido algunos ejemplos de enlace de datos para hacer el lienzo obligado, pero no está seguro si tal vez su mal y me dificulta.

Tengo dos problemas básicos en el momento dependiendo de la forma en que trato y hacer frente a la solución, ya sea:

• No sé cómo hacer que la lona re-escala automáticamente a través de XAML si es posible el uso de un transformar.
• Me parece que no puede hacer referencia a la lona en el trasero código, supongo que debido a su parte de un ItemsControl?

Un ejemplo de lo que estoy tratando de lograr, tengo un deseo para tratar de obtener B:

( eliminado enlace caducado a un img )

El código actualmente estoy usando es bastante simple, sólo la creación de 4 puntos con una coordenada dada, y un modelo para envolver otra vista en estos.

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

A continuación, el PointCollectionViewModel se utiliza como el DataContent para mis AutoResizingCanvas, que tiene la siguiente XAML para poner en práctica la unión:

<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 no parece que su Canvas tener ancho fijo y altura, me gustaría incluir 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>

Como alternativa, coloque toda su UserControl en un ViewBox.