UWP - Using ListView inside SplitView.Pane

Question

I have currently a hamburger menu for my UWP app build using SplitView.Pane.

The problem with this implementation is, only the "Symbol" or <Button> element is actually clickable, not the text beside it in the pane.

I read on this forum and other tutorials that some have solved this problem by using a ListView, but in the GitHub samples I see that they have done this with CS instead of a simpler XAML implementation.

Does anybody know how to do this in the XAML directly?

The same hamburger menu available on GitHub [check this video](https://www.youtube.com/watch?v=InVsajohErQ) — Sender, Jun 13 '16 at 08:13

score 1 · Accepted Answer · answered Mar 11 '16 at 07:54

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.

For more info, see ListView.

A common scenario is to bind to a collection of business objects. In C# and Visual Basic, the generic ObservableCollection class is a good collection choice for data binding. For more info, see Binding to a collection of items.

But, we can also add ListViewItem to the ListView in XAML code.

For example:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <RelativePanel>
        <Button FontFamily="Segoe MDL2 Assets" FontSize="36" Content="&#xE700;" Click="Button_Click"></Button>
    </RelativePanel>
    <SplitView Grid.Row="1" Name="mySplitView" DisplayMode="CompactOverlay" OpenPaneLength="200" CompactPaneLength="56" HorizontalAlignment="Left">
        <SplitView.Pane>
            <ListView Name="MyListView"  SelectionChanged="ListView_SelectionChanged">
                <ListView.Items>
                    <ListViewItem Name="FristItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock  FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE170;"></TextBlock>
                            <TextBlock Margin="20,0,0,0" Text="Click" FontSize="36"></TextBlock>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem Name="SecondItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock  FontFamily="Segoe MDL2 Assets" FontSize="36" Text="&#xE171;"></TextBlock>
                            <TextBlock Margin="20,0,0,0" Text="Click" FontSize="36"></TextBlock>
                        </StackPanel>
                    </ListViewItem>
                </ListView.Items>
            </ListView>
        </SplitView.Pane>

        <SplitView.Content>
            <Frame Name="MyFrame"></Frame>
        </SplitView.Content>
    </SplitView>
</Grid>

In code behind:

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (MyListView.SelectedItem.Equals(FristItem))
    {
    }
    else if (MyListView.SelectedItem.Equals(SecondItem))
    {
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    mySplitView.IsPaneOpen = !mySplitView.IsPaneOpen;
}

Thanks for that comment @jayden-gu ! :D – Florian Monfort Mar 16 '16 at 03:35 — Florian Monfort, Mar 16 '16 at 03:35

score 0 · Answer 2 · answered Mar 10 '16 at 09:03

Well there are some xaml examples of this available on GitHub...

Here is one: https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Controls/SidePaneControl.xaml#L25

And here is another one: https://github.com/JustinXinLiu/SwipeableSplitView/blob/master/GestureDemo/Shell.xaml#L103

In short, you just add the ListView in your Pane part of the SplitView and take note of the DataTemplates used to be sure that you have an icon and text.

Like this: https://github.com/AppCreativity/Kliva/blob/c36d65058c4c35f0a3d2c7c886df81ba5ecfb31b/src/Kliva/XAMLResources/DataTemplates.xaml#L410

UWP - Using ListView inside SplitView.Pane

2 Answers2