Масштаб Два холста пропорционально

Question

Я пытаюсь придумать лучший способ пропорционального масштабирования двух панелей.

Если у меня есть сетка, содержащая два холста, расположенных горизонтально рядом друг с другом, я хочу масштабировать холст (A)к размеру холста (B), пропорционально, хотя.

Таким образом, по существу, если холст (B) увеличивается в размере, холст (A) уменьшается, а если холст (A) увеличивается, холст (B)уменьшается.

Я думаю об использовании конвертера для этого, но хотел узнать, есть ли у кого-нибудь хорошие идеи.

Ниже приведена ссылка, демонстрирующая желаемое поведение.Обратитесь к элементу управления панорамированием / масштабированием в правом нижнем углу экрана.Этот элемент управления представляет собой предварительный просмотр главного экрана.Если вы нажмете кнопку масштабирования в элементе управления панорамированием / масштабированием, главный экран увеличится, а прямоугольная область «панорамирования» в элементе управления панорамированием / масштабированием уменьшится в размере.

http://quince.infragistics.com/#/Search/ViewPattern$pattern=Button+Groups/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;
        }
    }
}