UWP - 在内部使用 ListView SplitView.Pane

Question

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

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

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

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

Answer 1

xaml GitHub...

上有一些这样的例子

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

这是另一个： https://github.com/JustinXinLiu/SwipeableSplitView/blob/master/GestureDemo/Shell.xaml#L103

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

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

Answer 2

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.

有关详细信息，请参阅 ListView。

一个常见的场景是绑定到一组业务对象。在 C# 和 Visual Basic 中，泛型 ObservableCollection class 是数据绑定的良好集合选择。有关详细信息，请参阅 Binding to a collection of items。

但是，我们也可以将ListViewItem添加到XAML代码中的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;
}

UWP - 在内部使用 ListView SplitView.Pane

UWP - Using ListView inside SplitView.Pane

c#

xaml

listview

win-universal-app

splitview