XAML中的按鈕處理程序

Question

我有簡單的WPF佈局任務，並且希望儘可能避免代碼隱藏。

我有兩個面板左右。當我colapsing左側面板 - 右側面板被拉伸...... 這是我的XAML：

 <Grid Name="gridContainer"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="5"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 

      <StackPanel Background="Aqua" Grid.Column="0" Name="leftPanel" > 
       <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock> 
      </StackPanel> 

      <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/> 

      <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
       <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label> 
       <Button Click="LeftButton_Click" Margin="10">Close Left Panel</Button>      
      </StackPanel> 
     </Grid> 

這是後臺代碼：

private void LeftButton_Click(object sender, RoutedEventArgs e) 
    { 
     if(leftPanel.Visibility == System.Windows.Visibility.Visible) 
     { 
      gridContainer.ColumnDefinitions[0].Width = GridLength.Auto; 
      leftPanel.Visibility = System.Windows.Visibility.Collapsed; 
      leftSplitter.Visibility = System.Windows.Visibility.Collapsed; 
     } 
     else 
     { 
      gridContainer.ColumnDefinitions[0].Width = GridLength.Auto; 
      leftPanel.Visibility = System.Windows.Visibility.Visible; 
      leftSplitter.Visibility = System.Windows.Visibility.Visible; 
     } 
    } 

我想知道，有什麼辦法避免這裏的代碼？並僅在XAML中實現此任務？

感謝意見

Answer 1

你可以這樣做，沒有代碼隱藏。

首先我們需要設置一個特定的樣式，這將允許我們切換visibility的StackPanel。

<Window.Resources> 
    <Style x:Key="panelStyle" TargetType="{x:Type StackPanel}"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="True"> 
       <Setter Property="StackPanel.Visibility" Value="Collapsed" /> 
      </DataTrigger> 
      <DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="False"> 
       <Setter Property="StackPanel.Visibility" Value="Visible" /> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
</Window.Resources> 

接下來我們對原始代碼做一些小的修改。

添加樣式並將StackPanel的Tag綁定到Button。

<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" > 

更改Button到ToggleButton並給它命名。

<ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton> 

它應該看起來像你這樣做了。

<Grid Name="gridContainer"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="5"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" > 
     <TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock> 

    </StackPanel> 

    <GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/> 

    <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
     <Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label> 
     <ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>   
    </StackPanel> 
</Grid> 

Answer 2

您可以消除背後使用指揮和MVVM模式代碼。您的視圖模型中可以有Visibility屬性，這些屬性將綁定到您的XAML元素。

然後使用命令可以將點擊事件路由到視圖模型中的命令。這裏有一個關於WPF中固定命令模式的快速文章。 What is the accepted pattern for WPF commanding in MVVM?

使用這種方法可以消除背後的XAML代碼，也可以很好地設置自己，以便在命令執行時單元測試視圖模型的行爲。