Membuat ListBox dan Menavigasikannya ke Page lain

Asslamualaikum Wr.Wb

Setelah sebelumnya aku bikin navigasi dari aplication bar ke page lain(bisa dibaca disini), Disini ListBox aku gunain sebagai menu untuk masuk ke submenu berikutnya, bisa dilihat pada gambar berikut ini :

dapat dilihat dari gambar diatas akan dinavigasikan kemana saja ListBox nya. Ada dua cara yaitu dengan menggunakan XAML untuk membuat ListBox dan navigasi nya dan menggunakan XAML untuk membuat ListBoxnya C# untuk navigasi nya
Cara Pertama, Tuliskan Koding di bawah ini di MainPage.xaml :


<ListBox Margin="-1,354,21,186" x:Name="topics" ItemsSource="{Binding News}"  Grid.Row="1">
            <ListBox>
                    <StackPanel  Orientation="Horizontal" Background="Transparent" Margin="10,10,0,0">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonDown">
                            <ec:NavigateToPageAction TargetPage="/adabDoa.xaml"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <Image VerticalAlignment="Top" Margin="12 12" CacheMode="BitmapCache" MaxWidth="100" MaxHeight="100" Stretch="UniformToFill" Source="/img/awal.png"/>
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="Adab Berdoa" TextWrapping="Wrap"  />
                        <TextBlock Text="Hal-hal yang boleh dan tidak dilakukan ketika berdoa"  Foreground="Gray" TextWrapping="Wrap" Width="258" Height="56" />
                    </StackPanel>
                </StackPanel>
            </ListBox>
        </ListBox>

 

Cara kedua, tuliskan koding dibawah ini di MainPage.xaml :

<ListBox Margin="-1,354,21,186" x:Name="topics" ItemsSource="{Binding News}" SelectionChanged="OnItemClicked" Grid.Row="1">

            <ListBox>

                    <StackPanel  Orientation="Horizontal" Background="Transparent" Margin="10,10,0,0">

                    <Image VerticalAlignment="Top" Margin="12 12" CacheMode="BitmapCache" MaxWidth="100" MaxHeight="100" Stretch="UniformToFill" Source="/img/awal.png"/>

                    <StackPanel Orientation="Vertical">

                        <TextBlock Text="Adab Berdoa" TextWrapping="Wrap"  />

                        <TextBlock Text="Hal-hal yang boleh dan tidak dilakukan ketika berdoa"  Foreground="Gray" TextWrapping="Wrap" Width="258" Height="56" />

                    </StackPanel>

                </StackPanel>

            </ListBox>

        </ListBox>

Kemudian tuliskan koding dibawah ini di MainPage.xaml.cs :

private void OnItemClicked(object sender, EventArgs e)

        {

            NavigationService.Navigate(new Uri("/adabDoa.xaml", UriKind.Relative));

        }

Perbedaan diatas terletak pada perintah untuk navigasinya, cara pertama menggunakan Interaction.Triger, caa kedua menggunakan event yang methodnya dibuat terpisah di MainPage.xaml.cs

Mudah-mudahan bermanfaat, dan tulisan ini dapat mebantu teman-teman semua.
Terimakasih.