WPF-Leinwand Skalierung / Transform anpassen

Question

Ich bin reposting diese Frage, da ich nicht viel von einer Antwort habe beim letzten Mal, hoffentlich ein wenig Umformulierung helfen könnte ...

Im Grunde, was ich versuche zu tun, um eine Databound-Leinwand zu schaffen, das wird automatisch seinen Inhalt zu ‚füllen‘ auf den verfügbaren Platz skalieren. Art wie ein Zoom anpassen Betrieb. Leider sind meine WPF Fähigkeiten noch nicht sehr stark, und ich bin zu kämpfen, wie zu arbeiten, um diesen letzten Teil zu tun. Ich habe einige Beispiele Datenbindung folgte die Leinwand gebunden, zu erhalten, aber nicht sicher, ob vielleicht seine falschen und behindert mich.

Ich habe in Abhängigkeit von der Art und Weise zur Zeit zwei grundlegenden Probleme habe ich versuchen, die Lösung angehen, entweder:

• Ich weiß nicht, wie das machen Leinwand Wieder Skala automatisch durch XAML Wenn es möglich mit Hilfe eines verwandeln.
• Ich kann nicht scheinen zu verweisen auf die Leinwand in der hinter Code, ich nehme an, weil ihr Teil ein Item?

Ein Beispiel dafür, was ich versuche zu erreichen, ich habe A Ich will versuchen, und B zu erhalten:

( entfernt abgelaufener Link zu einem img )

Der Code, den ich zur Zeit bin mit ziemlich einfach, nur die Schaffung 4 Punkte mit einem bestimmten Koordinaten, und eine andere Ansicht Modell in dieser bis zu wickeln.

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

Dann wird die PointCollectionViewModel als Dateninhalt für meine AutoResizingCanvas verwendet, die die folgenden XAML hat zu implementieren, um die Bindung:

<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

Als Ihr Canvas nicht feste Breite und Höhe zu haben scheint, würde ich es in eine Viewbox gehören:

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Viewbox Stretch="Uniform">
            <Canvas x:Name="canvas" Background="DarkSeaGreen">
                <Canvas.LayoutTransform>
                <ScaleTransform ScaleY="-1" />
                </Canvas.LayoutTransform>
            </Canvas>
        </Viewbox>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Alternativ platzieren Sie Ihre gesamte UserControl in eine ViewBox.