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％。不知道你打算如何處理它，因此可能會或可能不會成爲問題。