[ C# Windows10 ] Use SplitView With ListView

Untuk mempermudah pengelolaan menu pada SplitView, kita dapat menggunakan control ListView. Menyambung postingan sebelumnya di https://sabitlabscode.wordpress.com/2015/10/27/c-windows10-how-to-use-splitview-control/, berikut adalah contoh code implementasi SplitView dengan menggunakan ListView.

  • Masukkan kode berikut pada MainPage.xaml anda
<Page
   x:Class="App1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App1"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
 
 <!--menyimpan resource template-->
 <Page.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">
       <StackPanel Orientation="Horizontal" Margin="2,0,0,0">
          <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Symbol}" VerticalAlignment=          "Center"/>
          <TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>
       </StackPanel>
     </DataTemplate>
  </Page.Resources>

  <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay">
     <SplitView.Pane>
        <Grid>
           <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
           Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
           <TextBlock Text="MY APPS" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticRes           ource BaseTextBlockStyle}"/>
          <!-- kode listview -->
          <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1"          VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="          True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemp          late}"/>
       </Grid>
    </SplitView.Pane>

    <Grid>
        <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="SPLITVIEW CONTENT" Margin="12,12,0,0" Style="{StaticResource BaseTex         tBlockStyle}"/>
        <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource Bo         dyTextBlockStyle}" />
    </Grid>
  </SplitView>
</Page>
  • Pada MainPage code, masukkan kode berikut :
public sealed partial class MainPage : Page
 {
    public SamplePage(Frame frame)
    {
       this.InitializeComponent();
       this.FormSplitView.Content = frame;
    }

    // definisi variabel daftar-daftar menu pada SplitView, 
    // Page1 dan Page2 adalah blank page yang telah dibuat pada postingan sebelumnya
    private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
    {
       new NavLink() { Label = "List", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Alert", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Feedback", Symbol = "" , Navigationpage=typeof(Page2) },
    };

   public ObservableCollection<NavLink> NavLinks
   {
       get { return _navLinks; }
   }

   private void HamburgerButton_Click(object sender, RoutedEventArgs args)
   {
       FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
   }

   //fungsi ketika melakukan klik pada menu
   private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
   {
      if (FormSplitView.Content != null)
         ((Frame)FormSplitView.Content).Navigate((e.ClickedItem as NavLink).Navigationpage);
   }
 }

 //model menampilkan listview pada SplitView
 public class NavLink
 {
     public string Label { get; set; }
     public string Symbol { get; set; }
     public Type Navigationpage { get; set; }
 }

Silahkan jalankan program anda, tampilan aplikasi anda akan seperti berikut :

Capture3

Selesai, happy coding..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: