如何綁定單擊按鈕以使用XAML更改面板（Grid）的內容

Question

我正在創建WPF應用程序的UI，並且在處理該軟件功能的實現時，我沒有太多經驗創建用戶界面。

現在我需要一種方法來更改具有包含內容的網格的屬性面板的內容。我創建了多個面板，隱藏除一個以外的所有面板，現在當用戶單擊頂部功能區中的按鈕時（或者它可能是佈局中其他任何按鈕），現在我想切換。

這是很容易做的代碼，但我想沒有任何代碼，只使用XAML。怎麼做？

另外如何將相似的行爲綁定到UI上的其他項目？

Answer 1

我認爲您選擇的僅適用於XAML的解決方案將取決於您的具體要求。在下面的示例中，我假設僅使用XAML意味着您正在尋找不涉及綁定到ViewModel中的屬性的解決方案。

方法＃1：

如果你決定使用一個單一的ToggleButton顯示和隱藏面板，則可以做到這一點很容易使用Triggers：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <ContentControl> 
     <ContentControl.Template> 
      <ControlTemplate> 
       <StackPanel> 
        <Grid x:Name="myGrid" Background="Beige" Height="100"> 
         <TextBlock Text="Content Placeholder" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/> 
        </Grid> 
        <ToggleButton x:Name="toggleButton" Content="Show\Hide Panel" IsChecked="True"/> 
       </StackPanel> 
       <ControlTemplate.Triggers> 
        <Trigger SourceName="toggleButton" Property="IsChecked" Value="True"> 
         <Setter TargetName="myGrid" Property="Visibility" Value="Visible" /> 
        </Trigger> 
        <Trigger SourceName="toggleButton" Property="IsChecked" Value="False"> 
         <Setter TargetName="myGrid" Property="Visibility" Value="Hidden" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </ContentControl.Template> 
    </ContentControl> 
</Window> 

方法＃2 ：

如果您需要兩個按鈕（一個用於顯示面板，一個用於隱藏面板），那麼也許您可以使用改爲EventTrigger。由於EventTrigger不使用Setter's，所以此解決方案更加嚴格，但其操作必須是Storyboard。爲了模擬像Visibility一個屬性，你可以使用ObjectAnimationUsingKeyFrames的設置在Storyboard：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <StackPanel> 
     <Grid x:Name="myGrid" Background="Beige" Height="100"> 
      <TextBlock Text="Content Placeholder" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/> 
     </Grid> 
     <Button x:Name="showPanelButton" Content="Show Panel" /> 
     <Button x:Name="hidePanelButton" Content="Hide Panel" /> 
     <StackPanel.Triggers> 
      <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp" SourceName="showPanelButton"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myGrid" Storyboard.TargetProperty="(UIElement.Visibility)"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp" SourceName="hidePanelButton"> 
       <BeginStoryboard> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myGrid" Storyboard.TargetProperty="(UIElement.Visibility)"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </StackPanel.Triggers> 
    </StackPanel> 
</Window> 

希望這有助於！