Question

我正在XAML中使用Material Design，并且正在尝试创建导航抽屉。我希望抽屉在打开/关闭按钮单击时滑入和滑出。为此，我创建了两个用于打开和关闭的按钮，使其中一个不可见。最重要的是，我在window资源中声明了动画，这些动画在EventTriggers部分中使用。但是除了开始动画之外，我还必须隐藏单击的按钮并显示另一个按钮。

现在，我已经为两个按钮创建了一个事件处理程序，并且保留了用于管理代码可见性的代码，因为这似乎是最简单的解决方案。但是，恐怕它会破坏MVVM模式，但另一方面，我不应该将此事件绑定到视图模型中的命令，因为代码会使UI相关的东西弄乱了。

动画和窗口触发器：

<Window.Resources>
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Menu">
            <EasingDoubleKeyFrame Value="70" KeyTime="0:0:0"/>
            <EasingDoubleKeyFrame Value="200" KeyTime="0:0:0.5"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="CloseMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Menu">
            <EasingDoubleKeyFrame Value="200" KeyTime="0:0:0"/>
            <EasingDoubleKeyFrame Value="70" KeyTime="0:0:0.5"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="OpenMenuButton">
        <BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="CloseMenuButton">
        <BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
    </EventTrigger>
</Window.Triggers>

带有按钮的导航部分：

<Grid Grid.Row="1" HorizontalAlignment="Left" Width="70" Background="CornflowerBlue" x:Name="Menu">
<StackPanel>
    <Grid>
        <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" 
                Background="{x:Null}" BorderBrush="{x:Null}" x:Name="OpenMenuButton" Click="ToggleMenu"
                HorizontalAlignment="Right" Width="70">

            <md:PackIcon Kind="Menu" Width="35" Height="35"/>
        </Button>

        <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" 
                Background="{x:Null}" BorderBrush="{x:Null}" Visibility="Collapsed"
                x:Name="CloseMenuButton" Click="ToggleMenu" HorizontalAlignment="Right">

            <md:PackIcon Kind="ArrowLeft" Width="35" Height="35"/>
        </Button>
    </Grid>
</StackPanel>
</Grid>

以及用于管理可见性的隐藏代码：

private void ToggleMenu(object sender, RoutedEventArgs e)
{
    ToggleButtonVisibility(OpenMenuButton);
    ToggleButtonVisibility(CloseMenuButton);
}

private void ToggleButtonVisibility(Button b)
{
    if (b.Visibility == Visibility.Collapsed || b.Visibility == Visibility.Hidden)
        b.Visibility = Visibility.Visible;
    else
        b.Visibility = Visibility.Collapsed;
}

是否有一种方法可以针对MVVM模式实现此操作（无代码隐藏），并将点击动作保留在一个位置（因为现在将它们分为两部分：动画+可见性切换）？

Answer 1

向视图模型添加bool标志（例如IsAnimationStarted）然后将其绑定到转换器的按钮可见性

<UserControl.Resources>
..
        <local:InvertableBooleanToVisibilityConverter x:Key="bool2visible" />
..
</UserControl.Resources>
..
<Grid>
        <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" 
                Background="{x:Null}" BorderBrush="{x:Null}" x:Name="OpenMenuButton"  
                Visibility="{Binding IsAnimationStarted, Converter={StaticResource bool2visible}, ConverterParameter=Inverted}"
                HorizontalAlignment="Right" Width="70">

            <md:PackIcon Kind="Menu" Width="35" Height="35"/>
        </Button>

        <Button Style="{DynamicResource MaterialDesignFloatingActionButton}" 
                Background="{x:Null}" BorderBrush="{x:Null}" Visibility="Collapsed"
                x:Name="CloseMenuButton"
Visibility="{Binding IsAnimationStarted, Converter={StaticResource bool2visible}, ConverterParameter=Normal}" 
 HorizontalAlignment="Right">

            <md:PackIcon Kind="ArrowLeft" Width="35" Height="35"/>
        </Button>
    </Grid>

能见度转换器： https://stackoverflow.com/a/2427307/6468720

MVVM和切换按钮的可见性

1 个答案: