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代码，也可以很好地设置自己，以便在命令执行时单元测试视图模型的行为。