BCIS 4650 Week 7: NavigationView Control Exercise BUILD THE UI FIRST (ALWAYS). ================================================================================================ 1. Start with a New Project > Visual C# > Windows Universal > Blank App (Universal Windows). **If you do not see these selections, then you must update your copy of VS 2017 Community at TOOLS > Extensions and Updates > Updates > Product Updates > latest posted is VS 15.5.7.** Project name is NavigationViewSample. Set Platform to x64. 2. Right-click on the project name next to the C# icon and select Add New Item to start creating each of the blank subsidiary pages: AppsPage.xaml, GamesPage, HomePage, MusicPage, MyContentPage, SettingsPage. Insert a TextBlock on each page and change its Text property to identify the page (use FontSize= 72 ). Change the Background color of the Grid as desired. 3. Carefully type the XAML code into the MainPage.xaml and the C# code-behind into MainPage.xaml.cs. 4. Carefully type the XAML code into the SettingsPage.xaml and the C# code-behind into SettingsPage.xaml.cs.
XAML CODE FOR MainPage.xaml <Page x:class="navigationviewsample.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:navigationviewsample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d"> <!--The NavigationView control divides its allocated space into three sections: a Navigation Pane on the left side, a header, and a page content area. With the proper hardware and software support, the control automatically uses the Acrylic Material Brush, which gives a partly transparent texture, and supports Reveal Highlighting of the interactive elements in your app when approached by the pointer. This NV has a background color so you can see it.--> <NavigationView x:name="navview" ItemInvoked="NavView_ItemInvoked" SelectionChanged="NavView_SelectionChanged" Loaded="NavView_Loaded" Canvas.ZIndex="0" Background="#FFFF9C00"> <!--Now populate the NavigationView Pane. The NavigationView pane can contain: 1. Navigation items, in the form of NavigationViewItem class, for navigating to specific pages 2. Separators, in the form of NavigationViewItemSeparator class, for grouping navigation items 3. Headers, in the form of NavigationViewItemHeader class, for labeling groups of items 4. An optional AutoSuggestBox class to allow for app-level search 5. An optional entry point for app settings. To hide the settings item, use the IsSettingsVisible property 6. Free-form content in the pane s footer, when added to the PaneFooter property The built-in navigation ("hamburger") button lets users open and close the pane. On larger app windows when the pane is open, you may choose to hide this button using the IsPaneToggleButtonVisible property.--> <NavigationView.MenuItems> <NavigationViewItem x:uid="homenavitem" Content="Home" Tag="home"> <NavigationViewItem.Icon> <!--XAML can use FontIcons and SymbolIcons. The FontIcon class has a Glyph property which needs a hexadecimal character code value from the default or specified FontFamily. The default font in this case is Segoe MDL2 Assets, and the code is E10F, which matches a house icon. (Open MS Word to a blank document and verify with INSERT > Symbol.) Ideally use FontIcon for symbols not found in the SymbolIcon list (not the case here in this demo)--> <FontIcon Glyph=" "/> </NavigationViewItem.Icon> </NavigationViewItem> <NavigationViewItemSeparator Height="50"/> <NavigationViewItemHeader Content="Sample Major Pages"/> <!--The NavigationViewItem class' Icon property uses the SymbolIcon enumeration, which can be identified by name.--> <NavigationViewItem x:uid="appsnavitem" Icon="AllApps" Content="Apps" Tag="apps"/> <NavigationViewItem x:uid="gamesnavitem" Icon="Video" Content="Games" Tag="games"/> <NavigationViewItem x:uid="musicnavitem" Icon="Audio" Content="Music" Tag="music"/> <NavigationViewItemSeparator Height="50"/>
<NavigationViewItemHeader Content="Sample Personal Content Pages"/> </NavigationView.MenuItems> <!--You will not need to use this in your app, but this is how to include a search box...--> <NavigationView.AutoSuggestBox> <AutoSuggestBox x:name="asb" QueryIcon="Find"/> </NavigationView.AutoSuggestBox> <!--Now design the Header--> <NavigationView.HeaderTemplate> <DataTemplate> <!--Inserting a Grid here gives us more control over the use of this space--> <Grid Margin="24,10,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <!--In the left cell, we insert a TextBlock--> <TextBlock Style="StaticResource TitleTextBlockStyle" FontSize="28" VerticalAlignment="Center" Text="This is a NavigationView Sample."/> <!--In the right cell we insert AppButtons inside a CommandBar as an example; they do nothing--> <CommandBar Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Background="ThemeResource SystemControlBackgroundAltHighBrush"> <AppBarButton Label="Refresh" Icon="Refresh"/> <AppBarButton Label="Import" Icon="Import"/> </CommandBar> </Grid> </DataTemplate> </NavigationView.HeaderTemplate> <!--This is a sample use of a hyperlink in a PaneFooter.. Note where this link appear at the bottom left of the Pane.--> <NavigationView.PaneFooter> <HyperlinkButton x:name="moreinfobtn" Content="SymbolIcon Enum (Segoe MDL2 Assets font)" NavigateUri="https://docs.microsoft.com/enus/uwp/api/windows.ui.xaml.controls.symbol" Margin="12,0"/> </NavigationView.PaneFooter> <!--Lastly, the Frame control that will hold the pages of this sample app and is used in navigation.--> <Frame x:name="contentframe" Margin="24"> <Frame.ContentTransitions> <TransitionCollection> <NavigationThemeTransition/> </TransitionCollection> </Frame.ContentTransitions> </Frame> </NavigationView> </Page>
================================================================================================ NOW WRITE THE C# LOGIC (CODE-BEHIND) IN MainPage.xaml.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?linkid=402352&clcid=0x409 namespace NavigationViewSample /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage : Page public MainPage() this.initializecomponent(); private void NavView_Loaded(object sender, RoutedEventArgs e) // You can also add Pane items in the code-behind NavView.MenuItems.Add(new NavigationViewItemSeparator()); NavView.MenuItems.Add(new NavigationViewItem() Content = "My content", Icon = new SymbolIcon(Symbol.Folder), Tag = "content" ); // set the initial SelectedItem foreach (NavigationViewItemBase item in NavView.MenuItems) if (item is NavigationViewItem && item.tag.tostring() == "apps") NavView.SelectedItem = item; private void NavView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args) if (args.issettingsinvoked) ContentFrame.Navigate(typeof(SettingsPage)); else // find NavigationViewItem with Content that equals InvokedItem var item = sender.menuitems.oftype<navigationviewitem>().first(x => (string)x.content == (string)args.invokeditem);
NavView_Navigate(item as NavigationViewItem); private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args) if (args.issettingsselected) ContentFrame.Navigate(typeof(SettingsPage)); else NavigationViewItem item = args.selecteditem as NavigationViewItem; NavView_Navigate(item); private void NavView_Navigate(NavigationViewItem item) switch (item.tag) case "home": ContentFrame.Navigate(typeof(HomePage)); case "apps": ContentFrame.Navigate(typeof(AppsPage)); case "games": ContentFrame.Navigate(typeof(GamesPage)); case "music": ContentFrame.Navigate(typeof(MusicPage)); case "content": ContentFrame.Navigate(typeof(MyContentPage)); ======================================================================================================== XAML CODE FOR SettingsPage.xaml <Page x:class="navigationviewsample.settingspage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:navigationviewsample" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d"> <Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush"> <Grid.ColumnDefinitions> <ColumnDefinition Width="700" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
<Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" HorizontalAlignment="Left" Margin="16,23,0,0" Text="This is the Settings Page." TextWrapping="Wrap" VerticalAlignment="Top" FontSize="36"/> <ToggleSwitch Grid.Row="1" Header="Toggle Switch Example" OffContent="Do work" OnContent="Working" Toggled="ToggleSwitch_Toggled" FontSize=" 36" Margin="103,250,0,0"/> <ProgressRing Grid.Row="1" Grid.Column="1" x:name="progress1" Height="72" Width="72"/> </Grid> </Page> ================================================================================================ NOW WRITE THE C# LOGIC (CODE-BEHIND) IN SettingsPage.xaml.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using System.Threading.Tasks; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation; // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?linkid=234238 namespace NavigationViewSample /// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class SettingsPage : Page public SettingsPage() this.initializecomponent(); private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e) ToggleSwitch toggleswitch = sender as ToggleSwitch; if (toggleswitch!= null) if (toggleswitch.ison == true)
progress1.isactive = true; progress1.visibility = Visibility.Visible; else progress1.isactive = false; progress1.visibility = Visibility.Collapsed;