├── App.xaml
├── Assets
    ├── img_about.png
    ├── img_acoustic.png
    ├── img_album.png
    ├── img_arrow.png
    ├── img_artist.png
    ├── img_electronic.png
    ├── img_exit.png
    ├── img_folder.png
    ├── img_genre.png
    ├── img_hiphop.png
    ├── img_history.png
    ├── img_home.png
    ├── img_hotkey.png
    ├── img_input.png
    ├── img_jazz.png
    ├── img_metal.png
    ├── img_movies.png
    ├── img_music.png
    ├── img_playlist.png
    ├── img_pop.png
    ├── img_rock.png
    ├── img_search.png
    ├── img_setting.png
    ├── img_songs.png
    ├── max_def.png
    ├── max_mo.png
    ├── shutdown_def.png
    └── shutdown_mo.png
├── Fonts
    ├── Orbitron-Medium.ttf
    └── Roboto-Light.ttf
├── LICENSE
├── MainWindow.xaml
├── MainWindow.xaml.cs
├── Navigation Menu App.rar
├── README.md
└── Templates.xaml


/App.xaml:
--------------------------------------------------------------------------------
 1 | <Application x:Class="Navigation_Menu_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_Menu_App"
 5 |              StartupUri="MainWindow.xaml">
 6 |     
 7 |     <Application.Resources>
 8 | 
 9 |         <ResourceDictionary>
10 | 
11 |             <ResourceDictionary.MergedDictionaries>
12 | 
13 |                 <ResourceDictionary Source="Templates.xaml" />
14 | 
15 |             </ResourceDictionary.MergedDictionaries>
16 | 
17 |         </ResourceDictionary>
18 | 
19 |     </Application.Resources>
20 |     
21 | </Application>
22 | 


--------------------------------------------------------------------------------
/Assets/img_about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_about.png


--------------------------------------------------------------------------------
/Assets/img_acoustic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_acoustic.png


--------------------------------------------------------------------------------
/Assets/img_album.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_album.png


--------------------------------------------------------------------------------
/Assets/img_arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_arrow.png


--------------------------------------------------------------------------------
/Assets/img_artist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_artist.png


--------------------------------------------------------------------------------
/Assets/img_electronic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_electronic.png


--------------------------------------------------------------------------------
/Assets/img_exit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_exit.png


--------------------------------------------------------------------------------
/Assets/img_folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_folder.png


--------------------------------------------------------------------------------
/Assets/img_genre.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_genre.png


--------------------------------------------------------------------------------
/Assets/img_hiphop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_hiphop.png


--------------------------------------------------------------------------------
/Assets/img_history.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_history.png


--------------------------------------------------------------------------------
/Assets/img_home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_home.png


--------------------------------------------------------------------------------
/Assets/img_hotkey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_hotkey.png


--------------------------------------------------------------------------------
/Assets/img_input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_input.png


--------------------------------------------------------------------------------
/Assets/img_jazz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_jazz.png


--------------------------------------------------------------------------------
/Assets/img_metal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_metal.png


--------------------------------------------------------------------------------
/Assets/img_movies.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_movies.png


--------------------------------------------------------------------------------
/Assets/img_music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_music.png


--------------------------------------------------------------------------------
/Assets/img_playlist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_playlist.png


--------------------------------------------------------------------------------
/Assets/img_pop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_pop.png


--------------------------------------------------------------------------------
/Assets/img_rock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_rock.png


--------------------------------------------------------------------------------
/Assets/img_search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_search.png


--------------------------------------------------------------------------------
/Assets/img_setting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_setting.png


--------------------------------------------------------------------------------
/Assets/img_songs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/img_songs.png


--------------------------------------------------------------------------------
/Assets/max_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/max_def.png


--------------------------------------------------------------------------------
/Assets/max_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/max_mo.png


--------------------------------------------------------------------------------
/Assets/shutdown_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/shutdown_def.png


--------------------------------------------------------------------------------
/Assets/shutdown_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Assets/shutdown_mo.png


--------------------------------------------------------------------------------
/Fonts/Orbitron-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Fonts/Orbitron-Medium.ttf


--------------------------------------------------------------------------------
/Fonts/Roboto-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Fonts/Roboto-Light.ttf


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 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 | 


