두 개의 캔버스를 비례 적으로 조정하십시오.

Question

저는 두 패널을 비례 적으로 스케일하는 가장 좋은 방법을 생각하려고합니다.

둘 다 가로로 쌓아 놓은 두 개의 캔버스가있는 그리드가있는 경우 캔버스 (A)를 비례 적으로 캔버스 크기 (B)로 확대하고 싶습니다.

기본적으로 캔버스 (B)의 크기가 커지면 캔버스 (A)가 감소하고 캔버스 (A)가 증가하면 캔버스 (B)가 감소합니다.

나는 이것을하기 위해 변환기를 사용할 생각이지만 누군가 좋은 아이디어가 있는지 알고 싶었습니다.

다음은 원하는 동작을 보여주는 링크입니다. 화면의 오른쪽 하단에있는 팬/줌 컨트롤을 참조하십시오. 이 컨트롤은 기본 화면의 미리보기를 나타냅니다. 팬/줌 컨트롤에서 줌 버튼을 누르면 기본 화면이 확대되고 팬/줌 컨트롤의 직사각형 "팬"영역이 축소됩니다.

http://quince.infragistics.com/#/Search/ViewPattern $ 패턴 = 버튼 + 그룹/PatternExamples $ GUID = 289a497a-6632-455a-87b6-74ee70c2d3be

감사합니다!

크리스

Answer 1

변환기가 아마도 최선의 방법 일 수 있습니다. 캔버스의 높이/너비를 조정하는 대신 RenderTransform.ScaleX/ScaleY를 사용할 수도 있습니다.

Answer 2

다음은 속성에 바인딩하는 예입니다. 컨버터가 더 나은지 확실하지 않습니다.

<Canvas Background="Blue"> 
    <Canvas x:Name="canvas1" ClipToBounds="True" Background="Red" Width="100" Height="100"> 
     <Canvas.RenderTransform> 
      <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}" ScaleY="{Binding ElementName=slider, Path=Value}"/> 
     </Canvas.RenderTransform> 
    </Canvas> 

    <Canvas x:Name="canvas2" ClipToBounds="True" Background="Green" Grid.Column="2" Height="100" Width="100" Canvas.Left="200"> 
     <Canvas.RenderTransform> 
      <ScaleTransform ScaleX="{Binding ScaleValue2}" ScaleY="{Binding ScaleValue2}"/> 
     </Canvas.RenderTransform> 
    </Canvas> 
    <Slider x:Name="slider" Canvas.Top="200" Width="200" Value="{Binding Path=ScaleValue, Mode=TwoWay}" Maximum="2"></Slider> 
</Canvas> 

코드 :

public partial class Window1 : Window, INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    public Window1() 
    { 
     InitializeComponent(); 
     this.DataContext = this; 
    } 

    private void NotifyPropertyChanged(String info) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(info)); 
     } 
    } 

    private double scaleValue = 1; 
    public double ScaleValue 
    { 
     get 
     { 
      return scaleValue; 
     } 
     set 
     { 
      scaleValue = value; 
      NotifyPropertyChanged("ScaleValue"); 
      NotifyPropertyChanged("ScaleValue2"); 
     } 
    } 

    public double ScaleValue2 
    { 
     get 
     { 
      return slider.Maximum - ScaleValue; 
     } 
    } 
}