[UWP]漲姿式UWP源碼——UI佈局

懶癌晚期兼正月裏都是過年,一直拖到今天才繼續更新。以前的幾篇介紹了數據的來源,屬於準備工做。本篇咱們正式開始構建漲姿式UWP程序的UI界面。git

咱們這個Hello World程序比較簡單,總共只有一個頁面,在PCTablet上呈左右分開,左邊以列表顯示新聞標題及簡述,右邊則顯示新聞正文。github

對於這樣的一個佈局,Grid無疑是最爲合適的Panel,大致是如下的結構:windows

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition x:Name="columnLeft" Width="4*"></ColumnDefinition>
                        <ColumnDefinition x:Name="columnRight" Width="6*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <ListView x:Name="listViewItems" Grid.Column="0" SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                        ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ZzsItemTemplate}" ItemContainerStyle="{StaticResource ZzsItemStyle}" >
                    </ListView>
                    <ProgressBar  Grid.Column="0" IsIndeterminate="True" Visibility="{Binding IsLoading,Converter={StaticResource boolToVisible}}" ></ProgressBar>

                    <ContentControl Grid.Column="1" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="4,0"
                        ContentTemplate="{StaticResource WebViewTemplate}" Content="{Binding}"></ContentControl>
                </Grid>

仔細觀察能夠發現,左上角參照UWP APP的風格,設置了一個漢堡包菜單,經過點擊這個按鈕會彈出部分選項:api

彈出部分的效果一般都是經過SplitView控件來實現,SplitViewUWP中是橫向劃分空間的不二法寶,也能夠參考系統自帶的「郵件」APP,其中嵌套了多層SplitView來實現遞進的漸次佈局。工具

        <SplitView Grid.Row="1" x:Name="splitView" DisplayMode="CompactOverlay" CompactPaneLength="48" IsPaneOpen="{Binding IsOpen}">
            <SplitView.Pane>
                <ListView ItemsSource="{Binding CategoryList}"
                        ItemTemplate="{StaticResource NavigationItemTemplate}" 
                        ItemContainerStyle="{StaticResource NavigationItemStyle}"
                        SelectedItem="{Binding SelectedCategory,Mode=TwoWay}"></ListView>
            </SplitView.Pane>
            <SplitView.Content>
                <Grid>
                <!-- 這裏是上面那個主體內容的Grid -->
         </Grid>
            </SplitView.Content>
        </SplitView>

能夠看到SplitViewPane裏放了一個CategoryListContent就放了主體內容的Grid,在IsPaneOpen屬性變化爲True時,則展開顯示。佈局

到目前爲止,還沒有涉及頂部的綠色工具欄。這裏不得不感慨一下,雖然UWP能夠作到在不一樣尺寸的Windows10設備上運行,可是UI的適配確實是很麻煩的,同時考慮到Windows Phone的佔有率,UWP APP不出Phone版就不難理解了。ui

爲了可以適配Phone的豎屏界面,使工具欄的按鈕能按比列分配到左右兩邊,同時不被SplitViewPane遮擋。我在SplitView的外層再包了一層Grid,能夠看到做爲最外層的Grid,僅有兩行。工具欄Height=Auto置於頂部,第二行放置SplitView佔據剩餘空間。spa

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="columnLeftBar" Width="4*"></ColumnDefinition>
                <ColumnDefinition Width="Auto" ></ColumnDefinition>
                <ColumnDefinition x:Name="columnRightBar" Width="6*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="{StaticResource SystemControlBackgroundAccentBrush}">
                <Button Content="&#xE700;" FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                        HorizontalAlignment="Left" Background="{StaticResource SystemControlBackgroundAccentBrush}"
                              Width="48" Height="48" Command="{Binding OpenPaneCommand,Mode=OneTime}"></Button>
                <Button x:Name="buttonSync" Content="&#xE117;" FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                        HorizontalAlignment="Right" Background="{StaticResource SystemControlBackgroundAccentBrush}"
                              Width="48" Height="48" Command="{Binding SyncCommand,Mode=OneTime}"></Button>
            </Grid>
            <Border x:Name="borderMiddle" Grid.Column="1" Background="{StaticResource SystemControlBackgroundAccentBrush}">
                
            </Border>
            <Border Grid.Column="2" Background="{StaticResource SystemControlBackgroundAccentBrush}">
                <Button  Content="&#xE112;" FontFamily="{ThemeResource SymbolThemeFontFamily}" Background="{StaticResource SystemControlBackgroundAccentBrush}"
                            Width="48" Height="48" Command="{Binding GoBackCommand,Mode=OneTime}"></Button>
            </Border>
            
        </Grid>
        <SplitView Grid.Row="1" x:Name="splitView" DisplayMode="CompactOverlay" CompactPaneLength="48" IsPaneOpen="{Binding IsOpen}">
            <!-- SplitView --> 
        </SplitView>
    </Grid>

這裏值得一提的是微軟提供了大量系統的icon圖標,在XAML中,僅需將FontFamily設置成SymbolThemeFontFamily,同時填寫編號,便可使用這些很是精緻的系統圖標。例如:3d

<Button Content="&#xE700;" FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                        HorizontalAlignment="Left" Background="{StaticResource SystemControlBackgroundAccentBrush}"
                              Width="48" Height="48" Command="{Binding OpenPaneCommand,Mode=OneTime}"></Button>

具體的icon圖標能夠參考這兩篇:code

https://docs.microsoft.com/zh-cn/windows/uwp/style/segoe-ui-symbol-font

https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Symbol

除了icon圖標之外,咱們一樣能夠發現一些的系統定義的樣式,好比:

<Grid Grid.Column="0" Background="{StaticResource SystemControlBackgroundAccentBrush}">

鼠標放在SystemControlBackgroundAccentBrush上,右鍵菜單點擊轉到定義,會打開一個genric.xaml,該文件存在大量的系統配色和樣式,很是方便且值得使用。

咱們也能夠增長一些自定義的Style,例如ListViewItemContainerStyle

<ListView ItemsSource="{Binding CategoryList}"
                        ItemTemplate="{StaticResource NavigationItemTemplate}" 
                        ItemContainerStyle="{StaticResource NavigationItemStyle}"
                        SelectedItem="{Binding SelectedCategory,Mode=TwoWay}"></ListView>

這裏的ItemContainerStyle常常須要自定義樣式,通常的作法是經過左側文檔大綱,找到ListView節點,而後再選擇「編輯其餘模板」->「編輯生成的項目容器(ItemContainerStyle)」,一般會在xaml文件的頂部生成<Page.Resources>節點,其中會包含控件自己的Default Style,在此基礎上進行修改事半功倍。

若是須要徹底從新定義的模板,例如:ItemTemplate="{StaticResource NavigationItemTemplate}"

假設這個NavigationItemTemplate會在多處使用,那能夠考慮將該資源定義在App.xaml中供整個程序使用:

    <Application.Resources>
        <ResourceDictionary>
            <local:ViewModelLocator x:Key="Locator" />
            <local:BoolToVisible x:Key="boolToVisible"></local:BoolToVisible>
            <DataTemplate x:Key="NavigationItemTemplate">
                <TextBlock Text="{Binding}" Margin="48,0"></TextBlock>
            </DataTemplate>
        </ResourceDictionary>
    </Application.Resources>

以上就是MainPage.xaml的大概內容分析,下一篇會結合MainPage.xaml.cs的代碼來進一步介紹漲姿式UWP的相關內容。

GitHub源代碼地址: 

https://github.com/manupstairs/ZhangZiShiRSSRead

Windows Store

https://www.microsoft.com/zh-cn/store/p/%e6%b6%a8%e5%a7%bf%e5%8a%bfuwp/9nblggh3zqd1

相關文章
相關標籤/搜索