--------------------------------------------------------------------------------
/MainWindow.xaml:
--------------------------------------------------------------------------------
  1 | <!--/// <Summary>
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created :17-03-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |     /// </Summary>-->    
  6 |     
  7 |     <Window x:Class="Navigation_Menu_App.MainWindow"
  8 |         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  9 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 10 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 11 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 12 |         xmlns:local="clr-namespace:Navigation_Menu_App"
 13 |         mc:Ignorable="d"
 14 |         Title="MainWindow"
 15 |         Height="700"
 16 |         Width="900"
 17 |         WindowStyle="None"
 18 |         AllowsTransparency="True"
 19 |         WindowStartupLocation="CenterScreen">
 20 | 
 21 |     <!--// Background Grid //-->
 22 | 
 23 |     <Grid Background="#23262B">
 24 | 
 25 |         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 26 |                    Foreground="#525965"
 27 |                    FontFamily="Fonts/#Orbitron Medium"
 28 |                    FontSize="10"
 29 |                    VerticalAlignment="Bottom"
 30 |                    HorizontalAlignment="Right"
 31 |                    Margin="0,0,15,10" />
 32 | 
 33 |         <Border Background="#D61734"
 34 |                 Height="15"
 35 |                 CornerRadius="3,0,0,3"
 36 |                 Width="5"
 37 |                 VerticalAlignment="Bottom"
 38 |                 HorizontalAlignment="Right"
 39 |                 Margin="0,0,0,8" />
 40 | 
 41 |         <!--// Menu Panel //-->
 42 | 
 43 |         <StackPanel Background="#2E333A"
 44 |                     Width="230"
 45 |                     Orientation="Vertical"
 46 |                     HorizontalAlignment="Left">
 47 | 
 48 |             <!--// Channel Name //-->
 49 | 
 50 |             <Grid Height="50"
 51 |                   VerticalAlignment="Top"
 52 |                   Margin="0,30,0,0">
 53 | 
 54 |                 <Border Background="#D61734"
 55 |                         Height="25"
 56 |                         CornerRadius="3,0,0,3"
 57 |                         Width="6"
 58 |                         VerticalAlignment="Center"
 59 |                         HorizontalAlignment="Right" />
 60 | 
 61 |                 <TextBlock Text="C #   D E S I G N   P R O"
 62 |                            Foreground="#FFFFFF"
 63 |                            FontFamily="Fonts/#Orbitron Medium"
 64 |                            FontSize="15"
 65 |                            VerticalAlignment="Center"
 66 |                            HorizontalAlignment="Center" />
 67 | 
 68 |             </Grid>
 69 | 
 70 |             <!--// Main Menu //-->
 71 | 
 72 |             <Menu Height="450"
 73 |                   Background="Transparent"
 74 |                   Margin="0,40,0,0">
 75 | 
 76 |                 <Menu.ItemsPanel>
 77 | 
 78 |                     <ItemsPanelTemplate>
 79 | 
 80 |                         <VirtualizingStackPanel Orientation="Vertical" />
 81 | 
 82 |                     </ItemsPanelTemplate>
 83 | 
 84 |                 </Menu.ItemsPanel>
 85 | 
 86 |                 <!--// Main Menu - Home //-->
 87 | 
 88 |                 <MenuItem Header="Home"
 89 |                           Template="{StaticResource Menu_Template}">
 90 | 
 91 |                     <MenuItem.Icon>
 92 | 
 93 |                         <Image Source="Assets/img_home.png"
 94 |                                Stretch="None" />
 95 | 
 96 |                     </MenuItem.Icon>
 97 | 
 98 |                 </MenuItem>
 99 | 
