[ C# Windows10 ] How To Use SplitView Control

Setelah sekian lama tidak buka blog dan menulis tutorial programming, akhirnya hari ini mulai bergairah kembali untuk menghidupkan blog ini. Adalah hadirnya windows10 dengan Visual Studio 2015-nya yang menarik perhatian saya untuk explore fitur-fitur terbarunya sekaligus posting pengalaman dan ilmu selama mempelajarinya.

Seperti diketahui Microsoft telah meluncurkan OS windows10 baik untuk PC, laptop, mobile, surface dan device lainnya yang menggunkan OS berbasis Windows. Melihat OS windows10 yang dapat diimplementasikan di berbagai jenis device, hal ini mengindikasikan bahwa Microsoft berharap adanya keseragaman dan memudahkan pengguna dalam menggunakan device yang berbeda-beda. Sekaligus berharap meningkatkan market sih🙂 . Usaha ini juga dilanjutkan microsoft di level developer aplikasi/software ketika meluncurkan Visual Studio 2015. Dimana microsoft memperkenalkan UWP (Universal Windows Platform) yang pada intinya Microsoft memungkinkan developer mengembangkan aplikasi universal yang dapat diimplementasikan pada PC, laptop, surface, mobile, dll..

Baiklah, penjelasan diatas adalah mukadimah dari tutorial yang akan saya paparkan. Sebelumnya saya beritahukan bahwa pengembangan aplikasi UWP hanya dapat dilakukan pada OS Windows 10 dengan IDE Visual Studio 2015.

Kali ini saya akan memaparkan cara penggunaan SplitView pada C#. Tampilan akhir dari aplikasi ini adalah seperti berikut :

Capture

Terdapat panel menu di sebelah kiri dan panel content di sebelah kanan. Jika tombol pada panel sebelah kiri di klik, maka halaman konten yang ada di sebelah kanan juga akan berubah.

Capture2

Contoh ketika melakukan klik tombol lain, maka panel sebelah kiri berubah.

Capture3

Apabila tombol menu paling atas di klik, maka panel menu akan melebar dan menampilkan text dari masing-masing menu.

Baiklah berikut adalah tahap-tahap pembuatan aplikasi di atas :

  • Silahkan buat aplikasi baru pada VS2015 dan pilih universal apps.
  • Secara default ketika dijalankan project anda akan menampilkan halaman MainPage.xaml. Di halaman ini juga kita akan meletakkan code SplitView, masukkan kode berikut pada MainPage.xaml :
<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">
 <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
 CompactPaneLength="50" OpenPaneLength="150">
   <SplitView.Pane>
     <StackPanel Background="Gray">
        <Button x:Name="ButtonOpen" FontFamily="Segoe MDL2 Assets" Content=""
         Width="50" Height="50" Background="Transparent" Click="ButtonOpen_Click"/>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="î Ą"
            Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
           <TextBlock Text="Page 1" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content="î„Ź"
            Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click" />
           <TextBlock Text="Page 2" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
     </StackPanel>
   </SplitView.Pane>
 <SplitView.Content>
    <Grid>
       <Frame x:Name="SplitContent">
       </Frame>
    </Grid>
  </SplitView.Content>
 </SplitView>
</Page>
  • Pada code di atas, terdapat tiga buah event yaitu event ketika ButtonOpen, MenuButton1 dan MenuButton2 di klik. Kita akan memaasukkan code untuk menjalankan ketiga event tersebut.
  • Pada Solution klik kanan pada “MainPage.xaml” lalu klik kanan dan pilih “View Code”.
  • Masukkan code berikut :
private void ButtonOpen_Click(object sender, RoutedEventArgs args)
 {
   FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
 }

 private void MenuButton1_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page1));
 }

 private void MenuButton2_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page2));
 }
  • Pada solution, tambahkan dua buah “Blank Page” dan beri nama Page1.xaml dan Page2.xaml.
  • Pada Page1.xaml design, masukkan kode xaml berikut :
<Page
 x:Class="App1.Page1"
 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">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 1" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Sedangkan pada Page2.xaml, masukkan kode berikut :

<Page
 x:Class="App1.Page2"
 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" FontSize="28.333">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 2" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Dua kode di atas adalah kode yang digunakan untuk melakukan pengaturan tampilan pada halaman 1 dan halaman 2. Silahkan lakukan pengaturan sesuai keinginan anda jika perlu.

  • Pada solution, pilih “App.xaml” klik kanan pilih “View Code”. Masukkan code berikut pada “OnLaunched”
protected override void OnLaunched(LaunchActivatedEventArgs e)
 {

   #if DEBUG
   if (System.Diagnostics.Debugger.IsAttached)
   {
      this.DebugSettings.EnableFrameRateCounter = true;
   }
   #endif

   Frame rootFrame = Window.Current.Content as Frame;

   if (rootFrame == null)
   {
      rootFrame = new Frame();
      rootFrame.NavigationFailed += OnNavigationFailed;

     if (e.PreviousExecutionState == ApplicationExecutionState.Terminated){}

     Window.Current.Content = new SamplePage(rootFrame); //rootFrame;
   }
   Window.Current.Activate();
 }
  • View Code pada MainPage.axml, dan masukkan code berikut pada constructor nya :
 public SamplePage(Frame frame)
 {
    this.InitializeComponent();
    this.FormSplitView.Content = frame;
 }

Selesai, silahkan jalankan program anda.. Happy coding..🙂

One Response to [ C# Windows10 ] How To Use SplitView Control

  1. Thank you very much! I used this tutorial on a homework for school and it worked like a charm…and I don’t even speak your language, so Google Translate helped me!

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: