Scale Two Canvases Proportionally

Question

I am trying to think of the best way to scale two panels proportionally.

If I have a grid that contains two canvases, both stacked horizontally next to each other, I want canvas (A) to scale to the size of canvas (B), proportionally, though.

So, essentially, if canvas (B) increases in size, canvas (A) decreases, and if canvas (A) increases, canvas (B) decreases.

I'm thinking of using a converter to do this, but wanted to know if anyone had any good ideas.

Below is a link that demonstrates the desired behavior. Refer to the pan/zoom control in the lower right corner of the screen. That control represents a preview of the main screen. If you press on the zoom button within the pan/zoom control, the main screen zooms in, and the rectangular "pan" area in the pan/zoom control decreases in size.

http://quince.infragistics.com/#/Search/ViewPattern$pattern=Button+Groups/PatternExamples$guid=289a497a-6632-455a-87b6-74ee70c2d3be

Thanks!

Chris

Answer 1

A converter is probably be the best way to go. You could also use RenderTransform.ScaleX/ScaleY instead of adjusting the Height/Width of the canvas.

Answer 2

Here's an example of binding to a property. Not sure if it'd be better then a converter.

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

Code:

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