在 UWP 中创建美观的拆分视图
本文关键字:拆分 视图 美观 创建 UWP | 更新日期: 2023-09-27 18:31:16
我按照教程向我的页面添加了 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="" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click" />
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content="" 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="" 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="" 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>
但最终结果是这样的。不是很酷。
如何访问预览体验中心之类的内容?
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>
第一个文本块使用以下样式填充了一个图标
<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>
列表框还有一个 MenuListBoxItemStyle 样式,这将启用一些动画。你可以看看你是否想要它。
如果你想看看我是如何在我的应用程序中实现它的,你可以看看 https://github.com/AppCreativity/Kliva。但是侧窗格的设置已经更加复杂,因此可能不容易遵循。另一方面,我还没有实现 Justin 在他的项目中所做的滑动客人,所以也许我的应用程序设计更像你想要的那个。
使用 AppStudio 库https://github.com/wasteam/waslibs
壳牌页面
<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="" RequestedTheme="Dark"
Foreground="{StaticResource NavigationPaneText}"
x:Name="createButton"
x:Uid="CreateNewItemLabel"></controlEx:SecondaryIconButton>
<controlEx:SecondaryIconButton Glyph="" 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>
执行此操作的现代方法是使用NavigationView。默认情况下,它看起来很棒,并且需要更少的麻烦来实现。自内部版本 16299 以来,它内置于操作系统中,并在 WinUI 2 中提供下层支持。