0

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

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

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

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

4

2 回答 2

1

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

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

一个常见的场景是绑定到业务对象的集合。在 C# 和 Visual Basic 中，通用 ObservableCollection 类是数据绑定的一个很好的集合选择。有关详细信息，请参阅绑定到项目集合。

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

例如：

<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;
}
于 2016-03-11T07:54:51.613 回答
0

那么在 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

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

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

于 2016-03-10T09:03:36.207 回答