懒癌晚期兼正月里都是过年,一直拖到今天才继续更新。之前的几篇介绍了数据的来源,属于准备工作。本篇我们正式开始构建涨姿势 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 图标可以参考这两篇:
除了 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 文件的顶部生成 s > 节点,其中会包含控件本身的 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 源代码地址:
Windows Store:
来源: http://www.cnblogs.com/manupstairs/p/6443123.html