C# WPF布局绑定

我为这篇文章的篇幅感到抱歉，但这篇文章让我连续两天感到厌烦。考虑下面的图像。在一个瓷砖1-4上的MouScLLIK瓷砖调整大小和大瓦片5出现在中间。另一个鼠标单击可反转此过程。

首先，我尝试直接绑定行和列定义的width/height属性。这根本不起作用。当前解决方案使用标签的宽度和高度属性来完成大小调整。代码如下

XAML:

....
<Grid Name ="MainGrid" Background="Crimson">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Name="LeftGrid" Grid.Column ="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1"/>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label Grid.Column ="1" Grid.Row ="0"  Background ="Cyan " Width="200" Name="HandleLeftTop" />
        <Label Grid.Column ="0" Grid.Row ="1"  Background ="Cyan " Width="200" Name="HandleLeftSideTop" />
        <Label Grid.Column ="0" Grid.Row ="2"  Background ="Cyan " Width="200" Name="HandleLeftSideBottom"/>
        <Grid Grid.Column ="1" Grid.Row ="1" Background ="Green" MouseDown="Grid_MouseDown">    </Grid>
        <Grid Grid.Column ="1" Grid.Row ="2" Background ="Yellow" MouseDown="Grid_MouseDown_1"></Grid>
    </Grid>

    <Grid Name="RightGrid" Grid.Column ="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="1"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1"/>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label Grid.Column ="0" Grid.Row ="0"  Background ="Cyan " Width="200" Name="HandleRightTop"/>
        <Label Grid.Column ="1" Grid.Row ="1"  Background ="Cyan " Width="200" Name="HandleRightSideTop"/>
        <Label Grid.Column ="1" Grid.Row ="2"  Background ="Cyan " Width="200" Name="HandleRightSideBottom"/>
        <Grid Grid.Column ="0" Grid.Row ="1" Background ="Thistle " MouseDown="Grid_MouseDown_2"></Grid>
        <Grid Grid.Column ="0" Grid.Row ="2" Background ="Tan " MouseDown="Grid_MouseDown_3"></Grid>
    </Grid>

    <Grid Name="MiddleGrid" Grid.Column ="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="1"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label Grid.Row ="0"  Background ="Cyan " Width="200" Name="HandleMiddleTop" />
        <Grid Grid.Column ="0" Grid.Row ="1" Background ="Tomato"/>
    </Grid>

</Grid>

public partial class RTGraphControl : UserControl
{

    private readonly RTGraphControlViewModel _viewModel;

    public RTGraphControl()
    {
        InitializeComponent();
        _viewModel = new RTGraphControlViewModel(this);

        DataContext = _viewModel;

        //.... Binding row heights etc...

        var leftColumnWidthbindingElement = new Binding
        {
            Source = _viewModel,
            Path = new PropertyPath("LeftColumnWidth"),
            Mode = BindingMode.OneWay,
            UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
        };
        HandleLeftTop.SetBinding(WidthProperty, leftColumnWidthbindingElement);

    // same for right and middle column           

        _viewModel.Expanded = false;

    }
}

public class RTGraphControlViewModel : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged;

    private readonly RTGraphControl _rt;
    private bool _expanded;
    private double _rowHeight;
    private double _leftcolumnWidth;
    private double _middlecolumnWidth;
    private double _rightcolumnWidth;

    public RTGraphControlViewModel(RTGraphControl rt)
    {
        _rt = rt;
    }

    public bool Expanded
    {
        get { return _expanded; }
        set
        {
            _expanded = value;
            double width = _rt.MainGrid.ActualWidth;
            if (_expanded)
            {
                LeftColumnWidth = width*0.2;
                RightColumnwidth = width*0.2;
                MiddleColumnWidth = width*0.6;
            }
            else
            {
                LeftColumnWidth = width * 0.5;
                RightColumnwidth = width * 0.5;
                MiddleColumnWidth = width * 0;
            }
            OnPropertyChanged("Expanded");
        }
    }

    public double LeftColumnWidth
    {
        get { return _leftcolumnWidth; }
        set
        {
            _leftcolumnWidth = value;
            OnPropertyChanged("LeftColumnWidth");
        }
    }

    public double MiddleColumnWidth {...}

    public double RightColumnwidth {...}

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

这种方法适用于左栏和中栏，但有趣的是，它不适用于右栏。右边的列根本不会改变其宽度。另一个问题是，在初始化usercontrol之后，actualwidth设置为0。使用.Measure和.Arrange的变通方法无效

提前谢谢

---

Jon

您可以这样定义XAML：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Grid Grid.Column="0" Grid.Row="0" Background="ForestGreen" Margin="2"
          MouseDown="OuterContainer_OnMouseDown" />
    <Grid Grid.Column="2" Grid.Row="0" Background="LimeGreen" Margin="2"
          MouseDown="OuterContainer_OnMouseDown" />
    <Grid Grid.Column="0" Grid.Row="1" Background="Firebrick" Margin="2"
          MouseDown="OuterContainer_OnMouseDown" />
    <Grid Grid.Column="2" Grid.Row="1" Background="OrangeRed" Margin="2"
          MouseDown="OuterContainer_OnMouseDown" />

    <Grid Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Background="DodgerBlue"
          MouseDown="MiddleContainer_OnMouseDown" x:Name="MiddleContainer"
          Visibility="Collapsed" Width="300" Margin="2" />
</Grid>

隐藏的：

显示：

---

唯一需要注意的是，中间框的预设大小（300，但您可以更改），而不是60%。不确定您打算用它做什么，所以这可能是一个问题，也可能不是问题。

我本来打算建议一个定制的

面板，但显然不起作用：（非常感谢。非常简单的解决方案，但经过一些调整后可以按预期工作。
private void OuterContainer_OnMouseDown(object sender, MouseButtonEventArgs e)
{
    MiddleContainer.Visibility = Visibility.Visible;
}

private void MiddleContainer_OnMouseDown(object sender, MouseButtonEventArgs e)
{
    MiddleContainer.Visibility = Visibility.Collapsed;
}