菜单收缩有很多种方法具体如何实现还是看个人想法：

第一种通过后台控制收起与展开：

效果图：

代码 ：

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid x:Name="ListMenu" Background="#070607" Focusable="False">

            </Grid>
        </Grid>
        <Grid Grid.Column=" Background="#211E1E">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid  Background="#211E1E">
                <Border Height=" Margin="-6,0,0,0" Background="#070607"
                        MouseLeftButtonDown="No_MouseLeftButtonDown" ToolTip="展开">
                    <Border Height="  Margin="-2,0,0,0">
                        <Border.Background>
                            <ImageBrush ImageSource="/Image/Open.png"/>
                        </Border.Background>
                    </Border>
                </Border>
            </Grid>
            <Grid Grid.Column=">

            </Grid>
        </Grid>
    </Grid>

后台定义：

 private DoubleAnimation c_daListAnimation;
        public bool c_bState = true;//记录菜单栏状态 false隐藏 true显示

主窗体Loaded和border的MouseLeftButtonDown事件

 void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            c_daListAnimation = new DoubleAnimation();

        }

 private void No_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (c_bState)
            {

                c_bState = false;
                c_daListAnimation.From = ;
                c_daListAnimation.To = -;
                cd.Width = );
            }
            else
            {
                c_bState = true;
                c_daListAnimation.From = -;
                c_daListAnimation.To = ;
                cd.Width = );
            }

        }

第二种实现方法是通过Expander修改模板实现（效果图如下）

效果图：

修改后台模板代码：

<SolidColorBrush x:Key="Expander.MouseOver.Circle.Stroke" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Expander.MouseOver.Circle.Fill" Color="Transparent"/>
        <SolidColorBrush x:Key="Expander.MouseOver.Arrow.Stroke" Color="#222"/>
        <SolidColorBrush x:Key="Expander.Pressed.Circle.Stroke" Color="#FF526C7B"/>
        <SolidColorBrush x:Key="Expander.Pressed.Circle.Fill" Color="Transparent"/>
        <SolidColorBrush x:Key="Expander.Pressed.Arrow.Stroke" Color="#FF003366"/>
        <SolidColorBrush x:Key="Expander.Disabled.Circle.Stroke" Color="DarkGray"/>
        <SolidColorBrush x:Key="Expander.Disabled.Circle.Fill" Color="Transparent"/>
        <SolidColorBrush x:Key="Expander.Disabled.Arrow.Stroke" Color="#666"/>
        <SolidColorBrush x:Key="Expander.Static.Circle.Fill" Color="Transparent"/>
        <SolidColorBrush x:Key="Expander.Static.Circle.Stroke" Color="DarkGray"/>
        <SolidColorBrush x:Key="Expander.Static.Arrow.Stroke" Color="#666"/>
        <Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <Grid Background="Transparent" SnapsToDevicePixels="False">

                                <Grid>
                                    <Grid.LayoutTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <TransformCollection>
                                                    <RotateTransform Angle="/>
                                                </TransformCollection>
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Grid.LayoutTransform>
                                    <Rectangle x:Name="/>
                                    <Path x:Name=" VerticalAlignment="Center"/>
                                </Grid>
                                <ContentPresenter HorizontalAlignment=" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>

                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Data" TargetName="arrow" Value="M 1,4.5  L 4.5,1  L 8,4.5"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>
                                <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>
                                <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="StrokeThickness" TargetName="arrow" Value="1.5"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>
                                <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>
                                <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border Padding="{TemplateBinding Padding}">
                            <Grid Background="Transparent" SnapsToDevicePixels="False">

                                <Grid>
                                    <Grid.LayoutTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <TransformCollection>
                                                    <RotateTransform Angle="/>
                                                </TransformCollection>
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Grid.LayoutTransform>
                                    <Rectangle x:Name="/>
                                    <Path x:Name=" VerticalAlignment="Center"/>
                                </Grid>
                                <ContentPresenter HorizontalAlignment=" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>

                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter Property="Data" TargetName="arrow" Value="M 1,1.5 L 4.5,5 L 8,1.5"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Stroke}"/>
                                <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.MouseOver.Circle.Fill}"/>
                                <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.MouseOver.Arrow.Stroke}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="StrokeThickness" TargetName="arrow" Value="1.5"/>

                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Stroke" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Stroke}"/>
                                <Setter Property="Fill" TargetName="circle" Value="{StaticResource Expander.Disabled.Circle.Fill}"/>
                                <Setter Property="Stroke" TargetName="arrow" Value="{StaticResource Expander.Disabled.Arrow.Stroke}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ExpanderHeaderFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle Margin=" StrokeDashArray="1 2"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Border BorderBrush=" SnapsToDevicePixels="true">
                            <DockPanel>
                                <ToggleButton x:Name="HeaderSite"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                    Content="{TemplateBinding Header}" DockPanel.Dock="Top"
                                    Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}"
                                    FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}" FontStyle="{TemplateBinding FontStyle}"
                                    FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}"
                                    FontFamily="{TemplateBinding FontFamily}"
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                    Margin=" Padding="{TemplateBinding Padding}"
                                    Style="{StaticResource ExpanderLeftHeaderStyle}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <ContentPresenter x:Name="ExpandSite" DockPanel.Dock="Bottom" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </DockPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="true">
                                <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="ExpandDirection" Value="Right">
                                <Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Right"/>
                                <Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
                                <Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource ExpanderRightHeaderStyle}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

