[ 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..

Advertisements

[C# Windows10] Use Character Map For Icon

Windows10 menyediakan sebuah opsi untuk menampilkan icon-icon sederhana pada aplikasi anda dengan menggunakan karakter yang ada pada Character Map. Dengan fitur ini anda tidak perlu repot memasukkan image untuk menghiasi interface aplikasi anda, cukup masukkan character pada Character Map dan aplikasi anda dapat memunculkan icon seperti gambar berikut :

Capture2

Untuk melihat jenis-jenis karakternya, silahkan buka Character Map dengan cara mengetikkannya pada menu start windows10 anda dan buka tools Character Map. Akan tampil halaman seperti berikut :

Capture

Pastikan anda memilih font “Segoe MDL2 Assets”, maka akan tampil kumpulan icon-icon seperti gambar di atas. Silahkan pilih salah satu icon yang ingin anda gunakan dan klik tombol “Select” jika anda ingin menggunakan icon tersebut. Kemudian pillih tombol “Copy” untuk mengambil karakter yang harus di salin ke dalam aplikasi anda. Anda dapat memasukkan copy-an karakter tadi ke dalam aplikasi anda. Sebagai contoh anda ingin memasukkan icon pada control “Button”, maka berikut contoh kode yang harus diketikkan :

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
 Width="50" Height="50" Background="Transparent"/>

Pada code di atas anda menentukan jenis Font Family ke Segoe MDL2 Assets, kemudian karakter yang sudah di copy anda paste ke nilai “Content=”. Setelah itu aplikasi anda otomatis akan menampilkan karakter yang sudah anda pilih tadi..

Happy coding..

[ 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.. 🙂

%d bloggers like this: