如何绑定单击按钮以使用XAML更改面板(网格)的内容

Question

我正在创建一个WPF应用程序的UI,在处理软件功能的实现时,我没有太多创建UI的经验.

现在我需要一种方法来更改Properties面板的内容,该面板包含一个包含内容的网格.我创建了多个面板,隐藏了除了一个之外的所有面板,现在我想在用户单击顶部功能区中的按钮时切换(或者它可以是布局中其他位置的任何按钮).

使用代码非常容易,但我想在没有任何代码的情况下使用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,而是它的行动需要是一个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>

希望这可以帮助!