Question

我正在考虑按比例缩放两个面板的最佳方法。

如果我有一个包含两个画布的网格，两个画布彼此水平堆叠，我希望画布（A）按比例缩放到画布（B）的大小。

因此，基本上，如果canvas（B）的大小增加，canvas（A）会减少，如果canvas（A）增加，canvas（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;
        }
    }
}

按比例缩放两个画布

2 个答案: