【Win10】UAP/UWP/通用 開發之 SplitView

[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>

示例下載

本文地址:http://www.cnblogs.com/gaoshang212/p/4536453.html 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章