100 |                 <!--// Main Menu - Music //-->
101 | 
102 |                 <MenuItem Header="Music"
103 |                           Template="{StaticResource Menu_SubMenu_Template}">
104 | 
105 |                     <MenuItem.Icon>
106 | 
107 |                         <Image Source="Assets/img_music.png"
108 |                                Stretch="None" />
109 | 
110 |                     </MenuItem.Icon>
111 | 
112 |                     <!--// Music Submenu - All Songs //-->
113 | 
114 |                     <MenuItem Header="All Songs"
115 |                               Template="{StaticResource Item_Template}">
116 | 
117 |                         <MenuItem.Icon>
118 | 
119 |                             <Image Source="Assets/img_songs.png"
120 |                                    Stretch="None" />
121 | 
122 |                         </MenuItem.Icon>
123 | 
124 |                     </MenuItem>
125 | 
126 |                     <!--// Music Submenu - Albums //-->
127 | 
128 |                     <MenuItem Header="Albums"
129 |                               Template="{StaticResource Item_Template}">
130 | 
131 |                         <MenuItem.Icon>
132 | 
133 |                             <Image Source="Assets/img_album.png"
134 |                                    Stretch="None" />
135 | 
136 |                         </MenuItem.Icon>
137 | 
138 |                     </MenuItem>
139 | 
140 |                     <!--// Music Submenu - Genres //-->
141 | 
142 |                     <MenuItem Header="Genres"
143 |                               Template="{StaticResource Menu_SubMenu_Template}">
144 | 
145 |                         <MenuItem.Icon>
146 | 
147 |                             <Image Source="Assets/img_genre.png"
148 |                                    Stretch="None" />
149 | 
150 |                         </MenuItem.Icon>
151 | 
152 |                         <!--// Genres Submenu - Pop //-->
153 | 
154 |                         <MenuItem Header="Pop"
155 |                                   Template="{StaticResource Item_Template}">
156 | 
157 |                             <MenuItem.Icon>
158 | 
159 |                                 <Image Source="Assets/img_pop.png"
160 |                                        Stretch="None" />
161 | 
162 |                             </MenuItem.Icon>
163 | 
164 |                         </MenuItem>
165 | 
166 |                         <!--// Genres Submenu - Rock //-->
167 | 
168 |                         <MenuItem Header="Rock"
169 |                                   Template="{StaticResource Item_Template}">
170 | 
171 |                             <MenuItem.Icon>
172 | 
173 |                                 <Image Source="Assets/img_rock.png"
174 |                                        Stretch="None" />
175 | 
176 |                             </MenuItem.Icon>
177 | 
178 |                         </MenuItem>
179 | 
180 |                         <!--// Genres Submenu - Metal //-->
181 | 
182 |                         <MenuItem Header="Metal"
183 |                                   Template="{StaticResource Item_Template}">
184 | 
185 |                             <MenuItem.Icon>
186 | 
187 |                                 <Image Source="Assets/img_metal.png"
188 |                                        Stretch="None" />
189 | 
190 |                             </MenuItem.Icon>
191 | 
192 |                         </MenuItem>
193 | 
194 |                         <!--// Genres Submenu - Acoustic //-->
195 | 
196 |                         <MenuItem Header="Acoustic"
197 |                                   Template="{StaticResource Item_Template}">
198 | 
199 |                             <MenuItem.Icon>
200 | 
201 |                                 <Image Source="Assets/img_acoustic.png"
202 |                                        Stretch="None" />
203 | 
204 |                             </MenuItem.Icon>
205 | 
206 |                         </MenuItem>
207 | 
208 |                         <!--// Genres Submenu - Hip Hop //-->
209 | 
210 |                         <MenuItem Header="Hip Hop"
211 |                                   Template="{StaticResource Item_Template}">
212 | 
213 |                             <MenuItem.Icon>
214 | 
215 |                                 <Image Source="Assets/img_hiphop.png"
216 |                                        Stretch="None" />
217 | 
218 |                             </MenuItem.Icon>
219 | 
220 |                         </MenuItem>
221 | 
222 |                         <!--// Genres Submenu - Electronic //-->
223 | 
224 |                         <MenuItem Header="Electronic"
225 |                                   Template="{StaticResource Item_Template}">
226 | 
227 |                             <MenuItem.Icon>
228 | 
229 |                                 <Image Source="Assets/img_electronic.png"
230 |                                        Stretch="None" />
231 | 
232 |                             </MenuItem.Icon>
233 | 
234 |                         </MenuItem>
235 | 
236 |                         <!--// Genres Submenu - Jazz //-->
237 | 
238 |                         <MenuItem Header="Jazz"
239 |                                   Template="{StaticResource Item_Template}">
240 | 
241 |                             <MenuItem.Icon>
242 | 
243 |                                 <Image Source="Assets/img_jazz.png"
244 |                                        Stretch="None" />
245 | 
246 |                             </MenuItem.Icon>
247 | 
248 |                         </MenuItem>
249 | 
250 |                     </MenuItem>
251 | 
252 |                     <!--// Music Submenu - Artists //-->
253 | 
254 |                     <MenuItem Header="Artists"
255 |                               Template="{StaticResource Item_Template}">
256 | 
257 |                         <MenuItem.Icon>
258 | 
259 |                             <Image Source="Assets/img_artist.png"
260 |                                    Stretch="None" />
261 | 
262 |                         </MenuItem.Icon>
263 | 
264 |                     </MenuItem>
265 | 
266 |                     <!--// Music Submenu - Playlists //-->
267 | 
268 |                     <MenuItem Header="Playlists"
269 |                               Template="{StaticResource Item_Template}">
270 | 
271 |                         <MenuItem.Icon>
272 | 
273 |                             <Image Source="Assets/img_playlist.png"
274 |                                    Stretch="None" />
275 | 
276 |                         </MenuItem.Icon>
277 | 
278 |                     </MenuItem>
279 | 
280 |                 </MenuItem>
281 | 
282 |                 <!--// Main Menu - Movies //-->
283 | 
284 |                 <MenuItem Header="Movies"
285 |                           Template="{StaticResource Menu_Template}">
286 | 
287 |                     <MenuItem.Icon>
288 | 
289 |                         <Image Source="Assets/img_movies.png"
290 |                                Stretch="None" />
291 | 
292 |                     </MenuItem.Icon>
293 | 
294 |                 </MenuItem>
295 | 
296 |                 <!--// Main Menu - Search //-->
297 | 
298 |                 <MenuItem Header="Search"
299 |                           Template="{StaticResource Menu_Template}">
300 | 
301 |                     <MenuItem.Icon>
302 | 
303 |                         <Image Source="Assets/img_search.png"
304 |                                Stretch="None" />
305 | 
306 |                     </MenuItem.Icon>
307 | 
308 |                 </MenuItem>
309 | 
310 |                 <!--// Main Menu - Folders //-->
311 | 
312 |                 <MenuItem Header="Folders"
313 |                           Template="{StaticResource Menu_Template}">
314 | 
315 |                     <MenuItem.Icon>
316 | 
317 |                         <Image Source="Assets/img_folder.png"
318 |                                Stretch="None" />
319 | 
320 |                     </MenuItem.Icon>
321 | 
322 |                 </MenuItem>
323 | 
324 |                 <!--// Main Menu - History //-->
325 | 
326 |                 <MenuItem Header="History"
327 |                           Template="{StaticResource Menu_Template}">
328 | 
329 |                     <MenuItem.Icon>
330 | 
331 |                         <Image Source="Assets/img_history.png"
332 |                                Stretch="None" />
333 | 
334 |                     </MenuItem.Icon>
335 | 
336 |                 </MenuItem>
337 | 
338 |                 <!--// Main Menu - Settings //-->
339 | 
340 |                 <MenuItem Header="Settings"
341 |                           Template="{StaticResource Menu_SubMenu_Template}">
342 | 
343 |                     <MenuItem.Icon>
344 | 
345 |                         <Image Source="Assets/img_setting.png"
346 |                                Stretch="None" />
347 | 
348 |                     </MenuItem.Icon>
349 | 
350 |                     <!--// Settings Submenu - Input / Codecs //-->
351 | 
352 |                     <MenuItem Header="Input / Codecs"
353 |                               Template="{StaticResource Item_Template}">
354 | 
355 |                         <MenuItem.Icon>
356 | 
357 |                             <Image Source="Assets/img_input.png"
358 |                                    Stretch="None" />
359 | 
360 |                         </MenuItem.Icon>
361 | 
362 |                     </MenuItem>
363 | 
364 |                     <!--// Settings Submenu - Hotkeys //-->
365 | 
366 |                     <MenuItem Header="Hotkeys"
367 |                               Template="{StaticResource Item_Template}">
368 | 
369 |                         <MenuItem.Icon>
370 | 
371 |                             <Image Source="Assets/img_hotkey.png"
372 |                                    Stretch="None" />
373 | 
374 |                         </MenuItem.Icon>
375 | 
376 |                     </MenuItem>
377 | 
378 |                 </MenuItem>
379 | 
380 |                 <!--// Main Menu - About //-->
381 | 
382 |                 <MenuItem Header="About"
383 |                           Template="{StaticResource Menu_Template}">
384 | 
385 |                     <MenuItem.Icon>
386 | 
387 |                         <Image Source="Assets/img_about.png"
388 |                                Stretch="None" />
389 | 
390 |                     </MenuItem.Icon>
391 | 
392 |                 </MenuItem>
393 | 
394 |                 <!--// Main Menu - Exit //-->
395 | 
396 |                 <MenuItem Header="Exit"
397 |                           Template="{StaticResource Menu_Template}">
398 | 
399 |                     <MenuItem.Icon>
400 | 
401 |                         <Image Source="Assets/img_exit.png"
402 |                                Stretch="None" />
403 | 
404 |                     </MenuItem.Icon>
405 | 
406 |                 </MenuItem>
407 | 
408 |             </Menu>
409 | 
410 |         </StackPanel>
411 | 
412 |         <!--// Maximize / Minimize App //-->
413 | 
414 |         <Button x:Name="MaxBtn"
415 |                 Style="{StaticResource MaxBtnStyle}"
416 |                 Click="MaxBtn_Click" />
417 | 
418 |         <!--// Close App //-->
419 | 
420 |         <Button x:Name="CloseBtn"
421 |                 Style="{StaticResource CloseBtnStyle}"
422 |                 Click="CloseBtn_Click" />
423 | 
424 |     </Grid>
425 | 
426 | </Window>
427 | 