expander（button样式自己写吧）

<Expander  ExpandDirection=" Style="{DynamicResource ExpanderStyle1}" IsExpanded="True">
            <DockPanel Background="#FF5750">
                <Image DockPanel.Dock=" Margin="10,20"/>
                <Button DockPanel.Dock="Top" Foreground="White" Template="{StaticResource IconButtonTemplate}" Margin="0,2">
                    <Button.Content>

                        <StackPanel Orientation="Horizontal" Margin="20,0">
                            <Image Source="/>
                            <TextBlock Margin="15,0" VerticalAlignment="Center" Text="消息列表"/>
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Button DockPanel.Dock="Top" Foreground="White" Template="{StaticResource IconButtonTemplate}" Margin="0,2">
                    <Button.Content>
                        <StackPanel Orientation="Horizontal" Margin="20,0">
                            <Image Source="/>
                            <TextBlock Margin="15,0" VerticalAlignment="Center" Text="所有应用"/>
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Button DockPanel.Dock="Top" Foreground="White" Template="{StaticResource IconButtonTemplate}" Margin="0,2">
                <Button.Content>
                        <StackPanel Orientation="Horizontal" Margin="20,0">
                            <Image Source="/>
                            <TextBlock Margin="15,0" VerticalAlignment="Center" Text="时间安排"/>
                        </StackPanel>
                    </Button.Content>
                </Button>
                <Label/>
            </DockPanel>
        </Expander>

转载请注明地址http://www.cnblogs.com/yanjinhua/

wpf 列表、菜单 收起与展开，通过Grid DoubleAnimation或者Expander实现的更多相关文章

  1. js 菜单收起和展开

  2. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

  3. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

  4. .NET CORE(C#) WPF 抽屉式菜单

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 抽屉式菜单 阅读导航 本文背景 代码实现 本文参考 源码 ...

  5. iview menu组件手动收起与展开

    本文主要介绍menu组件在有子菜单时如何手动的展开与收起. 展开: 在需要展开的地方先设置openname变量如this.openname = ["设置"]; 再在$nextTic ...

  6. MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单

    一.左侧列表菜单 打开视图Menu.cshtml,增加部分见红框 在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...

  7. Ecshop 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

  8. javascript实现列表的点击展开折叠

    <script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...

  9. 后台增加一个左侧列表菜单menu菜单的方法

    Ecshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages ...

随机推荐

  1. ubuntu如何安装nodejs最新版 本

    如何正确的安装nodejs? 我们可以先安装nvm, git clone https://github.com/creationix/nvm.git ~/.nvm 然后打开 ~/.bashrc ,   ...

  2. [原]分享一下我和MongoDB与Redis那些事

    缘起:来自于我在近期一个项目上遇到的问题,在Segmentfault上发表了提问 知识背景: 对不是很熟悉MongoDB和Redis的同学做一下介绍. 1.MongoDB数组查询:MongoDB自带L ...

  3. BPM应用开发解决方案分享

    一.需求分析企业整体管理是一个完整的体系,如果 把这个体系比做一个拼图,企业信息化通过各个业务系统覆盖了一部分业务. 企业通过采购实施通用软件的方式,覆盖了企业的核心业务和专业化业务然而系统只满足了部 ...

  4. SQL-类型转换函数

    CAST ( expression AS data_type)CONVERT ( data_type, expression,[style]) Select '您的班级编号'+ 1  错误这里+是数学 ...

  5. asp.net core 负载均衡集群搭建（centos7+nginx+supervisor+kestrel）

    概述 本文目的是搭建三台asp.net core 集群, 并配上 nginx做负载均衡   首先准备要运行的源码 http://pan.baidu.com/s/1c20x0bA 准备三台服务器(或则虚 ...

  6. 烂泥：wiki系统confluence5.6.6安装、中文、破解及迁移

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它 ...

  7. REGEX例子

    作为REGEX的例子,代码9.3显示了一个给定的文件有多少行,具有给定的模式,通过命令行输入(注:有更有效率的方式来实现这个功能,如Unix下的grep命令,在这里只是给出了另一种方式).这个程序像下 ...

  8. DoraCMS 源码知识点备注

    项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...

  9. Visual Studio Code 使用Git进行版本控制

    Visual Studio Code 使用Git进行版本控制 本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 所有中文教程,竟没有一个靠谱的.遂动笔写一篇. 请确保你 ...

  10. 修复IE11首页被恶意篡改的问题

    前几天为了测试一个程序,把系统换成了Windows10,Windows10自带了微软的新浏览器Edge和IE11,用来其实也没什么太多感觉了,我习惯于Chrome,但有些东西还是得用IE,比如网银之类 ...