WPF 캔버스 스케일링/변환에 맞습니다

Question

지난번에 많은 응답을 얻지 못했기 때문에이 질문을 다시 게시하고 있습니다. 약간의 리치가 도움이 될 수 있기를 바랍니다.

본질적으로 제가하려고하는 것은 데이터 라운드 캔버스를 만드는 것입니다.이 캔버스는 자동으로 사용 가능한 공간을 '채우도록'내용물을 조정합니다. 운영에 맞는 줌과 비슷합니다. 불행히도 내 WPF 기술은 아직 강력하지 않으며이 마지막 부분을 수행하는 방법을 해결하기 위해 고군분투하고 있습니다. 나는 캔버스를 묶기 위해 몇 가지 데이터 바인딩 예제를 따랐지만, 잘못되고 나를 방해하는지 확실하지 않습니다.

솔루션을 시도하고 해결하는 방법에 따라 현재 두 가지 기본 문제가 있습니다.

• 변환을 사용하여 가능하다면 캔버스를 XAML을 통해 자동으로 다시 스케일하게 만드는 방법을 모르겠습니다.
• 뒤에서 캔버스를 언급 할 수없는 것 같습니다. Itemscontrol의 일부 때문에 추측하고 있습니까?

내가 달성하려는 것의 예, 나는 ai가 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의 데이터 컨텐츠로 사용됩니다. 바인딩을 구현하기위한 다음 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>

Answer 1

당신으로 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 a ViewBox.