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>