c# - 在 UWP 中创建一个好看的 SplitView

Question

我按照教程将 SplitView 控件添加到我的页面。代码如下:

<SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="&#xE825;" Width="50" Height="50" Background="Transparent" />
                    <TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="&#xE713;" Width="50" Height="50" Background="Transparent" FontSize="18" />
                    <TextBlock Text="Settings" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="AboutButton" FontFamily="Segoe MDL2 Assets" Content="&#xE897;" Width="50" Height="50" Background="Transparent" FontSize="18" />
                    <TextBlock Text="About" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            SplitView content here
        </SplitView.Content>
    </SplitView>

但最终结果看起来像this .不太酷。

我怎样才能到达类似 Insider Hub's 的地方？ ？

Answer 1

GitHub 上有一个 Justin Xin Liu 制作的很好的例子。看看那个提示! (我使用相同的方法) https://github.com/JustinXinLiu/SwipeableSplitView

所以在 Pane 内使用像这样的 ListView :

<SplitView.Pane>
    <ListBox ItemsSource="{x:Bind ViewModel.MenuItems}" SelectedItem="{x:Bind ViewModel.SelectedMenuItem, Mode=TwoWay, Converter={StaticResource ObjectToMenuItemConverter}}" ItemContainerStyle="{StaticResource MenuListBoxItemStyle}">
        <ListBox.ItemTemplate>
            <DataTemplate x:DataType="Presentation:MenuItem">
                <StackPanel Orientation="Horizontal" Height="48">
                    <TextBlock Grid.RowSpan="2" Text="{x:Bind Icon, Mode=OneWay}" Style="{StaticResource IconTextBlockStyle}" />
                    <TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" Style="{StaticResource MenuTitleTextBlockStyle}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</SplitView.Pane>

第一个 TextBlock 使用以下样式填充 Icon

<Style x:Key="IconTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
    <Setter Property="FontSize" Value="24" />
    <Setter Property="Width" Value="48" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="TextAlignment" Value="Center" />
</Style>

ListBox 还有一个 MenuListBoxItemStyle 样式，这将启用一些动画。你可以看看你是否想要它。

如果你想看看我是如何在我的应用程序中实现它的，你可以看看https://github.com/AppCreativity/Kliva .但这已经为侧 Pane 设置了更复杂的设置，因此可能不容易遵循。另一方面，我还没有实现 Justin 在他的项目中所做的滑动手势，所以也许我的应用程序设计更像您想要的。