WPF布局绑定

Question

我对这篇文章的篇幅感到抱歉，但是这段时间现在已经连续两天让我感到疲惫不堪。考虑下面的图片。在其中一个瓷砖1-4上单击鼠标时，瓷砖会调整大小，并在中间出现一个大瓷砖5。另一个鼠标点击反转该过程。

首先我试着直接绑定row-和columndefinitions的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> 

C＃：

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

这种对左侧和中间列，但有趣的是它不工作的” t代表右栏。右栏不会改变其宽度。另一个问题是，usercontrol实际宽度的初始化设置为0.解决方法.Measure和.Arrange不起作用。

在此先感谢

乔恩

Answer 1

你可以定义你的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> 

这时，一个小代码隐藏显示/隐藏中间的方框：

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

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

隐藏：

显示：

唯一需要注意的是，中间的盒子具有预设的尺寸（300，但你可以改变），而不是60％。不知道你打算如何处理它，因此可能会或可能不会成为问题。