WPF Toile Mise à l'échelle / Transform to Fit

Question

Je reposter cette question que je n'ai pas eu beaucoup d'une réponse dernière fois, je l'espère un peu de re-formulation pourrait aider ...

Essentiellement ce que je suis en train de faire est de créer une toile databound, qui évoluera automatiquement son contenu à « remplir » l'espace disponible. Un peu comme un zoom pour adapter le fonctionnement. Malheureusement, mes compétences WPF ne sont pas encore très fort, et je me bats pour trouver comment faire cette dernière partie. J'ai suivi quelques exemples pour obtenir la liaison de données toile liée, mais peut-être pas sûr si son tort et me gêner.

J'ai deux problèmes de base au moment en fonction de la façon dont je tente de faire face à la solution, soit:

• Je ne sais pas comment faire la toile re échelle automatiquement par XAML si son possible en utilisant un transformer.
• Je ne peux pas sembler référence à la toile dans le derrière code, je devine que sa part d'un ItemsControl?

Un exemple de ce que je suis en train de réaliser, je l'ai obtenu Je veux essayer d'obtenir B:

( Le lien a expiré enlevé un img )

Le code que je suis actuellement à l'aide est assez simple, ce qui crée à seulement 4 points avec une coordonnée donnée, et un modèle autre vue d'envelopper ces dans.

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

Alors le PointCollectionViewModel est utilisé comme DataContent pour mes AutoResizingCanvas, qui a le XAML suivant pour implémenter la liaison:

<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

En tant que votre Canvas ne semble pas avoir une largeur et une hauteur, je l'inclure dans 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>

Sinon, placez votre entière UserControl dans un ViewBox.