[UWP]漲姿勢UWP源碼——UI布局

懶癌晚期兼正月里都是過年，一直拖到今天才繼續更新。之前的幾篇介紹了數據的來源，屬於准備工作。本篇我們正式開始構建漲姿勢UWP程序的UI界面。

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

對於這樣的一個布局，Grid無疑是最為合適的Panel，大體是以下的結構：

                <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的風格，設置了一個漢堡包菜單，通過點擊這個按鈕會彈出部分選項：

彈出部分的效果通常都是通過SplitView控件來實現，SplitView在UWP中是橫向划分空間的不二法寶，也可以參考系統自帶的“郵件”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>

可以看到SplitView的Pane里放了一個CategoryList，Content就放了主體內容的Grid，在IsPaneOpen屬性變化為True時，則展開顯示。

到目前為止，尚未涉及頂部的綠色工具欄。這里不得不感慨一下，雖然UWP可以做到在不同尺寸的Windows10設備上運行，但是UI的適配確實是很麻煩的，同時考慮到Windows Phone的占有率，UWP APP不出Phone版就不難理解了。

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

    <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，同時填寫編號，即可使用這些非常精致的系統圖標。例如：

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

具體的icon圖標可以參考這兩篇：

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，例如ListView的ItemContainerStyle：

<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