UWP -在ListView中使用SplitView.Pane

Question

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

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

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

有人知道如何在XAML中直接这样做吗？

Answer 1

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

有关更多信息，请参见ListView。

常见的场景是绑定到业务对象的集合。在C#和Visual中，泛型ObservableCollection类是数据绑定的一个很好的集合选择。有关更多信息，请参见绑定到项的集合。

但是，我们也可以在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;
}

Answer 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的窗格部分，并注意过去的DataTemplates，以确保您有一个图标和文本。

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