├── Icons
    ├── img_contact.png
    ├── img_home.png
    ├── img_map.png
    ├── img_message.png
    ├── img_setting.png
    └── img_signout.png
├── Images
    └── Navigation Drawer Image.jpg
├── LICENSE
├── Navigation Drawer App - Preview Image.png
├── Navigation Drawer App.rar
├── README.md
└── Source
    ├── App.xaml
    ├── App.xaml.cs
    ├── MainWindow.xaml
    └── MainWindow.xaml.cs


/Icons/img_contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_contact.png


--------------------------------------------------------------------------------
/Icons/img_home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_home.png


--------------------------------------------------------------------------------
/Icons/img_map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_map.png


--------------------------------------------------------------------------------
/Icons/img_message.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_message.png


--------------------------------------------------------------------------------
/Icons/img_setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_setting.png


--------------------------------------------------------------------------------
/Icons/img_signout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Icons/img_signout.png


--------------------------------------------------------------------------------
/Images/Navigation Drawer Image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Images/Navigation Drawer Image.jpg


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Arun Mutharasu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Navigation Drawer App - Preview Image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Navigation Drawer App - Preview Image.png


--------------------------------------------------------------------------------
/Navigation Drawer App.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/Navigation-Drawer-Sidebar-Menu-in-WPF/ebff9360e7483257504e4393fa2287b0cbd3049a/Navigation Drawer App.rar


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WPF - Navigation Drawer / Sidebar Menu
 2 | 
 3 | 
 4 | How to design a Navigation Drawer / Sidebar Menu in WPF - https://youtu.be/fzBcXicj2G8
 5 | 
 6 | ![Navigation Drawer Thumbnail](https://user-images.githubusercontent.com/55704859/179336840-9a7c96a2-672a-44df-8143-3614539bc47a.jpg)
 7 | 
 8 | Icon Credits : https://icons8.com/icons
 9 | 
10 | 
11 | <b>GitHub Account</b> : https://github.com/CSharpDesignPro
12 | 


--------------------------------------------------------------------------------
/Source/App.xaml:
--------------------------------------------------------------------------------
 1 | <Application x:Class="Navigation_Drawer_App.App"
 2 |              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3 |              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4 |              xmlns:local="clr-namespace:Navigation_Drawer_App"
 5 |              StartupUri="MainWindow.xaml">
 6 |     <Application.Resources>
 7 |          
 8 |     </Application.Resources>
 9 | </Application>
10 | 


--------------------------------------------------------------------------------
/Source/App.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Configuration;
 4 | using System.Data;
 5 | using System.Linq;
 6 | using System.Threading.Tasks;
 7 | using System.Windows;
 8 | 
 9 | namespace Navigation_Drawer_App
10 | {
11 |     /// <summary>
12 |     /// Interaction logic for App.xaml
13 |     /// </summary>
14 |     public partial class App : Application
15 |     {
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/Source/MainWindow.xaml:
--------------------------------------------------------------------------------
  1 | 
  2 |     <!--<Summary> ///
  3 |     /// Author : R. Arun Mutharasu ///
  4 |     /// Created : 10-03-2020
  5 |     /// YouTube Channel : C# Design Pro ///
  6 |     /// </Summary>-->    
  7 |     
  8 |     <Window x:Class="Navigation_Drawer_App.MainWindow"
  9 |         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 10 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 11 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 12 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 13 |         xmlns:local="clr-namespace:Navigation_Drawer_App"
 14 |         mc:Ignorable="d"
 15 |         Title="MainWindow" 
 16 |         Height="600" 
 17 |         Width="800"
 18 |         ResizeMode="NoResize"
 19 |         Topmost="True"
 20 |         WindowStyle="None"
 21 |         WindowStartupLocation="CenterScreen">
 22 | 
 23 |     <Window.Resources>
 24 |         
 25 |         <!--// Toggle Button Style Template //-->
 26 | 
 27 |         <ImageBrush x:Key="tb_mouse_over"
 28 |                     ImageSource="Assets/tgBtn_MouseOver.png"/>
 29 |         
 30 |         <!--// Text font style //-->
 31 | 
 32 |         <Style x:Key="font_style" TargetType="TextBlock">
 33 | 
 34 |             <Setter Property="FontFamily"
 35 |                     Value="Fonts/Roboto-Light.ttf #Roboto"/>
 36 | 
 37 |             <Setter Property="VerticalAlignment"
 38 |                     Value="Center"/>
 39 | 
 40 |             <Setter Property="HorizontalAlignment"
 41 |                     Value="Left"/>
 42 | 
 43 |             <Setter Property="Foreground"
 44 |                     Value="White"/>
 45 | 
 46 |             <Setter Property="FontSize"
 47 |                     Value="20"/>
 48 | 
 49 |         </Style>
 50 |         
 51 |         <!--// Tooltip Style Template //-->
 52 | 
 53 |         <Style TargetType="ToolTip" x:Key="tt_style">
 54 | 
 55 |             <Setter Property="Placement" Value="Right"/>
 56 |             <Setter Property="Height" Value="40"/>
 57 |             <Setter Property="Width" Value="100"/>
 58 |             <Setter Property="Margin" Value="20,0,0,0"/>
 59 |             <Setter Property="Background" Value="#4A5668"/>
 60 |             <Setter Property="BorderBrush" Value="Transparent"/>
 61 |             <Setter Property="Foreground" Value="White"/>
 62 |             <Setter Property="FontFamily" Value="Fonts/Roboto-Light.ttf #Roboto"/>
 63 |             <Setter Property="FontSize" Value="16"/>
 64 |             <Setter Property="PlacementRectangle" Value="60,0,0,0"/>
 65 |             <Setter Property="HorizontalOffset" Value="15"/>
 66 |             <Setter Property="VerticalOffset" Value="6"/>
 67 |             <Setter Property="HasDropShadow" Value="True"/>
 68 |             <Setter Property="HorizontalContentAlignment" Value="Center"/>
 69 | 
 70 |         </Style>
 71 |         
 72 |         <!--// App Close Button Style Template //-->
 73 | 
 74 |         <ImageBrush x:Key="CloseBtn_MouseOver" ImageSource="Assets/closeBtn_MouseOver.png"/>
 75 | 
 76 |         <Style x:Key="Close_btn" TargetType="{x:Type Button}">
 77 | 
 78 |             <Setter Property="Template">
 79 | 
 80 |                 <Setter.Value>
 81 | 
 82 |                     <ControlTemplate TargetType="{x:Type Button}">
 83 | 
 84 |                         <Border x:Name="button"
 85 |                                 BorderThickness="0"
 86 |                                 Background="{TemplateBinding Background}"
 87 |                                 SnapsToDevicePixels="True">
 88 |                             
 89 |                         </Border>
 90 | 
 91 |                         <ControlTemplate.Triggers>
 92 | 
 93 |                             <Trigger Property="IsMouseOver"
 94 |                                      Value="True">
 95 | 
 96 |                                 <Setter Property="Background"
 97 |                                         TargetName="button"
 98 |                                         Value="{StaticResource CloseBtn_MouseOver}"/>
 99 | 
100 |                             </Trigger>
101 |                             
102 |                         </ControlTemplate.Triggers>
103 |                         
104 |                     </ControlTemplate>
105 |                     
106 |                 </Setter.Value>
107 |                 
108 |             </Setter>
109 |             
110 |         </Style>
111 | 
112 | 
113 | 
114 | 
115 |         <Style x:Key="tb_style" TargetType="{x:Type ToggleButton}">
116 | 
117 |             <Setter Property="Template">
118 | 
119 |                 <Setter.Value>
120 | 
121 |                     <ControlTemplate TargetType="{x:Type ToggleButton}">
122 | 
123 |                         <Border  x:Name="border"
124 |                                  BorderThickness="{TemplateBinding BorderThickness}"
125 |                                  Background="{TemplateBinding Background}"
126 |                                  SnapsToDevicePixels="True">
127 | 
128 |                         </Border>
129 | 
130 |                         <ControlTemplate.Triggers>
131 | 
132 |                             <Trigger Property="IsMouseOver" Value="true">
133 | 
134 |                                 <Setter Property="Background"
135 |                                         TargetName="border"
136 |                                         Value="{StaticResource tb_mouse_over}"/>
137 | 
138 |                                 <Setter Property="BorderBrush"
139 |                                         TargetName="border"
140 |                                         Value="{StaticResource tb_mouse_over}"/>
141 | 
142 |                             </Trigger>
143 | 
144 |                             <Trigger Property="IsChecked" Value="true">
145 | 
146 |                                 <Setter Property="Background"
147 |                                         TargetName="border"
148 |                                         Value="{StaticResource tb_mouse_over}"/>
149 | 
150 |                                 <Setter Property="BorderBrush"
151 |                                         TargetName="border"
152 |                                         Value="{StaticResource tb_mouse_over}"/>
153 | 
154 |                             </Trigger>
155 |                             
156 |                         </ControlTemplate.Triggers>
157 |                         
158 |                     </ControlTemplate>
159 |                     
160 |                 </Setter.Value>
161 |                 
162 |             </Setter>
163 |             
164 |         </Style>
165 |         
166 |     </Window.Resources>
167 |     
168 |     <Grid>
169 |         
170 |         <!--// Background Color //-->
171 | 
172 |         <Grid Background="Black">
173 |             
174 |             <!--// Background Image //-->
175 | 
176 |             <Grid x:Name="BG" PreviewMouseLeftButtonDown="BG_PreviewMouseLeftButtonDown">
177 | 
178 |                 <Grid.Background>
179 | 
180 |                     <ImageBrush x:Name="img_bg"
181 |                                 ImageSource="Assets/img_background.png"
182 |                                 Stretch="Fill"/>
183 | 
184 |                 </Grid.Background>
185 |                 
186 |             </Grid>
187 |             
188 |             <!--// App Close Button //-->
189 | 
190 |             <Grid>
191 | 
192 |                 <Grid.ColumnDefinitions>
193 |                     <ColumnDefinition Width="*"/>
194 |                     <ColumnDefinition Width="60"/>
195 |                     <ColumnDefinition Width="30"/>
196 |                 </Grid.ColumnDefinitions>
197 | 
198 |                 <Grid.RowDefinitions>
199 |                     <RowDefinition Height="30"/>
200 |                     <RowDefinition Height="60"/>
201 |                     <RowDefinition Height="*"/>
202 |                 </Grid.RowDefinitions>
203 | 
204 |                 <Button x:Name="CloseBtn"
205 |                         Grid.Column="1"
206 |                         Grid.Row="1"
207 |                         Height="40"
208 |                         Width="40"
209 |                         BorderThickness="0"
210 |                         Style="{StaticResource Close_btn}" Click="CloseBtn_Click">
211 | 
212 |                     <Button.Background>
213 | 
214 |                         <ImageBrush ImageSource="Assets/closeBtn_default.png"/>
215 | 
216 |                     </Button.Background>
217 |                     
218 |                 </Button>
219 | 
220 |             </Grid>
221 |             
222 |             
223 |             <!--// Navigation Panel //-->
224 | 
225 |             <Grid   x:Name="nav_pnl"
226 |                     HorizontalAlignment="Left"
227 |                     Width="65"
228 |                     Background="#2E333A">
229 | 
230 |                 <StackPanel x:Name="st_pnl">
231 | 
232 |                     <!--// Grid for the Menu Toggle Button //-->
233 |                     
234 |                     <Grid Height="90">
235 |                         
236 |                         <!--// Menu title text //-->
237 | 
238 |                         <TextBlock  Grid.Row="1"
239 |                                     Grid.Column="0"
240 |                                     Margin="73,-20,0,0"
241 |                                     Text="M E N U"
242 |                                     Foreground="White"
243 |                                     FontSize="22"
244 |                                     Background="Transparent"
245 |                                     HorizontalAlignment="Left"
246 |                                     VerticalAlignment="Center"
247 |                                     Style="{StaticResource font_style}">
248 |                             
249 |                             <!--// Shadow Effect //-->
250 | 
251 |                             <TextBlock.Effect>
252 | 
253 |                                 <DropShadowEffect  BlurRadius="10"
254 |                                                    ShadowDepth="1"
255 |                                                    Direction="-90"
256 |                                                    Color="White"/>
257 | 
258 |                             </TextBlock.Effect>
259 |                             
260 |                         </TextBlock>
261 |                         
262 |                         <!--// Toggle Button //-->
263 | 
264 |                         <ToggleButton x:Name="Tg_Btn"
265 |                                       Grid.Column="0"
266 |                                       VerticalAlignment="Center"
267 |                                       HorizontalAlignment="Left"
268 |                                       Margin="18,-20,0,0"
269 |                                       Height="30"
270 |                                       Width="30"
271 |                                       BorderThickness="0"
272 |                                       Style="{StaticResource tb_style}" Unchecked="Tg_Btn_Unchecked" Checked="Tg_Btn_Checked">
273 |                             
274 |                             <!--// Toggle button default background image //-->
275 | 
276 |                             <ToggleButton.Background>
277 | 
278 |                                 <ImageBrush ImageSource="Assets/tgBtn_default.png"
279 |                                             Stretch="None"/>
280 | 
281 |                             </ToggleButton.Background>
282 |                             
283 |                             <!--// Toggle Button - Checked, Unchecked events //-->
284 | 
285 |                             <ToggleButton.Triggers>
286 | 
287 |                                 <EventTrigger RoutedEvent="ToggleButton.Unchecked">
288 | 
289 |                                     <BeginStoryboard>
290 | 
291 |                                         <Storyboard x:Name="HideStackPanel">
292 | 
293 |                                             <DoubleAnimation    
294 |                                                 
295 |                                                 Storyboard.TargetName="nav_pnl"
296 |                                                 Storyboard.TargetProperty="Width"
297 |                                                 BeginTime="0:0:0"
298 |                                                 From="230" To="65"
299 |                                                 Duration="0:0:0.2">                                                
300 |                                                 
301 |                                             </DoubleAnimation>
302 |                                             
303 |                                         </Storyboard>
304 |                                         
305 |                                     </BeginStoryboard>
306 |                                     
307 |                                 </EventTrigger>
308 | 
309 |                                 <EventTrigger RoutedEvent="ToggleButton.Checked">
310 | 
311 |                                     <BeginStoryboard>
312 | 
313 |                                         <Storyboard x:Name="ShowStackPanel">
314 | 
315 |                                             <DoubleAnimation
316 |                                                 
317 |                                                 Storyboard.TargetName="nav_pnl"
318 |                                                 Storyboard.TargetProperty="Width"
319 |                                                 BeginTime="0:0:0"
320 |                                                 From="65" To="230"
321 |                                                 Duration="0:0:0.3">                                                
322 |                                                 
323 |                                             </DoubleAnimation>
324 |                                             
325 |                                         </Storyboard>
326 |                                         
327 |                                     </BeginStoryboard>
328 |                                     
329 |                                 </EventTrigger>
330 |                                 
331 |                             </ToggleButton.Triggers>
332 |                             
333 |                             
334 |                         </ToggleButton>
335 |                         
336 |                     </Grid>
337 |                     
338 |                     <!--// ListView with menu list items //-->
339 | 
340 |                     <ListView  x:Name="LV"
341 |                                Background="Transparent"
342 |                                BorderBrush="Transparent"
343 |                                ScrollViewer.HorizontalScrollBarVisibility="Disabled">
344 | 
345 |                         <!--// Home //-->
346 |                         
347 |                         <ListViewItem HorizontalAlignment="Left"
348 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
349 |                                       >
350 | 
351 |                             <StackPanel Orientation="Horizontal"
352 |                                         Width="230">
353 | 
354 |                                 <Image Source="Assets/img_home.png"
355 |                                        Stretch="None"
356 |                                        Margin="12,0,0,0"/>
357 | 
358 |                                 <TextBlock Text="Home"
359 |                                            Margin="25,0,0,0"
360 |                                            Style="{StaticResource font_style}"/>
361 | 
362 |                             </StackPanel> 
363 |                             
364 |                             <!--// Tooltip //-->
365 | 
366 |                             <ListViewItem.ToolTip>
367 | 
368 |                                 <ToolTip x:Name="tt_home"
369 |                                          Content="Home"
370 |                                          Style="{StaticResource tt_style}"/>
371 | 
372 |                             </ListViewItem.ToolTip>
373 | 
374 |                         </ListViewItem> 
375 |                         
376 |                         <!--// Contacts //-->
377 | 
378 |                         <ListViewItem HorizontalAlignment="Left"
379 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
380 |                                       >
381 | 
382 |                             <StackPanel Orientation="Horizontal"
383 |                                         Width="230">
384 | 
385 |                                 <Image Source="Assets/img_contact.png"
386 |                                        Stretch="None"
387 |                                        Margin="12,0,0,0"/>
388 | 
389 |                                 <TextBlock Text="Contacts"
390 |                                            Margin="25,0,0,0"
391 |                                            Style="{StaticResource font_style}"/>
392 | 
393 |                             </StackPanel>
394 | 
395 |                             <!--// Tooltip //-->
396 | 
397 |                             <ListViewItem.ToolTip>
398 | 
399 |                                 <ToolTip x:Name="tt_contacts"
400 |                                          Content="Contacts"
401 |                                          Style="{StaticResource tt_style}"/>
402 | 
403 |                             </ListViewItem.ToolTip>
404 | 
405 |                         </ListViewItem>
406 |                         
407 |                         <!--// Messages //-->
408 | 
409 |                         <ListViewItem HorizontalAlignment="Left"
410 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
411 |                                       >
412 | 
413 |                             <StackPanel Orientation="Horizontal"
414 |                                         Width="230">
415 | 
416 |                                 <Image Source="Assets/img_message.png"
417 |                                        Stretch="None"
418 |                                        Margin="12,0,0,0"/>
419 | 
420 |                                 <TextBlock Text="Messages"
421 |                                            Margin="25,0,0,0"
422 |                                            Style="{StaticResource font_style}"/>
423 | 
424 |                             </StackPanel>
425 | 
426 |                             <!--// Tooltip //-->
427 | 
428 |                             <ListViewItem.ToolTip>
429 | 
430 |                                 <ToolTip x:Name="tt_messages"
431 |                                          Content="Messages"
432 |                                          Style="{StaticResource tt_style}"/>
433 | 
434 |                             </ListViewItem.ToolTip>
435 | 
436 |                         </ListViewItem>
437 |                         
438 |                         <!--// Maps //-->
439 | 
440 |                         <ListViewItem HorizontalAlignment="Left"
441 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
442 |                                       >
443 | 
444 |                             <StackPanel Orientation="Horizontal"
445 |                                         Width="230">
446 | 
447 |                                 <Image Source="Assets/img_map.png"
448 |                                        Stretch="None"
449 |                                        Margin="12,0,0,0"/>
450 | 
451 |                                 <TextBlock Text="Maps"
452 |                                            Margin="25,0,0,0"
453 |                                            Style="{StaticResource font_style}"/>
454 | 
455 |                             </StackPanel>
456 | 
457 |                             <!--// Tooltip //-->
458 | 
459 |                             <ListViewItem.ToolTip>
460 | 
461 |                                 <ToolTip x:Name="tt_maps"
462 |                                          Content="Maps"
463 |                                          Style="{StaticResource tt_style}"/>
464 | 
465 |                             </ListViewItem.ToolTip>
466 | 
467 |                         </ListViewItem>
468 |                         
469 |                         <!--// Settings //-->
470 | 
471 |                         <ListViewItem HorizontalAlignment="Left"
472 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
473 |                                       >
474 | 
475 |                             <StackPanel Orientation="Horizontal"
476 |                                         Width="230">
477 | 
478 |                                 <Image Source="Assets/img_setting.png"
479 |                                        Stretch="None"
480 |                                        Margin="12,0,0,0"/>
481 | 
482 |                                 <TextBlock Text="Settings"
483 |                                            Margin="25,0,0,0"
484 |                                            Style="{StaticResource font_style}"/>
485 | 
486 |                             </StackPanel>
487 | 
488 |                             <!--// Tooltip //-->
489 | 
490 |                             <ListViewItem.ToolTip>
491 | 
492 |                                 <ToolTip x:Name="tt_settings"
493 |                                          Content="Settings"
494 |                                          Style="{StaticResource tt_style}"/>
495 | 
496 |                             </ListViewItem.ToolTip>
497 | 
498 |                         </ListViewItem>
499 |                         
500 |                         <!--// Sign Out //-->
501 | 
502 |                         <ListViewItem HorizontalAlignment="Left"
503 |                                       Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter"
504 |                                       >
505 | 
506 |                             <StackPanel Orientation="Horizontal"
507 |                                         Width="230">
508 | 
509 |                                 <Image Source="Assets/img_signout.png"
510 |                                        Stretch="None"
511 |                                        Margin="12,0,0,0"/>
512 | 
513 |                                 <TextBlock Text="Sign Out"
514 |                                            Margin="25,0,0,0"
515 |                                            Style="{StaticResource font_style}"/>
516 | 
517 |                             </StackPanel>
518 | 
519 |                             <!--// Tooltip //-->
520 | 
521 |                             <ListViewItem.ToolTip>
522 | 
523 |                                 <ToolTip x:Name="tt_signout"
524 |                                          Content="Sign Out"
525 |                                          Style="{StaticResource tt_style}"/>
526 | 
527 |                             </ListViewItem.ToolTip>
528 | 
529 |                         </ListViewItem>
530 |                         
531 |                         <!--// Listview items style template //-->
532 | 
533 |                         <ListView.ItemContainerStyle>
534 | 
535 |                             <Style TargetType="ListViewItem">
536 | 
537 |                                 <Setter Property="Template">
538 | 
539 |                                     <Setter.Value>
540 | 
541 |                                         <ControlTemplate TargetType="{x:Type ListViewItem}">
542 | 
543 |                                             <Border x:Name="Bd"
544 |                                                     Height="50"
545 |                                                     BorderBrush="{TemplateBinding BorderBrush}"
546 |                                                     BorderThickness="{TemplateBinding BorderThickness}"
547 |                                                     Background="{TemplateBinding Background}"
548 |                                                     Padding="{TemplateBinding Padding}"
549 |                                                     SnapsToDevicePixels="True">
550 | 
551 |                                                 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
552 |                                                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
553 |                                                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
554 | 
555 |                                             </Border>
556 | 
557 |                                             <ControlTemplate.Triggers>
558 | 
559 |                                                 <MultiTrigger>
560 | 
561 |                                                     <MultiTrigger.Conditions>
562 | 
563 |                                                         <Condition Property="IsMouseOver" Value="True"/>
564 | 
565 |                                                     </MultiTrigger.Conditions>
566 | 
567 |                                                     <Setter Property="Background"
568 |                                                             TargetName="Bd"
569 |                                                             Value="#404D5B"/>
570 | 
571 |                                                     <Setter Property="BorderBrush"
572 |                                                             TargetName="Bd"
573 |                                                             Value="#404D5B"/>
574 | 
575 |                                                 </MultiTrigger>
576 |                                                 
577 |                                             </ControlTemplate.Triggers>
578 |                                             
579 |                                         </ControlTemplate>
580 |                                         
581 |                                     </Setter.Value>
582 |                                     
583 |                                 </Setter>
584 |                                 
585 |                             </Style>
586 |                             
587 |                         </ListView.ItemContainerStyle>
588 | 
589 |                     </ListView>
590 |                     
591 |                 </StackPanel>
592 |                 
593 |                 
594 |             </Grid>
595 |             
596 |         </Grid>
597 |         
598 |     </Grid>
599 |     
600 | </Window>
601 | 


--------------------------------------------------------------------------------
/Source/MainWindow.xaml.cs:
--------------------------------------------------------------------------------
 1 | using System;
 2 | using System.Collections.Generic;
 3 | using System.Linq;
 4 | using System.Text;
 5 | using System.Threading.Tasks;
 6 | using System.Windows;
 7 | using System.Windows.Controls;
 8 | using System.Windows.Data;
 9 | using System.Windows.Documents;
10 | using System.Windows.Input;
11 | using System.Windows.Media;
12 | using System.Windows.Media.Imaging;
13 | using System.Windows.Navigation;
14 | using System.Windows.Shapes;
15 | 
16 | namespace Navigation_Drawer_App
17 | {
18 |     /// <summary>
19 |     /// Interaction logic for MainWindow.xaml
20 |     /// </summary>
21 |     public partial class MainWindow : Window
22 |     {
23 |         public MainWindow()
24 |         {
25 |             InitializeComponent();
26 |         }
27 | 
28 |         private void ListViewItem_MouseEnter(object sender, MouseEventArgs e)
29 |         {
30 |            // Set tooltip visibility
31 | 
32 |             if(Tg_Btn.IsChecked == true)
33 |             {
34 |                 tt_home.Visibility = Visibility.Collapsed;
35 |                 tt_contacts.Visibility = Visibility.Collapsed;
36 |                 tt_messages.Visibility = Visibility.Collapsed;
37 |                 tt_maps.Visibility = Visibility.Collapsed;
38 |                 tt_settings.Visibility = Visibility.Collapsed;
39 |                 tt_signout.Visibility = Visibility.Collapsed;
40 |             }
41 |             else
42 |             {
43 |                 tt_home.Visibility = Visibility.Visible;
44 |                 tt_contacts.Visibility = Visibility.Visible;
45 |                 tt_messages.Visibility = Visibility.Visible;
46 |                 tt_maps.Visibility = Visibility.Visible;
47 |                 tt_settings.Visibility = Visibility.Visible;
48 |                 tt_signout.Visibility = Visibility.Visible;
49 |             }
50 |         }
51 | 
52 |         private void Tg_Btn_Unchecked(object sender, RoutedEventArgs e)
53 |         {
54 |             img_bg.Opacity = 1;
55 |         }
56 | 
57 |         private void Tg_Btn_Checked(object sender, RoutedEventArgs e)
58 |         {
59 |             img_bg.Opacity = 0.3;
60 |         }
61 | 
62 |         private void BG_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
63 |         {
64 |             Tg_Btn.IsChecked = false;
65 |         }
66 | 
67 |         private void CloseBtn_Click(object sender, RoutedEventArgs e)
68 |         {
69 |             Close();
70 |         }
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------