title: How to navigate to another page when listbox item is clicked.
body: <p>I am stuck in this particular problem. Please help. Basically, each item has unique ID, I want the item to navigate to different place when clicked. I tried to set the pagepath to the Archive.xaml, but it doesn't work. </p>
  
  <p><strong>MainPage.Xaml</strong></p>
  
  <pre><code>&lt;Page
  x:Class="SkinScanner.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:SkinScanner"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  
  Loaded="Page_Loaded"
  xmlns:data="using:SkinScanner.Model"
  mc:Ignorable="d"&gt;
  
  &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;VisualStateManager.VisualStateGroups&gt;
          &lt;VisualStateGroup&gt;
              &lt;VisualState x:Name="NarrowLayout"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;AdaptiveTrigger MinWindowWidth="0" /&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="MyAutoSuggestBox.Visibility" Value="Collapsed" /&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
              &lt;VisualState x:Name="WideLayout"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;AdaptiveTrigger MinWindowWidth="400" /&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="MyAutoSuggestBox.Visibility" Value="Visible" /&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
  
      &lt;RelativePanel&gt;
          &lt;Button Name="HamburgerButton" 
                  RelativePanel.AlignLeftWithPanel="True"
                  FontFamily="Segoe MDL2 Assets" 
                  Content="&amp;#xE700;"
                  FontSize="20"
                  Width="45"
                  Height="45"
                  HorizontalAlignment="Center"
                  Click="HamburgerButton_Click"
                  /&gt;
  
          &lt;TextBlock Name="TitleTextBlock" 
                     RelativePanel.RightOf="HamburgerButton"
                     FontSize="18"
                     FontWeight="Bold"
                     Margin="20,10,0,0" /&gt;
  
          &lt;AutoSuggestBox Name="MyAutoSuggestBox"
                          QueryIcon="Find" 
                          PlaceholderText="Search" 
                          RelativePanel.AlignRightWithPanel="True"
                          Width="200"
                          Margin="0,5,10,0" /&gt;
      &lt;/RelativePanel&gt;
  
      &lt;SplitView Name="MySplitView" 
                 Grid.Row="1" 
                 DisplayMode="CompactOverlay" 
                 OpenPaneLength="150" 
                 CompactPaneLength="45" &gt;
          &lt;SplitView.Pane&gt;
              &lt;ListBox SelectionMode="Single" 
                       SelectionChanged="ListBox_SelectionChanged"&gt;
                  &lt;ListBoxItem Name="Home"&gt;
                      &lt;StackPanel Orientation="Horizontal"&gt;
                          &lt;TextBlock 
                              Text="&amp;#xE80F;"
                              FontFamily="Segoe MDL2 Assets" 
                              FontSize="20" /&gt;
                          &lt;TextBlock Text="Home" 
                                     FontSize="18" 
                                     Margin="20,0,0,0" /&gt;
                      &lt;/StackPanel&gt;
                  &lt;/ListBoxItem&gt;
                  &lt;ListBoxItem Name="About"&gt;
                      &lt;StackPanel Orientation="Horizontal"&gt;
                          &lt;TextBlock 
                              Text="&amp;#xE1CE;"
                              FontFamily="Segoe MDL2 Assets" 
                              FontSize="20" /&gt;
                          &lt;TextBlock Text="About" 
                                     FontSize="18" 
                                     Margin="20,0,0,0" /&gt;
                      &lt;/StackPanel&gt;
                  &lt;/ListBoxItem&gt;
              &lt;/ListBox&gt;
          &lt;/SplitView.Pane&gt;
          &lt;SplitView.Content&gt;
              &lt;GridView Name="SkinItemGrid"
                        Background="LightGray"
                        ItemsSource="{x:Bind SkinItems}"
                        HorizontalAlignment="Stretch"
                        IsItemClickEnabled="True"                      
                        Margin="10,0,0,0"&gt;
                  &lt;GridView.ItemTemplate&gt;
                      &lt;DataTemplate x:DataType="data:SkinItem"&gt;
                          &lt;local:SkinItemControl /&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/GridView.ItemTemplate&gt;
              &lt;/GridView&gt;
          &lt;/SplitView.Content&gt;
      &lt;/SplitView&gt;
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>MainPage.cs</strong></p>
  
  <pre><code>public sealed partial class MainPage : Page
  {
      private ObservableCollection&lt;SkinItem&gt; SkinItems;
  
      public MainPage()
      {
          this.InitializeComponent();
          SkinItems = new ObservableCollection&lt;SkinItem&gt;();
      }
  
      private void HamburgerButton_Click(object sender, RoutedEventArgs e)
      {
          MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
      }
  
      private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
      {
          if (Home.IsSelected)
          {
              SkinsManager.GetSkins("Home", SkinItems);
              TitleTextBlock.Text = "Home";
          }
          else if (About.IsSelected)
          {
              SkinsManager.GetSkins("About", SkinItems);
              TitleTextBlock.Text = "About";
          }
      }
  
      private void Page_Loaded(object sender, RoutedEventArgs e)
      {
          Home.IsSelected = true;
      }
  
  
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>SkinItem Class</strong></p>
  
  <pre><code>public class SkinsManager
  {
      public static void GetSkins(string category, ObservableCollection&lt;SkinItem&gt; skinItems)
      {
          var allItems = getSkinItems();
  
          var filteredNewsItems = allItems.Where(p =&gt; p.Category == category).ToList();
  
          skinItems.Clear();
  
          filteredNewsItems.ForEach(p =&gt; skinItems.Add(p));
      }
  
      private static List&lt;SkinItem&gt; getSkinItems()
      {
          var items = new List&lt;SkinItem&gt;();
  
          items.Add(new SkinItem() { Id = 1, Category = "Home", Headline = "Diagnosis", Subhead = "", DateLine = "", Image = "Assets/Diagnosis.jpg" });
          items.Add(new SkinItem() { Id = 2, Category = "Home", Headline = "Archive",   Subhead = "", DateLine = "", Image = "Assets/Archive.png", pagePath = "Archive.xaml" });
  
          items.Add(new SkinItem() { Id = 3, Category = "About", Headline = "VKSE", Subhead = "", DateLine = "", Image = "Assets/About.jpg" });
  
          return items;
      }
  
  }
  </code></pre>
  
  <p>}</p>