如何绑定一个点击按钮来改变面板的使用XAML的内容（网格） [英] How to bind click of a button to change the content of a panel (Grid) using XAML

问题描述

我创建一个WPF应用程序的UI，并同时在该软件的功能的实现工作，我没有与创建UI太多经验。

I am creating a UI of a WPF Application, and while working on the implementation of the software's features, i didn't have much experience with creating the UI.

现在我需要一种方法来改变其中有一个网格，包含的内容属性面板中的内容。我创建了多个面板，隐藏在这一切只有一个，现在我想，当用户单击顶部功能区按钮，（或者也可能是在布局其他地方的任何按钮）来切换。

Now I need to a way to change the contents of the Properties panel which has a grid to contain the content. I have created multiple panels, hidden all but one, and now i want to switch when the user clicks on a button in the Ribbon on the top, (or it could be any button somewhere else in the layout).

这是很容易与code ++做的，但我想这样做没有任何code，只用XAML。怎么办呢？

It is very easy to do with code, but i want to do it without any code, using only XAML. How to do it?

另外如何将类似的行为与其他物品绑定在UI？

Also how to bind the similar behavior to other items on the UI?

推荐答案

我想唯一的XAML的解决方案，您选择将取决于您的具体要求。在下面的例子中，我假设XAML只意味着你正在寻找不涉及您的视图模型结合特性的解决方案。

I think the XAML-only solution you choose will depend on your specific requirements. In the examples below, I am assuming that XAML-only means you are looking for a solution that does not involve binding to properties in your ViewModel.

办法＃1

如果您决定使用一个单一的切换按钮来显示和隐藏的面板，那么这可以很容易地用做触发器：

If you decide to use a single ToggleButton to show and hide your panel, then this can be done quite easily using 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 不使用的，但二传手，而不是它的行动必须是故事板。为了模拟属性的设置如能见度您可以使用 ObjectAnimationUsingKeyFrames 在故事板：

If instead you require two buttons (one for showing the panel, one for hiding the panel), then perhaps you could use an EventTrigger instead. This solution is more heavy handed since an EventTrigger does not use Setter's but instead its action is required to be a Storyboard. To emulate the setting of a property like Visibility you can use ObjectAnimationUsingKeyFrames in your 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>

希望这有助于！

这篇关于如何绑定一个点击按钮来改变面板的使用XAML的内容（网格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！