在 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

Justin Xin Liu 在 GitHub 上有一个很好的例子。看看那个提示！（我使用相同的方法） https://github.com/JustinXinLiu/SwipeableSplitView

因此在窗格内使用像这样的列表视图：

<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。但这已经为侧窗格设置了更复杂的设置，因此可能不容易遵循。另一方面，我还没有实现贾斯汀在他的项目中所做的滑动手势，所以也许我的应用程序设计更像你想要的。

Answer 2

使用 AppStudio 库 https://github.com/wasteam/waslibs

ShellPage

<Page
x:Name="PageLayout"
x:Class="UniversalProject.UWP.ShellPage"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
xmlns:was_control="using:AppStudio.Uwp.Controls"
xmlns:controlEx="using:UniversalProject.UWP.Built_In.ControlEx"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
KeyUp="OnKeyUp">
<Page.Resources>
    <DataTemplate x:Key="NavigationItemTemplate">
        <Grid Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <ContentControl
                Margin="12,10"
                Content="{Binding Icon}"
                Foreground="{StaticResource NavigationPaneText}"/>
            <ContentControl
                Margin="6,0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Content="{Binding Image}" />
            <TextBlock
                Grid.Column="1"
                Margin="16,10"
                Text="{Binding Caption}"
                Foreground="{StaticResource NavigationPaneText}" />
            <ToolTipService.ToolTip>
                <TextBlock Text="{Binding Caption}" Foreground="{ThemeResource SystemBaseHighColor}"/>
            </ToolTipService.ToolTip>
        </Grid>
    </DataTemplate>

    <Style x:Key="NavigationSeparatorStyle" TargetType="ContentControl">
        <Setter Property="Margin" Value="8,0" />
        <Setter Property="MinHeight" Value="7"/>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Line
                        X1="0"
                        X2="1"
                        Stretch="UniformToFill"
                        Stroke="{StaticResource NavigationPaneText}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="DefaultHeaderTemplate">
        <Grid Background="Transparent">
            <TextBlock
                Margin="14,8"
                Text="{Binding}"
                Style="{StaticResource AppBarTitleStyle}" />
        </Grid>
    </DataTemplate>

    <Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Padding" Value="2,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        SelectionCheckMarkVisualEnabled="True"
                        CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                        FocusBorderBrush="{StaticResource NavigationPaneText}"
                        FocusSecondaryBorderBrush="{StaticResource NavigationPaneText}"
                        PlaceholderBackground="Transparent"
                        PointerOverForeground="{StaticResource NavigationPaneText}"
                        SelectedForeground="{StaticResource NavigationPaneText}"                        
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="Inline">
                        <ListViewItemPresenter.SelectedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.6"/>
                        </ListViewItemPresenter.SelectedBackground>
                        <ListViewItemPresenter.SelectedPressedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="1.0"/>
                        </ListViewItemPresenter.SelectedPressedBackground>
                        <ListViewItemPresenter.SelectedPointerOverBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.8"/>
                        </ListViewItemPresenter.SelectedPointerOverBackground>
                        <ListViewItemPresenter.PointerOverBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.1"/>
                        </ListViewItemPresenter.PointerOverBackground>
                        <ListViewItemPresenter.PressedBackground>
                            <SolidColorBrush Color="{StaticResource SystemAccentColor}" Opacity="0.3"/>
                        </ListViewItemPresenter.PressedBackground>
                    </ListViewItemPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid x:Name="MainLayout" Background="{StaticResource AppBackground}">
    <was_control:ShellControl 
        x:Name="shell"
        Header="App Name" 
        NavigationItems="{Binding NavigationItems}"            
        BorderBrush="{StaticResource AppBarBackground}"
        HeaderBackground="{StaticResource HeaderAppbarBackground}"
        HeaderForeground="{StaticResource AppBarForeground}"
        HeaderTemplate="{StaticResource DefaultHeaderTemplate}"
        NavigationForeground="{StaticResource NavigationPaneText}"
        SeparatorStyle="{StaticResource NavigationSeparatorStyle}"
        NavigationBackground="{StaticResource NavigationPaneBackground}"
        HamburgerBackground="{StaticResource SystemControlBackgroundAccentBrush}"
        HamburgerBorderBrush="{StaticResource NavigationPaneButton}"
        HamburgerForeground="{StaticResource NavigationPaneText}"
        NavigationItemTemplate="{StaticResource NavigationItemTemplate}"
        NavigationSubItemTemplate="{StaticResource NavigationItemTemplate}"
        ListViewItemContainerStyle="{StaticResource ListViewItemContainerStyle}">
        <was_control:ShellControl.CommandBar>
            <CommandBar x:Name="commandbar" RequestedTheme="Dark">
                <CommandBar.SecondaryCommands>
                    <controlEx:SecondaryIconButton Glyph="&#xE109;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="createButton" 
                                      x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
                    <controlEx:SecondaryIconButton Glyph="&#xE174;" RequestedTheme="Dark" 
                                                   Foreground="{StaticResource NavigationPaneText}" 
                                      x:Name="importExportButton" 
                                      x:Uid="ImportExportLabel" ></controlEx:SecondaryIconButton>
                </CommandBar.SecondaryCommands>
                <CommandBar.PrimaryCommands>

                </CommandBar.PrimaryCommands>
            </CommandBar>
        </was_control:ShellControl.CommandBar>
        <Grid x:Name="contentgrid" Margin="0,0,0,0">
                 <Frame  x:Name="frame" />
        </Grid>
    </was_control:ShellControl>   
</Grid>

Answer 3

现代的做法是使用 NavigationView。默认情况下它看起来很棒，并且需要更少的混乱来实现。自 build 16299 以来，它内置于 OS 中，并在 WinUI 2 中提供下层支持。

在 UWP 中创建一个好看的 SplitView

Creating a good-looking SplitView in UWP

c#

splitview

uwp