Как привязать нажатие кнопки, чтобы изменить содержимое панели (сетки) с помощью XAML - PullRequest
Новая
       57

Как привязать нажатие кнопки, чтобы изменить содержимое панели (сетки) с помощью XAML

2 голосов
/ 08 октября 2011

Я создаю пользовательский интерфейс приложения WPF, и, работая над реализацией функций программного обеспечения, у меня не было большого опыта по созданию пользовательского интерфейса.

Теперь мне нужен способ изменить содержимое панели «Свойства», в которой есть сетка для содержания. Я создал несколько панелей, скрытых все, кроме одной, и теперь я хочу переключаться, когда пользователь нажимает кнопку на ленте сверху (или это может быть любая кнопка где-то еще в макете).

Это очень легко сделать с кодом, но я хочу сделать это без кода, используя только XAML. Как это сделать?

Кроме того, как связать подобное поведение с другими элементами пользовательского интерфейса?

1 Ответ

10 голосов
/ 09 октября 2011

Я думаю, что решение только для 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>

Надеюсь, это поможет!

...