Prism for WPF 搭建一个简单的模块化开发框架（六）隐藏菜单、导航

原文:Prism for WPF 搭建一个简单的模块化开发框架（六）隐藏菜单、导航

这个实际上是在聊天之前做的，一起写了，也不分先后了

看一下效果图，上面是模块主导航，左侧是模块内菜单，现在加一下隐藏菜单，让中间部分更大

 

直接上代码吧，上下代码基本上一样就只贴左侧的代码了

既然做这个，少不了用个动画

按钮样式

 <Style x:Key="LeftShowAndHideToggleButtonStyle" TargetType="ToggleButton">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ToggleButton">

                        <Grid x:Name="grid">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CheckStates">

                                    <VisualState x:Name="Checked"/>

                                    <VisualState x:Name="Unchecked">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="Flexible_arrow"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Indeterminate"/>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <ColorAnimation Duration="0" To="#FF25418D" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="path"/>

                                            <ColorAnimation Duration="0" To="#FF4179C2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="path"/>

                                            <ColorAnimation Duration="0" To="#FF5EB2F8" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="path"/>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="grid">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Cursor>Hand</Cursor>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Pressed"/>

                                    <VisualState x:Name="Disabled"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Path x:Name="path" Stretch="Fill" Data="F1 M 1131.5,311.621L 1131.5,311.621C 1133.15,311.621 1134.5,312.964 1134.5,314.621L 1134.5,504.621C 1134.5,506.278 1133.15,507.621 1131.5,507.621L 1131.5,507.621C 1129.84,507.621 1128.5,506.278 1128.5,504.621L 1128.5,314.621C 1128.5,312.964 1129.84,311.621 1131.5,311.621 Z ">

                                <Path.Fill>

                                    <LinearGradientBrush StartPoint="-2.03455e-005,0.5" EndPoint="1,0.5">

                                        <GradientStop Color="#B325418D" Offset="0.231481"/>

                                        <GradientStop Color="#B34179C2" Offset="0.680556"/>

                                        <GradientStop Color="#B35EB2F8" Offset="1"/>

                                    </LinearGradientBrush>

                                </Path.Fill>

                            </Path>

                            <Path x:Name="Flexible_arrow" Stretch="Fill" Fill="#CDFFFFFF" Data="F1 M 1133.47,408.839L 1130.43,411.621L 1130.43,406.058L 1133.47,408.839 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Width="3" Height="6" RenderTransformOrigin="0.5,0.5">

                                <Path.RenderTransform>

                                    <RotateTransform />

                                </Path.RenderTransform>

                            </Path>

                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 

布局代码

<Grid x:Name="LayoutRoot">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="8"/>

        </Grid.ColumnDefinitions>

        <Grid x:Name="treeViewGrid" Width="222">

        <TreeView x:Name="treeView" Style="{StaticResource MenuTreeView}" ItemsSource="{Binding ItemTreeDataList}" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" SelectedItemChanged="treeView_SelectedItemChanged" >

            <TreeView.ItemTemplate>

                <HierarchicalDataTemplate ItemsSource="{Binding Children}">

                    <TextBlock x:Name="treeViewItemTB" Text="{Binding itemName}" Tag="{Binding itemId}"/>

                </HierarchicalDataTemplate>

            </TreeView.ItemTemplate>

        </TreeView>

        </Grid>

        <Grid Grid.Column="1" Margin="0">

            <ToggleButton Style="{StaticResource LeftShowAndHideToggleButtonStyle}" Margin="0,0,0,0" x:Name="menuBtn" Width="8" Height="50" Click="menuBtn_Click">

            </ToggleButton>

        </Grid>

    </Grid>

按钮点击

private void menuBtn_Click(object sender, RoutedEventArgs e)

        {

            if ((sender as ToggleButton).IsChecked.Value)

            {

                Storyboard sbHide = this.Resources["sb_HideRightPart"] as Storyboard;

                if (sbHide != null)

                    sbHide.Begin();

            }

            else

            {

                Storyboard sbHide = this.Resources["sb_ShowRightPart"] as Storyboard;

                if (sbHide != null)

                    sbHide.Begin();

            }

        }

Storyboard 代码

 <Storyboard x:Name="sb_HideRightPart" x:Key="sb_HideRightPart" FillBehavior="HoldEnd">

            <DoubleAnimation Duration="0:0:0.3" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="treeViewGrid" d:IsOptimized="True"/>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="treeViewGrid">

                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="222"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Name="sb_ShowRightPart" x:Key="sb_ShowRightPart" FillBehavior="HoldEnd">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="treeViewGrid">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="222"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="treeViewGrid">

                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>