c# – 在UWP中创建漂亮的SplitView

发布时间：2020-12-15 23:30:37 所属栏目：百科来源：网络整理

导读：我按照教程添加了一个SplitView控件到我的页面.代码如下： SplitView x:Name="MainSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="150" SplitView.Pane StackPanel Background="Gray" Button x:Name="

我按照教程添加了一个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这样的东西？

解决方法

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在他的项目中所做的滑动访客,所以也许我的应用程序设计更像你想要的那个.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!