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

原文: C# WPF 左侧菜单右侧内容布局效果实现

我们要做的效果是这样的，左侧是可折叠的菜单栏，右侧是内容区域，点击左侧的菜单项右侧内容区域则相应地切换。

wpf实现的话，我的办法是用一个tabcontrol，修改tabcontrol的样式模板，首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右，然后用一个Expander将TabPanel包住实现可折叠菜单效果，最后就是把用到的控件样式修改一下即可。

 

先看下效果图：

WPF做出来的效果图：

未完善的问题：

不能添加多个可折叠菜单，我暂时没想到比较好的办法。

新建一个项目，名字随你，新建一个自定义用户控件前台修改为：

<TabControl x:Class="cloundmusic_left.controls.itabcontrol"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:cloundmusic_left.controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <TabControl.Resources>
        <!--折叠菜单的箭头按钮-->
        <ControlTemplate x:Key="ExpanderToggleButton"
                 TargetType="{x:Type ToggleButton}">
            <Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}" x:Name="Border"
        >

                <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="CollapsedArrow">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{x:Static Visibility.Hidden}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                           Storyboard.TargetName="ExpandededArrow">
                                    <DiscreteObjectKeyFrame KeyTime="0"
                                      Value="{x:Static Visibility.Visible}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="Indeterminate"