--------------------------------------------------------------------------------
/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_Menu_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 MaxBtn_Click(object sender, RoutedEventArgs e)
29 |         {
30 |             if (WindowState == WindowState.Normal)
31 |             {
32 |                 WindowState = WindowState.Maximized;
33 |             }
34 |             else
35 |             {
36 |                 if (WindowState == WindowState.Maximized)
37 |                 {
38 |                     WindowState = WindowState.Normal;
39 |                 }
40 |             }
41 |         }
42 | 
43 |         private void CloseBtn_Click(object sender, RoutedEventArgs e)
44 |         {
45 |             Close();
46 |         }
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/Navigation Menu App.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Navigation-Menu-With-Sub-Menu/3275eec4dfb60f9a2fb2881568495100a96c016e/Navigation Menu App.rar


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WPF - Navigation Menu With Sub Menu
 2 | 
 3 | 
 4 | YouTube Video Tutorial Link : https://youtu.be/E5NB9crfQZs
 5 | 
 6 | ![Thumbnail_New](https://user-images.githubusercontent.com/55704859/158864107-052e36ce-3032-428d-ae0c-da32407e7125.png)
 7 | 
 8 | Icon Credits : https://icons8.com/icons
 9 | 
10 | <b>GitHub Account</b> : https://github.com/CSharpDesignPro
11 | 


--------------------------------------------------------------------------------
/Templates.xaml:
--------------------------------------------------------------------------------
  1 | <!--/// <Summary>
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created : 17-03-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |     /// </Summary>-->
  6 |     
  7 |     <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  8 |                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  9 | 
 10 |     <!--// Menu with SubMenu Template //-->
 11 | 
 12 |     <ControlTemplate x:Key="Menu_SubMenu_Template"
 13 |                      TargetType="{x:Type MenuItem}">
 14 | 
 15 |         <Border x:Name="border"
 16 |                 Background="#2E333A"
 17 |                 BorderBrush="#2E333A"
 18 |                 BorderThickness="0"
 19 |                 Height="50"
 20 |                 Width="230">
 21 | 
 22 |             <Grid>
 23 | 
 24 |                 <Grid.ColumnDefinitions>
 25 |                     <ColumnDefinition MinWidth="22"
 26 |                                       Width="Auto" />
 27 |                     <ColumnDefinition Width="13" />
 28 |                     <ColumnDefinition Width="*" />
 29 |                     <ColumnDefinition Width="30" />
 30 |                     <ColumnDefinition Width="Auto" />
 31 |                     <ColumnDefinition Width="20" />
 32 |                 </Grid.ColumnDefinitions>
 33 | 
 34 |                 <!--// Icon //-->
 35 | 
 36 |                 <ContentPresenter x:Name="Icon"
 37 |                                   ContentSource="Icon"
 38 |                                   HorizontalAlignment="Left"
 39 |                                   Height="35"
 40 |                                   Width="35"
 41 |                                   Margin="10,0,0,0"
 42 |                                   VerticalAlignment="Center" />
 43 | 
 44 |                 <!--// Menu Text //-->
 45 | 
 46 |                 <ContentPresenter ContentSource="Header"
 47 |                                   Grid.Column="2"
 48 |                                   TextBlock.Foreground="White"
 49 |                                   TextBlock.FontFamily="Fonts/#Roboto Light"
 50 |                                   TextBlock.FontSize="20"
 51 |                                   HorizontalAlignment="Left"
 52 |                                   RecognizesAccessKey="True"
 53 |                                   Margin="3,0,0,0"
 54 |                                   VerticalAlignment="Center" />
 55 | 
 56 |                 <!--// Right Arrow Icon //-->
 57 | 
 58 |                 <Image Source="Assets/img_arrow.png"
 59 |                        Stretch="None"
 60 |                        Grid.Column="4"
 61 |                        HorizontalAlignment="Left"
 62 |                        VerticalAlignment="Center" />
 63 | 
 64 |                 <!--// Popup //-->
 65 | 
 66 |                 <Popup x:Name="PART_Popup"
 67 |                        AllowsTransparency="true"
 68 |                        Focusable="false"
 69 |                        HorizontalOffset="-2"
 70 |                        IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
 71 |                        Placement="Right"
 72 |                        PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
 73 |                        VerticalOffset="0">
 74 | 
 75 |                     <Border x:Name="SubMenuBorder"
 76 |                             Background="#2E333A"
 77 |                             BorderBrush="#2E333A">
 78 | 
 79 |                         <ScrollViewer x:Name="SubMenuScrollViewer"
 80 |                                       Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
 81 | 
 82 |                             <Grid RenderOptions.ClearTypeHint="Enabled">
 83 | 
 84 |                                 <Canvas HorizontalAlignment="Left"
 85 |                                         VerticalAlignment="Top" />
 86 | 
 87 |                                 <ItemsPresenter x:Name="ItemsPresenter"
 88 |                                                 KeyboardNavigation.DirectionalNavigation="Cycle"
 89 |                                                 Grid.IsSharedSizeScope="true"
 90 |                                                 KeyboardNavigation.TabNavigation="Cycle" />
 91 |                             </Grid>
 92 |                         </ScrollViewer>
 93 |                     </Border>
 94 |                 </Popup>
 95 | 
 96 |             </Grid>
 97 |         </Border>
 98 | 
 99 | 
100 |         <ControlTemplate.Triggers>
101 | 
102 |             <Trigger Property="IsSuspendingPopupAnimation"
103 |                      Value="true">
104 |                 <Setter Property="PopupAnimation"
105 |                         TargetName="PART_Popup"
106 |                         Value="None" />
107 |             </Trigger>
108 | 
109 |             <Trigger Property="Icon"
110 |                      Value="{x:Null}">
111 |                 <Setter Property="Visibility"
112 |                         TargetName="Icon"
113 |                         Value="Visible" />
114 |             </Trigger>
115 | 
116 |             <Trigger Property="IsChecked"
117 |                      Value="True">
118 |                 <Setter Property="Visibility"
119 |                         TargetName="Icon"
120 |                         Value="Visible" />
121 |             </Trigger>
122 | 
123 |             <Trigger Property="IsHighlighted"
124 |                      Value="True">
125 |                 <Setter Property="Background"
126 |                         TargetName="border"
127 |                         Value="#404D5B" />
128 |                 <Setter Property="BorderBrush"
129 |                         TargetName="border"
130 |                         Value="#404D5B" />
131 |             </Trigger>
132 | 
133 |         </ControlTemplate.Triggers>
134 |     </ControlTemplate>
135 | 
136 |     <!--// Main Menu Template //-->
137 | 
138 |     <ControlTemplate x:Key="Menu_Template"
139 |                      TargetType="{x:Type MenuItem}">
140 | 
141 |         <Border x:Name="border"
142 |                 Background="#2E333A"
143 |                 BorderBrush="#2E333A"
144 |                 BorderThickness="0"
145 |                 Height="50"
146 |                 Width="230"
147 |                 >
148 | 
149 |             <Grid>
150 | 
151 |                 <Grid.ColumnDefinitions>
152 |                     <ColumnDefinition MinWidth="22"
153 |                                       Width="Auto" />
154 |                     <ColumnDefinition Width="13" />
155 |                     <ColumnDefinition Width="*" />
156 |                     <ColumnDefinition Width="30" />
157 |                     <ColumnDefinition Width="Auto" />
158 |                     <ColumnDefinition Width="20" />
159 |                 </Grid.ColumnDefinitions>
160 | 
161 |                 <!--// Icon //-->
162 | 
163 |                 <ContentPresenter x:Name="Icon"
164 |                                   ContentSource="Icon"
165 |                                   HorizontalAlignment="Left"
166 |                                   Height="35"
167 |                                   Width="35"
168 |                                   Margin="10,0,0,0"
169 |                                   VerticalAlignment="Center" />
170 | 
171 |                 <!--// Menu Text //-->
172 | 
173 |                 <ContentPresenter ContentSource="Header"
174 |                                   Grid.Column="2"
175 |                                   TextBlock.Foreground="#FFFFFF"
176 |                                   TextBlock.FontFamily="Fonts/#Roboto Light"
177 |                                   TextBlock.FontSize="20"
178 |                                   HorizontalAlignment="Left"
179 |                                   RecognizesAccessKey="True"
180 |                                   Margin="3,0,0,0"
181 |                                   VerticalAlignment="Center" />
182 | 
183 |             </Grid>
184 |         </Border>
185 | 
186 | 
187 |         <ControlTemplate.Triggers>
188 | 
189 |             <Trigger Property="Icon"
190 |                      Value="{x:Null}">
191 |                 <Setter Property="Visibility"
192 |                         TargetName="Icon"
193 |                         Value="Visible" />
194 |             </Trigger>
195 | 
196 |             <Trigger Property="IsChecked"
197 |                      Value="True">
198 |                 <Setter Property="Visibility"
199 |                         TargetName="Icon"
200 |                         Value="Visible" />
201 |             </Trigger>
202 | 
203 |             <Trigger Property="IsHighlighted"
204 |                      Value="True">
205 |                 <Setter Property="Background"
206 |                         TargetName="border"
207 |                         Value="#404D5B" />
208 |                 <Setter Property="BorderBrush"
209 |                         TargetName="border"
210 |                         Value="#404D5B" />
211 |             </Trigger>
212 | 
213 | 
214 |         </ControlTemplate.Triggers>
215 |     </ControlTemplate>
216 | 
217 |     <!--// Menu Item Template //-->
218 | 
219 |     <ControlTemplate x:Key="Item_Template"
220 |                      TargetType="{x:Type MenuItem}">
221 | 
222 |         <Border x:Name="border"
223 |                 Background="#2E333A"
224 |                 BorderBrush="#2E333A"
225 |                 BorderThickness="{TemplateBinding BorderThickness}"
226 |                 Height="50"
227 |                 Width="230"
228 |                >
229 | 
230 |             <Grid>
231 | 
232 |                 <Grid.ColumnDefinitions>
233 |                     <ColumnDefinition MinWidth="22"
234 |                                       Width="Auto" />
235 |                     <ColumnDefinition Width="13" />
236 |                     <ColumnDefinition Width="*" />
237 |                     <ColumnDefinition Width="30" />
238 |                     <ColumnDefinition Width="Auto" />
239 |                     <ColumnDefinition Width="20" />
240 |                 </Grid.ColumnDefinitions>
241 | 
242 |                 <!--// Icon //-->
243 | 
244 |                 <ContentPresenter x:Name="Icon"
245 |                                   ContentSource="Icon"
246 |                                   HorizontalAlignment="Center"
247 |                                   Height="35"
248 |                                   Width="35"
249 |                                   Margin="10,0,0,0"
250 |                                   VerticalAlignment="Center" />
251 | 
252 |                 <!--// Menu Text //-->
253 | 
254 |                 <ContentPresenter ContentSource="Header"
255 |                                   Grid.Column="2"
256 |                                   TextBlock.Foreground="White"
257 |                                   TextBlock.FontFamily="Fonts/#Roboto Light"
258 |                                   TextBlock.FontSize="20"
259 |                                   HorizontalAlignment="Left"
260 |                                   RecognizesAccessKey="True"
261 |                                   Margin="3,0,0,0"
262 |                                   VerticalAlignment="Center" />
263 | 
264 | 
265 |             </Grid>
266 |         </Border>
267 | 
268 | 
269 |         <ControlTemplate.Triggers>
270 | 
271 |             <Trigger Property="Icon"
272 |                      Value="{x:Null}">
273 |                 <Setter Property="Visibility"
274 |                         TargetName="Icon"
275 |                         Value="Visible" />
276 |             </Trigger>
277 | 
278 |             <Trigger Property="IsChecked"
279 |                      Value="True">
280 |                 <Setter Property="Visibility"
281 |                         TargetName="Icon"
282 |                         Value="Visible" />
283 |             </Trigger>
284 | 
285 |             <Trigger Property="IsHighlighted"
286 |                      Value="True">
287 |                 <Setter Property="Background"
288 |                         TargetName="border"
289 |                         Value="#404D5B" />
290 |                 <Setter Property="BorderBrush"
291 |                         TargetName="border"
292 |                         Value="#404D5B" />
293 |             </Trigger>
294 | 
295 |         </ControlTemplate.Triggers>
296 |     </ControlTemplate>
297 | 
298 | 
299 |     <!--// Maximize / Minimize App Button Style //-->
300 | 
301 |     <ImageBrush x:Key="max_def"
302 |                 ImageSource="Assets/max_def.png"
303 |                 Stretch="None" />
304 | 
305 |     <ImageBrush x:Key="max_mo"
306 |                 ImageSource="Assets/max_mo.png"
307 |                 Stretch="None" />
308 | 
309 |     <Style x:Key="MaxBtnStyle"
310 |            TargetType="{x:Type Button}">
311 | 
312 |         <Setter Property="Height"
313 |                 Value="35" />
314 |         <Setter Property="Width"
315 |                 Value="35" />
316 |         <Setter Property="HorizontalAlignment"
317 |                 Value="Right" />
318 |         <Setter Property="VerticalAlignment"
319 |                 Value="Top" />
320 |         <Setter Property="Margin"
321 |                 Value="0,20,60,0" />
322 | 
323 |         <Setter Property="Template">
324 | 
325 |             <Setter.Value>
326 | 
327 |                 <ControlTemplate TargetType="{x:Type Button}">
328 | 
329 |                     <Border x:Name="border"
330 |                             BorderThickness="0"
331 |                             Background="{StaticResource max_def}" />
332 | 
333 |                     <ControlTemplate.Triggers>
334 | 
335 |                         <Trigger Property="IsMouseOver"
336 |                                  Value="True">
337 | 
338 |                             <Setter Property="Background"
339 |                                     TargetName="border"
340 |                                     Value="{StaticResource max_mo}" />
341 | 
342 |                         </Trigger>
343 | 
344 |                         <Trigger Property="IsPressed"
345 |                                  Value="True">
346 | 
347 |                             <Setter Property="Background"
348 |                                     TargetName="border"
349 |                                     Value="{StaticResource max_mo}" />
350 | 
351 |                         </Trigger>
352 | 
353 |                     </ControlTemplate.Triggers>
354 | 
355 |                 </ControlTemplate>
356 | 
357 |             </Setter.Value>
358 | 
359 |         </Setter>
360 | 
361 | 
362 |     </Style>
363 | 
364 | 
365 |     <!--// Close App Button Style //-->
366 | 
367 |     <ImageBrush x:Key="close_def"
368 |                 ImageSource="Assets/shutdown_def.png"
369 |                 Stretch="None" />
370 | 
371 |     <ImageBrush x:Key="close_mo"
372 |                 ImageSource="Assets/shutdown_mo.png"
373 |                 Stretch="None" />
374 | 
375 |     <Style x:Key="CloseBtnStyle"
376 |            TargetType="{x:Type Button}">
377 | 
378 |         <Setter Property="Height"
379 |                 Value="35" />
380 |         <Setter Property="Width"
381 |                 Value="35" />
382 |         <Setter Property="HorizontalAlignment"
383 |                 Value="Right" />
384 |         <Setter Property="VerticalAlignment"
385 |                 Value="Top" />
386 |         <Setter Property="Margin"
387 |                 Value="0,20,18,0" />
388 | 
389 |         <Setter Property="Template">
390 | 
391 |             <Setter.Value>
392 | 
393 |                 <ControlTemplate TargetType="{x:Type Button}">
394 | 
395 |                     <Border x:Name="border"
396 |                             BorderThickness="0"
397 |                             Background="{StaticResource close_def}" />
398 | 
399 |                     <ControlTemplate.Triggers>
400 | 
401 |                         <Trigger Property="IsMouseOver"
402 |                                  Value="True">
403 | 
404 |                             <Setter Property="Background"
405 |                                     TargetName="border"
406 |                                     Value="{StaticResource close_mo}" />
407 | 
408 |                         </Trigger>
409 | 
410 |                         <Trigger Property="IsPressed"
411 |                                  Value="True">
412 | 
413 |                             <Setter Property="Background"
414 |                                     TargetName="border"
415 |                                     Value="{StaticResource close_mo}" />
416 | 
417 |                         </Trigger>
418 | 
419 |                     </ControlTemplate.Triggers>
420 | 
421 |                 </ControlTemplate>
422 | 
423 |             </Setter.Value>
424 | 
425 |         </Setter>
426 | 
427 | 
428 |     </Style>
429 | 
430 | 
431 | </ResourceDictionary>


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