[UWP]涨姿势UWP源码——UI布局

懒癌晚期兼正月里都是过年,一直拖到今天才继续更新。之前的几篇介绍了数据的来源,属于准备工作。本篇我们正式开始构建涨姿势UWP程序的UI界面。

我们这个Hello World程序比较简单,总共只有一个页面,在PCTablet上呈左右分开,左边以列表显示新闻标题及简述,右边则显示新闻正文。

对于这样的一个布局,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控件来实现,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版就不难理解了。

为了能够适配Phone的竖屏界面,使工具栏的按钮能按比列分配到左右两边,同时不被SplitViewPane遮挡。我在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,例如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

转载于:https://www.cnblogs.com/manupstairs/p/6443123.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值