UWP - 在 SplitView.Pane 中使用 ListView答案

【问题标题】：UWP - Using ListView inside SplitView.PaneUWP - 在 SplitView.Pane 中使用 ListView
【发布时间】：2016-03-10 06:00:39
【问题描述】：

我目前有一个使用 SplitView.Pane 构建的 UWP 应用程序的汉堡菜单。

这个实现的问题是，只有“符号”或<Button>元素实际上是可点击的，而不是窗格中它旁边的文本。

我在这个论坛和其他教程上读到，有些人通过使用 ListView 解决了这个问题，但在 GitHub 示例中，我看到他们使用 CS 而不是更简单的 XAML 实现来解决这个问题。

有人知道如何直接在 XAML 中执行此操作吗？

【问题讨论】：

GitHub 上的相同汉堡菜单 check this video

标签： c# xaml listview win-universal-app splitview

【解决方案1】：

ListView 是一个ItemsControl，因此它可以包含任何类型的items 的集合。要填充视图，请将项目添加到 Items 集合，或将 ItemsSource 属性设置为数据源。

更多信息，请参阅ListView。

一个常见的场景是绑定到业务对象的集合。在 C# 和 Visual Basic 中，通用 ObservableCollection 类是数据绑定的一个很好的集合选择。如需更多信息，请参阅Binding to a collection of items。

但是，我们也可以在 XAML 代码中将ListViewItem 添加到ListView。

例如：

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

在后面的代码中：

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;
}

【讨论】：

感谢@jayden-gu 的评论！ :D

【解决方案2】：

在 GitHub 上有一些这样的 xaml 示例......

这是一个：https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Controls/SidePaneControl.xaml#L25

还有一个： https://github.com/JustinXinLiu/SwipeableSplitView/blob/master/GestureDemo/Shell.xaml#L103

简而言之，您只需将 ListView 添加到 SplitView 的 Pane 部分，并记下用于确保您拥有图标和文本的 DataTemplates。

像这样： https://github.com/AppCreativity/Kliva/blob/c36d65058c4c35f0a3d2c7c886df81ba5ecfb31b/src/Kliva/XAMLResources/DataTemplates.xaml#L410

【讨论】：