wpf 导航栏(展开效果也不错)源码

【实例截图】

【核心代码】

<Window x:Class="WPFNavigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
        Name="mainForm" Title="MainWindow" Height="768" Width="1024"
        AllowsTransparency="True" WindowStyle="None" Background="{x:Null}"
        MouseLeftButtonDown="Window_MouseLeftButtonDown">
    
    <Window.Resources>
        <Storyboard x:Key="sb" >
            <DoubleAnimation Storyboard.TargetName="mainForm" 
              Storyboard.TargetProperty="Width" From="0" To="1024" 
              Duration="0:0:1" BeginTime="0:0:0"/>
        </Storyboard>
    </Window.Resources>
    
    <Grid Background="LightBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="6" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        
        <!-- toolbar-->
        <StackPanel  Grid.Row="0" Margin="0"  Orientation="Horizontal">
            <StackPanel.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="LightBlue" Offset="0.0" />
                    <GradientStop Color="AliceBlue" Offset="0.5" />
                    <GradientStop Color="LightBlue" Offset="1.0" />
                </LinearGradientBrush>
            </StackPanel.Background>
                
            <Grid Width="1020">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>

                <TextBlock x:Name="userInfo" FontWeight="Bold" FontSize="26" Text="某某某设备助手V1.0"  Foreground="#FFF1DC05" Grid.Column="1" VerticalAlignment="Center">
                    <TextBlock.Effect>
                        <DropShadowEffect/>
                    </TextBlock.Effect>
                </TextBlock>
                <TextBlock x:Name="authorName" FontWeight="Bold" FontSize="14"  Text="深圳某某某有限公司 0755-11111111"  Foreground="#FF463E3E" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Right" />
                <Image x:Name="Logout"  MouseLeftButtonDown="Logout_MouseLeftButtonDown"  Source="images/logout.png"  Stretch="Uniform" Margin="0" Grid.Column="2" Grid.Row="0" Height="26" Width="30" Cursor="Hand" />
            </Grid>
        </StackPanel>
        <!--end toolbar-->
            
        <!--分割线-->
        <StackPanel Grid.Row="1">
            <Separator Style="{StaticResource ResourceKey=CorrectSeparatorStyle}" Height="5">
            </Separator>
        </StackPanel>

        <Grid Name="gridForm" Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="95" x:Name="gridFormLeft"/>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <StackPanel  x:Name="LeftBar" Background="#266980" Grid.Column="0" >
                <TabControl x:Name="LeftTabControl" TabStripPlacement="Left" Background="LightBlue" Height="680" SelectionChanged="LeftTabControl_SelectionChanged" 
                            BorderThickness="1,0,0,0" >
                    <TabItem Header="设备状态" Name="tabDevSt" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold"
                             Style="{DynamicResource TabItemStyle}">
                        <TabItem.Background>
                            <ImageBrush ImageSource="images/devst.png" />
                        </TabItem.Background>
                    </TabItem>
                    
                    <TabItem Header="手动测试" Name="tabDevTest" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold"
                             Style="{DynamicResource TabItemStyle}">
                        <TabItem.Background>
                            <ImageBrush ImageSource="images/mantest.png" />
                        </TabItem.Background>
                    </TabItem>

                    <TabItem Header="参数设置" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold"
                             Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display">
                        <TabItem.Background>
                            <ImageBrush ImageSource="images/setting.png" />
                        </TabItem.Background>
                    </TabItem>

                    <TabItem Header="功能设置" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold"
                             Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display">
                        <TabItem.Background>
                            <ImageBrush ImageSource="images/funsetting.png" />
                        </TabItem.Background>
                    </TabItem>

                </TabControl>
            </StackPanel>
            <!--end tab-->

            <StackPanel  Grid.Column="1" Background="White" Margin="0,0,1,0" Orientation="Horizontal">
                <!--加载其他的page xaml-->
                <Frame x:Name="pageContainer" ScrollViewer.CanContentScroll="True" NavigationUIVisibility="Hidden">                    
                </Frame>
            </StackPanel>
        </Grid> 

    </Grid>
</Window>