[ C# Windows10 ] Use SplitView With ListView
October 29, 2015 Leave a comment
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 :
Selesai, happy coding..
Sabitlabscode 
Komentar