原文:[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="" FontFamily="{ThemeResource SymbolThemeFontFamily}"
HorizontalAlignment="Left" Background="{StaticResource SystemControlBackgroundAccentBrush}"
Width="48" Height="48" Command="{Binding OpenPaneCommand,Mode=OneTime}"></Button>
<Button x:Name="buttonSync" Content="" 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="" 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="" 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