參考地址：
https://www.bilibili.com/video/av499162869
效果：
1 <Window x:Class="KtfDataManagement.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:KtfDataManagement" 7 Title="Data Management System" 8 Closed="Window_Closed" 9 WindowStartupLocation="CenterScreen" 10 WindowState="Normal" 11 ResizeMode="NoResize" 12 WindowStyle="None" 13 Width="1030.5" 14 Height="756.053"> 15 <Window.Resources> 16 <!--Toggle Button Style Template--> 17 <ImageBrush x:Key="tb_mouse_over" 18 ImageSource="Assets/internet_grey.png" /> 19 20 <!--text font style--> 21 <Style x:Key="font_style" TargetType="TextBlock"> 22 <Setter Property="FontFamily" Value="Fonts/iconfont.ttf #Roboto" /> 23 <Setter Property="VerticalAlignment" Value="Center" /> 24 <Setter Property="HorizontalAlignment" Value="Left" /> 25 <Setter Property="Foreground" Value="White" /> 26 <Setter Property="FontSize" Value="20" /> 27 </Style> 28 29 <!--tooltip style template--> 30 <Style TargetType="ToolTip" x:Key="tt_style"> 31 <Setter Property="Placement" Value="Right" /> 32 <Setter Property="Height" Value="40" /> 33 <Setter Property="Width" Value="100" /> 34 <Setter Property="Margin" Value="20,0,0,0" /> 35 <Setter Property="Background" Value="#4A5668" /> 36 <Setter Property="BorderBrush" Value="Transparent" /> 37 <Setter Property="Foreground" Value="White" /> 38 <Setter Property="FontFamily" Value="Fonts/iconfont.ttf #Roboto" /> 39 <Setter Property="FontSize" Value="16" /> 40 <Setter Property="PlacementRectangle" Value="60,0,0,0" /> 41 <Setter Property="HorizontalOffset" Value="15" /> 42 <Setter Property="VerticalOffset" Value="6" /> 43 <Setter Property="HasDropShadow" Value="True" /> 44 <Setter Property="HorizontalContentAlignment" Value="Center" /> 45 46 47 </Style> 48 49 <Style x:Key="tb_style" TargetType="{x:Type ToggleButton}"> 50 <Setter Property="Template"> 51 <Setter.Value> 52 <ControlTemplate TargetType="{x:Type ToggleButton}"> 53 <Border x:Name="border" 54 BorderThickness="{TemplateBinding BorderThickness}" 55 Background="{TemplateBinding Background}" 56 SnapsToDevicePixels="True"> 57 </Border> 58 <ControlTemplate.Triggers> 59 <Trigger Property="IsMouseOver" Value="True"> 60 <Setter Property="Background" 61 TargetName="border" 62 Value="{StaticResource tb_mouse_over}" /> 63 <Setter Property="BorderBrush" 64 TargetName="border" 65 Value="{StaticResource tb_mouse_over}" /> 66 </Trigger> 67 <Trigger Property="IsChecked" Value="True"> 68 <Setter Property="Background" 69 TargetName="border" 70 Value="{StaticResource tb_mouse_over}" /> 71 <Setter Property="BorderBrush" 72 TargetName="border" 73 Value="{StaticResource tb_mouse_over}" /> 74 75 </Trigger> 76 77 78 </ControlTemplate.Triggers> 79 80 81 82 </ControlTemplate> 83 84 </Setter.Value> 85 </Setter> 86 87 </Style> 88 89 </Window.Resources> 90 91 <Grid> 92 <!-- background color --> 93 <Grid Background="#999999"> 94 <!--navigation panel--> 95 <Grid x:Name="nav_pnl" 96 HorizontalAlignment="Left" 97 Width="65" 98 Background="#333333" 99 100 > 101 102 <StackPanel x:Name="st_pnl"> 103 104 <!--Grid for the Menu Toggle Button--> 105 106 <Grid Height="90"> 107 <!--menu title text--> 108 <TextBlock Grid.Row="1" 109 Grid.Column="0" 110 Margin="73,-20,0,0" 111 Text="數據管理系統" 112 Foreground="White" 113 FontSize="22" 114 Background="Transparent" 115 HorizontalAlignment="Left" 116 VerticalAlignment="Center" 117 Style="{StaticResource font_style}"> 118 119 <!--shadow effect--> 120 <TextBlock.Effect> 121 <DropShadowEffect BlurRadius="10" 122 ShadowDepth="1" 123 Direction="-90" 124 Color="White" /> 125 </TextBlock.Effect> 126 127 128 </TextBlock> 129 130 <!--Toggle Button--> 131 <ToggleButton x:Name="tg_btn" 132 Grid.Column="0" 133 VerticalAlignment="Center" 134 HorizontalAlignment="Left" 135 Margin="18,-20,0,0" 136 Height="30" 137 Width="30" 138 BorderThickness="0" 139 Style="{StaticResource tb_style}"> 140 141 <!--Toggle Button - Background Image--> 142 <ToggleButton.Background> 143 <ImageBrush ImageSource="Assets/internet.png" Stretch="Fill" /> 144 </ToggleButton.Background> 145 146 <!--Toggle Button - checked unchecked event--> 147 <ToggleButton.Triggers> 148 <EventTrigger RoutedEvent="ToggleButton.Unchecked"> 149 <BeginStoryboard> 150 <Storyboard x:Name="HideStackPanel"> 151 <DoubleAnimation 152 Storyboard.TargetName="nav_pnl" 153 Storyboard.TargetProperty="Width" 154 BeginTime="0:0:0" 155 From="230" To="65" 156 Duration="0:0:0.2"> 157 </DoubleAnimation> 158 </Storyboard> 159 </BeginStoryboard> 160 </EventTrigger> 161 162 <EventTrigger RoutedEvent="ToggleButton.Checked"> 163 <BeginStoryboard> 164 <Storyboard x:Name="ShowStackPanel"> 165 <DoubleAnimation 166 Storyboard.TargetName="nav_pnl" 167 Storyboard.TargetProperty="Width" 168 BeginTime="0:0:0" 169 From="65" To="230" 170 Duration="0:0:0.3"> 171 </DoubleAnimation> 172 173 </Storyboard> 174 </BeginStoryboard> 175 176 177 </EventTrigger> 178 179 </ToggleButton.Triggers> 180 181 </ToggleButton> 182 183 </Grid> 184 185 <!--listview with menu list item--> 186 <ListView x:Name="LV" 187 Background="Transparent" 188 BorderBrush="Transparent" 189 ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 190 191 <!--Home--> 192 <ListViewItem HorizontalAlignment="Left" 193 Margin="0,0,0,15"> 194 <StackPanel Orientation="Horizontal" Width="230"> 195 <Image Source="Assets/favorite2.png" 196 Stretch="Fill" 197 Margin="12,0,0,0" /> 198 <TextBlock Text="Home" Margin="25,0,0,0" 199 Style="{StaticResource font_style}" /> 200 </StackPanel> 201 202 <!--tooltip--> 203 <ListViewItem.ToolTip> 204 <ToolTip x:Name="tt_home" 205 Content="Home" 206 Style="{StaticResource tt_style}"/> 207 </ListViewItem.ToolTip> 208 </ListViewItem> 209 210 <!--Contacts--> 211 212 213 </ListView> 214 215 216 </StackPanel> 217 218 219 220 </Grid> 221 222 </Grid> 223 224 225 226 227 </Grid> 228 </Window>