示例：WPF中使用Grid+Margin实现抽屉菜单效果

He BianGu

已于 2024-07-25 16:16:14 修改

阅读量5.1k

点赞数 5

分类专栏： WPF 文章标签： wpf

于 2020-02-26 10:53:14 首次发布

本文链接：https://blog.csdn.net/u010975589/article/details/104512281

版权

WPF 专栏收录该内容

68 篇文章

订阅专栏

一、目的：演示在WPF中使用Grid+Margin实现抽屉菜单效果

二、效果：

三、步骤：

1、整体应用Grid布局：

<Grid>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

<Grid>

注意：第一列设置成Width="Auto"

2、右侧用ToggleButton控制显示与隐藏效果，在Checked和Unchecked事件用触发效果左侧内容的Margin属性

      <Grid>

                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="Auto"/>
                                                            <ColumnDefinition/>
                                                        </Grid.ColumnDefinitions>

                                                        <!--左侧菜单-->
                                                        <StackPanel x:Name="sp_left" Background="{DynamicResource S.Brush.Accent}" Width="278">

                                                            <Image Width="150" Height="{TemplateBinding CaptionHeight}" Source="{TemplateBinding Logo}" HorizontalAlignment="Center" VerticalAlignment="Center" />

                                                            <local:LinkGroupExpander Style="{DynamicResource S.LinkGroupExpander.Accent}"
                                                        ItemsSource="{TemplateBinding LinkActionGroups}" 
                                                        SelectedLink="{Binding RelativeSource={RelativeSource
                                                                Mode=TemplatedParent},Path=CurrentLink,Mode=TwoWay}"/>
                                                        </StackPanel>

                                                        <!--右侧区域-->
                                                        <Grid Grid.Column="1">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="Auto"/>
                                                                <RowDefinition/>
                                                            </Grid.RowDefinitions>
                                                            
                                                            <!--右侧抬头-->
                                                            <Grid  x:Name="PART_TITLEGRID" Background="Transparent" Height="{TemplateBinding CaptionHeight}" Margin="0,2,2,0">

                                                                <!--隐藏菜单按钮-->
                                                                <ToggleButton  Content="&#xeb3a;"  Style="{DynamicResource S.ToggleButton.DoubleFIconChecked}" 
                                              IsTabStop="False" base:ControlAttachProperty.FIconSize="35" IsChecked="true"
                                                          base:ControlAttachProperty.FIcon="&#xe9ce;" HorizontalAlignment="Left" Margin="10,0"     
                                              base:ControlAttachProperty.AllowsAnimation="{Binding RelativeSource={RelativeSource Mode=Self},Path=IsChecked}">
                                                                    <base:Interaction.Triggers>
                                                                        <base:EventTrigger EventName="Checked">
                                                                            <base:InvokeCommandAction Command="{x:Static local:CommandService.VisibleOfMarginLeftCommand}" CommandParameter="{Binding ElementName=sp_left}"/>
                                                                        </base:EventTrigger>

                                                                        <base:EventTrigger EventName="Unchecked">
                                                                            <base:InvokeCommandAction Command="{x:Static local:CommandService.CollapsedOfMarginLeftCommand}" CommandParameter="{Binding ElementName=sp_left}"/>
                                                                        </base:EventTrigger>
                                                                    </base:Interaction.Triggers>
                                                                </ToggleButton>
                                                                
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>

其中修改Margin属性的动画被封装在自定义Command里面，用于方便调用，代码如下：

    /// <summary> 向左侧隐藏区域 </summary>
    public class CollapsedOfMarginLeftCommand : ICommand
    {
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            if (parameter is FrameworkElement element)
            {
                ThicknessAnimation marginAnimation = new ThicknessAnimation();
                marginAnimation.From = new Thickness(0, 0, 0, 0);
                marginAnimation.To = new Thickness(-element.ActualWidth, 0, 0, 0);
                marginAnimation.Duration = TimeSpan.FromSeconds(0.5);
                //marginAnimation.Completed += (l, k) =>
                //  {
                //      element.Visibility = Visibility.Hidden;
                //  };
                element.BeginAnimation(FrameworkElement.MarginProperty, marginAnimation);

            }
        }

        public event EventHandler CanExecuteChanged;
    }

    /// <summary> 向右侧显示区域 </summary>

    public class VisibleOfMarginLeftCommand : ICommand
    {
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            if (parameter is FrameworkElement element)
            {
                //element.Visibility = Visibility.Visible;
                ThicknessAnimation marginAnimation = new ThicknessAnimation();
                marginAnimation.From = new Thickness(-element.ActualWidth, 0, 0, 0);
                marginAnimation.To = new Thickness(0, 0, 0, 0);
                marginAnimation.Duration = TimeSpan.FromSeconds(0.5);
                element.BeginAnimation(FrameworkElement.MarginProperty, marginAnimation);

            }
        }

        public event EventHandler CanExecuteChanged;
    }