在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

所以窗格內使用一個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在他的項目中做的那種輕鬆的遊戲，所以也許我的應用程序設計更像你想要的。