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

但最终的结果看起来像这样.不太酷.

我怎样才能达到像Insider Hub这样的东西？

Answer 1

Justin Xin Liu在GitHub上有一个非常好的例子.看一下提示!(我使用相同的方法) https://github.com/JustinXinLiu/SwipeableSplitView

所以在窗格内部使用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使用以下样式填充图标

<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.但是侧面窗格的设置已经非常复杂,所以可能不容易理解.另一方面,我还没有实现Justin在他的项目中所做的滑动访客,所以也许我的应用程序设计更像你想要的那个.