Week 7: NavigationView Control Exercise

Size: px

Start display at page:

Download "Week 7: NavigationView Control Exercise"

Logan Daniel
5 years ago
Views:

1 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 ** Project name is NavigationViewSample. Set Platform to x 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.

2 XAML CODE FOR MainPage.xaml <Page x:class="navigationviewsample.mainpage" xmlns=" xmlns:x=" xmlns:local="using:navigationviewsample" xmlns:d=" xmlns:mc=" mc:ignorable="d">  <NavigationView x:name="navview" ItemInvoked="NavView_ItemInvoked" SelectionChanged="NavView_SelectionChanged" Loaded="NavView_Loaded" Canvas.ZIndex="0" Background="#FFFF9C00">  <NavigationView.MenuItems> <NavigationViewItem x:uid="homenavitem" Content="Home" Tag="home"> <NavigationViewItem.Icon>  <FontIcon Glyph=" "/> </NavigationViewItem.Icon> </NavigationViewItem> <NavigationViewItemSeparator Height="50"/> <NavigationViewItemHeader Content="Sample Major Pages"/>  <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"/>

3 <NavigationViewItemHeader Content="Sample Personal Content Pages"/> </NavigationView.MenuItems>  <NavigationView.AutoSuggestBox> <AutoSuggestBox x:name="asb" QueryIcon="Find"/> </NavigationView.AutoSuggestBox>  <NavigationView.HeaderTemplate> <DataTemplate>  <Grid Margin="24,10,0,0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition/> </Grid.ColumnDefinitions>  <TextBlock Style="StaticResource TitleTextBlockStyle" FontSize="28" VerticalAlignment="Center" Text="This is a NavigationView Sample."/>  <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>  <NavigationView.PaneFooter> <HyperlinkButton x:name="moreinfobtn" Content="SymbolIcon Enum (Segoe MDL2 Assets font)" NavigateUri=" Margin="12,0"/> </NavigationView.PaneFooter>  <Frame x:name="contentframe" Margin="24"> <Frame.ContentTransitions> <TransitionCollection> <NavigationThemeTransition/> </TransitionCollection> </Frame.ContentTransitions> </Frame> </NavigationView> </Page>

4 ================================================================================================ 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 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);

5 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=" xmlns:x=" xmlns:local="using:navigationviewsample" xmlns:d=" xmlns:mc=" mc:ignorable="d"> <Grid Background="ThemeResource ApplicationPageBackgroundThemeBrush"> <Grid.ColumnDefinitions> <ColumnDefinition Width="700" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>

6 <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 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)

7 progress1.isactive = true; progress1.visibility = Visibility.Visible; else progress1.isactive = false; progress1.visibility = Visibility.Collapsed;

Week 6: First XAML Control Exercise

BCIS 4650 Week 6: First XAML Control Exercise The controls you will use are: Blank App (Universal Windows), which contains a Grid control by default StackPanel (acts as a container for CheckBoxes and RadioButtons)