[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.]
[涉及某信息預發佈的版本可能在它的商業版本大幅修改。對於這裏提供的信息,微軟不作任何擔保。]
在MSDN中,Windows 10 SDK 的東東上,都會聲明這一句話,我也引過來吧啦,他不擔保,我也保不了。
SplitView,這個控件,好像在WinJs中早早就有了,我們好多人也在WPF/WinRT 等Xaml環境中實現過,但官方的才姍姍來遲,淚奔中。
我猜測,因爲我們的在Xaml太強大了,這麼弱小的功能,分分種搞出來一個,微軟的工程師們就覺得沒必要啦(YY中。。。。)。
一、效果
二、SplitView
在效果的Gif中,一共展示了四種方式,通過設置DisplayMode來改變,分別是:
- Inline
- Overlay
- CompactInline
- CompactOverlay
前兩種模式當IsOpen 爲False 時,是完全隱藏的.
後兩種模式,當IsOpen爲False時,不會完全隱藏,剩餘的大小是由 CompactPaneLength 屬性決定,默認值爲48.
還有一個 OpenPaneLength,當名字就知啦,展開的Pane長度。
三、示例核心代碼
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <SplitView IsPaneOpen="{x:Bind splitViewToggle.IsChecked,Mode=TwoWay,Converter={StaticResource NullableBooleanToBooleanKey}}" PaneBackground="Green" DisplayMode="CompactOverlay" CompactPaneLength=""> <SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="48" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ListView Grid.Row="1"> <ListViewItem> <StackPanel Orientation="Horizontal" > <SymbolIcon Symbol="People" /> <TextBlock Text="People" Margin="24,0,0,0" VerticalAlignment="Center" /> </StackPanel> </ListViewItem> <ListViewItem> <StackPanel Orientation="Horizontal" > <SymbolIcon Symbol="Globe" /> <TextBlock Text="Globe" Margin="24,0,0,0" VerticalAlignment="Center" /> </StackPanel> </ListViewItem> <ListViewItem> <StackPanel Orientation="Horizontal" > <SymbolIcon Symbol="Message" /> <TextBlock Text="Message" Margin="24,0,0,0" VerticalAlignment="Center" /> </StackPanel> </ListViewItem> <ListViewItem> <StackPanel Orientation="Horizontal" > <SymbolIcon Symbol="Mail" /> <TextBlock Text="Mail" Margin="24,0,0,0" VerticalAlignment="Center" /> </StackPanel> </ListViewItem> <ListViewItem> <StackPanel Orientation="Horizontal" > <SymbolIcon Symbol="Video" /> <TextBlock Text="Video" Margin="24,0,0,0" VerticalAlignment="Center" /> </StackPanel> </ListViewItem> </ListView> </Grid> </SplitView.Pane> <Border Background="LightGray"> <TextBlock Text="Content" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </SplitView> <ToggleButton x:Name="splitViewToggle" Style="{StaticResource SplitViewTogglePaneButtonStyle}" /> </Grid>