visual C#（二十五）实现UWP应用的用户界面

参考书：《 visual C# 从入门到精通》
第四部分用C#构建UMP应用
第25章实现UWP应用的用户界面

文章目录

25.2.1 实现可伸缩的用户界面

25.2.2 向用户界面应用样式

UWP，Univeral Windows Platform，通用Windows平台。UWP应用可以在多种Windows 10 设备上运行，不需要维护单独的代码库。手机、平板和台式机，甚至Xbox也支持UWP。

25.1 UWP应用的特点

对于手持和平板设备是通过触摸与应用进行交互的。UWP应用的设计对于这种形式也是完全支持的。实际上，不管是触摸还是鼠标键盘操作，应用程序是可以不加区分的，只需要围绕触摸来设计。

GUI通过对手势的响应向用户提供视觉反馈，从而增强应用程序的专业性。手势是指用手指执行的各种触摸操作，如手指点击等同于用鼠标点击，其他如多指操作也有相关的对应。

开发好新的UWP应用后可以用VS提供的工具打包并上传到Windows应用商店供消费者下载和安装，应用可以收费也可以免费。当然前提是你的应用必须可信，且符合Microsoft的安全策略。应用上传到Windows应用商店后，会经过一系列检查来验证它不含恶意代码，并符合UWP应用的安全要求。这些安全限制规定了应用如何访问计算机上的资源。如，UWP应用默认不能直接向文件系统写入或者侦听网络的入站请求。但如果确实需要执行这些受限操作，可在应用的Package.appxmanifest文件的清单数据中把它们指定为功能。这些信息会记录到应用的元数据中，并通知Microsoft执行额外的测试来验证应用使用这些功能的方式。

Package.appxmanifest文件是一个XML文档，可以在VS中使用清单设计器来编辑。如图所示：

每一个功能都有一段简单的说明。

25.2 使用空白模板构建UWP应用

下面是详细步骤和一些说明：

启动Visual Studio，现在最新版是2019，官网直接可以下载Community（社区）版本的，这个是不收费的。其它的两个版本是Enterprise和Professional，这两个版本是要收费的，不过好像学生可以直接用。实际上用社区版的就行了，功能上对于初学者来说是没有什么区别的。其它两个版本是面向专业人士和小型团队的。
创建新项目中在C#中找到空白应用（通用Windows）这一栏，选中确定，然后对项目名命名确定就可以了。
在解决方案资源管理器中双击MainPage.xaml，会出现设计视图。（解决方案找不到的可以在顶部菜单栏中的视图栏中找）。通常新建的项目中，MainPage.xaml的源代码长这样：

<Page
    x:Class="C_25_2_Customers.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

    </Grid>
</Page>

注意其中有一项：xmlns:local="using:C_25_2_Customers"，该声明将C_25_2_Customers命名空间中的项带入作用域，使开发人员能在自己的XAML代码中通过附加local前缀的方式引用该命名空间中的类和其他类型。C_25_2_Customers这个名字正是前面创建新项目时用的项目名，它时当前应用的代码生成的命名空间。

展开MainPage.xaml，双击MainPage.xaml.cs。其中的代码到目前为止都是VS生成的，是一个模板。长这样：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x804 上介绍了“空白页”项模板

namespace C_25_2_Customers
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

其中定义了C_25_2_Customers命名空间中的类型。页由名为MainPage的类实现，该类派生自Page类。Page类实现了UWP应用的XAML页面的默认功能，所以开发人员只需在MainPage类中实现自己的应用程序的特有功能。

回到设计视图，注意到<Page>标记中包含属性：x:Class="C_25_2_Customers.MainPage"，该属性将定义页面布局的XAML标记连接到提供应用程序逻辑的MainPage类

这是简单UWP应用的基本结构。可以感受到VS将界面设计和业务逻辑分开，这样允许艺术家和程序员合作开发实用又好看的应用。

25.2.1 实现可伸缩的用户界面

接着前面的来。

在设计视图的左上的工具栏中有一个下拉列表，可以选择设计平面的分辨率和大小，如图，选择"13.3"Desktop(1280*720)100%缩放。该规格默认为横向
接下来我们要理解Grid控件的作用，Grid控件是容器控件，它的作用是可在其中包含大量控件，它可指定其它控件在网格中的位置。其他控件如StackPannel控件自动垂直排列其中的控件。
在页面上添加一个TextBlock控件，可以从工具箱拖动，也可以直接在源代码中的<Grid>后输入<TextBlock/>。对该控件的属性做一些设定，可在属性窗口修改也可直接在源代码中输入属性的设定：<TextBlock HorizontalAlignment="Left" Margin="400,0,90,0" TextWrapping="Wrap" Text="Adventure Works Customers" VerticalAlignment="Top" FontSize="50"/>
然后添加另外4个TextBlock控件。相关的属性设置如下：（注意这里其实在源代码中设置属性比在属性窗口中设定要方便很多，前提是你实现确定各属性的具体值，一开始想好，当然对于初学者来说在属性窗口设定数值可能更直观一些）

		<TextBlock HorizontalAlignment="Left" Margin="330,190,0,0" TextWrapping="Wrap" Text="ID" VerticalAlignment="Top" FontSize="20"/>
        <TextBlock HorizontalAlignment="Left" Margin="460,190,0,0" TextWrapping="Wrap" Text="TItle" VerticalAlignment="Top" FontSize="20"/>
        <TextBlock HorizontalAlignment="Left" Margin="620,190,0,0" TextWrapping="Wrap" Text="First Name" VerticalAlignment="Top" FontSize="20"/>
        <TextBlock HorizontalAlignment="Left" Margin="970,190,0,0" TextWrapping="Wrap" Text="Last Name" VerticalAlignment="Top" FontSize="20"/>

再添加3各TextBox控件，属性设置如下：

		<TextBox x:Name="id" HorizontalAlignment="Left" Margin="300,240,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="20" IsReadOnly="True"/>
        <TextBox x:Name="firstName" HorizontalAlignment="Left" Margin="550,240,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="20" />
        <TextBox x:Name="lastName" HorizontalAlignment="Left" Margin="875,240,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="20" />

注意Name属性不是控件必须的，要设置的话需要附加x:前缀。

添加一个ComboBox控件，属性设置为<ComboBox x:Name="title" HorizontalAlignment="Left" Margin="420,240,0,0" VerticalAlignment="Top" Width="100" FontSize="20"/>
在ComboBox
控件的属性窗口的公共区域中的Items栏点击显示...的按钮，出现集合编辑器Item窗口，点击添加ComboBoxItem，然后在Content属性输入Mr，点击确定。如图：
继续添加3个ComboBoxItem，Content属性分别命名为Mrs、Ms、Miss。可以用集合编辑器添加也可以直接输入XAML标记。最终XAML标记如下

		<ComboBox x:Name="title" HorizontalAlignment="Left" Margin="420,240,0,0" VerticalAlignment="Top" Width="100" FontSize="20">
            <ComboBoxItem Content="Mr"/>
            <ComboBoxItem Content="Mrs"/>
            <ComboBoxItem Content="Ms"/>
            <ComboBoxItem Content="Miss"/>
        </ComboBox>

再添加两个TextBox和两个TextBlock。属性设置如下：

		<TextBlock HorizontalAlignment="Left" Margin="300,390,0,0" TextWrapping="Wrap" Text="Email" VerticalAlignment="Top" FontSize="20"/>
        <TextBox x:Name="email" HorizontalAlignment="Left" Margin="450,390,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="400" FontSize="20"/>
        <TextBlock HorizontalAlignment="Left" Margin="300,540,0,0" TextWrapping="Wrap" Text="phone" VerticalAlignment="Top" FontSize="20"/>
        <TextBox x:Name="phone" HorizontalAlignment="Left" Margin="450,540,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="200" FontSize="20"/>

运行后应该如图：

注意这是在全屏下的显示效果。当前的布局还不嫩伸缩来并适应不同屏幕大小和方向。但我们可以利用Grid控件的属性和一个名为“可视化状态管理器”的功能解决问题。

用Grid控件实现表格布局

可以用Grid实现表格布局。Grid包含行和列，可指定将控件放在哪一个哪一列。这样的一个优点是可以用相对值指定行和列的大小，这样网格会放大缩小来适应不同的屏幕和方向，行和列会成比例的放大缩小。下面我们试着修改前面的应用程序的布局以适应不同的屏幕大小和方向。

最终的XAML标记如下：

<Page
    x:Class="C_25_2_Customers.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid Margin="10,20,10,20">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Adventure Works Customers" VerticalAlignment="Center" FontSize="50"/>
            
        <Grid Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="4*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="ID" VerticalAlignment="Center" FontSize="20"/>
            <TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="TItle" VerticalAlignment="Center" FontSize="20"/>
            <TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="First Name" VerticalAlignment="Center" FontSize="20"/>
            <TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="Last Name" VerticalAlignment="Center" FontSize="20"/>

            <TextBox Grid.Row="1" Grid.Column="1" x:Name="id" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" IsReadOnly="True"/>
            <TextBox Grid.Row="1" Grid.Column="5" x:Name="firstName" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
            <TextBox Grid.Row="1" Grid.Column="7" x:Name="lastName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
            <ComboBox Grid.Row="1" Grid.Column="3" x:Name="title" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  FontSize="20">
                <ComboBoxItem Content="Mr"/>
                <ComboBoxItem Content="Mrs"/>
                <ComboBoxItem Content="Ms"/>
                <ComboBoxItem Content="Miss"/>
            </ComboBox>

            <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="Email" VerticalAlignment="Center" FontSize="20"/>
            <TextBox Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="3" x:Name="email" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="400" FontSize="20"/>
            <TextBlock Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="phone" VerticalAlignment="Center" FontSize="20"/>
            <TextBox Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="3" x:Name="phone" HorizontalAlignment="Left"   TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="200" FontSize="20"/>

        </Grid>
        </Grid>
    </Grid>
</Page>

还是很废劲的。但是运行起来是达到了预期的效果，它会根据窗口的大小调节控件的大小和位置，还是很不错的。如图：

用可视状态管理器调整布局

虽然前面我们是做到了适应不同分辨率和屏幕大小，但实际上呈现出来的效果还是不太理想。问题出在布局上。我们希望它在手机上遵从另一种布局，手机的屏幕和电脑的屏幕差别实在太大了，所以不同设备上呈现出不同的布局也是很合理的。为此，我们有几种选择：

可创建几个版本的MainPage.xaml文件，每个设备家族一个。每个XAML文件链接到同一个代码隐藏文件MainPage.xaml.cs，全部运行相同的代码。例如，要为只能手机创建XAML文件，可以在项目中添加一个名为DeviceFamily-Mobile的文件夹，并用项目=>添加新项命令在文件夹中添加名为MainPage.xaml的一个新的XAML视图。然后面向手机对页面进行布局。XAML视图会自动连接到现有的MainPage.xaml.cs文件。运行时，UWP根据运行应用的设备类型自动选择合适的视图。
通过可视状态管理器在运行是修改页面布局。他会跟踪应用的可视状态，检测窗口的高度和宽度变化。可添加XAML标记，根据窗口的大小来定位控件。该标记能移动控件或显示/隐藏控件。
通过可视状态管理器根据窗口高度和宽度切换不同视图。

我们采用第三种方式来修改我们前面的那个应用。

过程就不一一说明了，XAML标记如下：

<Page
    x:Class="C_25_2_Customers.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid x:Name="customerColumnarView" Margin="10,20,10,20" Visibility="Visible">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Customers" VerticalAlignment="Center" FontSize="30"/>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="ID" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="TItle" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="First Name" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="Last Name" VerticalAlignment="Center" FontSize="20"/>

                <TextBox Grid.Row="0" Grid.Column="1" x:Name="cid" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" IsReadOnly="True"/>
                <TextBox Grid.Row="2" Grid.Column="1" x:Name="cfirstName" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <TextBox Grid.Row="3" Grid.Column="1" x:Name="clastName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <ComboBox Grid.Row="1" Grid.Column="1" x:Name="ctitle" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  FontSize="20">
                    <ComboBoxItem Content="Mr"/>
                    <ComboBoxItem Content="Mrs"/>
                    <ComboBoxItem Content="Ms"/>
                    <ComboBoxItem Content="Miss"/>
                </ComboBox>

                <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="Email" VerticalAlignment="Center" FontSize="20"/>
                <TextBox Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cemail" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="400" FontSize="20"/>
                <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="phone" VerticalAlignment="Center" FontSize="20"/>
                <TextBox Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cphone" HorizontalAlignment="Stretch"   TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="200" FontSize="20"/>

            </Grid>
        </Grid>


        <Grid x:Name="customersTabularView" Margin="10,20,10,20" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Adventure Works Customers" VerticalAlignment="Center" FontSize="50"/>

            <Grid Grid.Row="2" Margin="0,2,0,88" Grid.RowSpan="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="4*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="ID" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="TItle" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="0" Grid.Column="5" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="First Name" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Grid.Row="0" Grid.Column="7" HorizontalAlignment="Center"   TextWrapping="Wrap" Text="Last Name" VerticalAlignment="Center" FontSize="20"/>

                <TextBox Grid.Row="1" Grid.Column="1" x:Name="id" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" IsReadOnly="True"/>
                <TextBox Grid.Row="1" Grid.Column="5" x:Name="firstName" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <TextBox Grid.Row="1" Grid.Column="7" x:Name="lastName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <ComboBox Grid.Row="1" Grid.Column="3" x:Name="title" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  FontSize="20">
                    <ComboBoxItem Content="Mr"/>
                    <ComboBoxItem Content="Mrs"/>
                    <ComboBoxItem Content="Ms"/>
                    <ComboBoxItem Content="Miss"/>
                </ComboBox>

                <TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="Email" VerticalAlignment="Center" FontSize="20"/>
                <TextBox Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="3" x:Name="email" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="400" FontSize="20"/>
                <TextBlock Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center"  TextWrapping="Wrap" Text="phone" VerticalAlignment="Center" FontSize="20"/>
                <TextBox Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="3" x:Name="phone" HorizontalAlignment="Left"   TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="200" FontSize="20"/>

            </Grid>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="TabularLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="660"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="customersTabularView.Visibility" Value="Visible"/>
                        <Setter Target="customerColumnarView.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ColumnarLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="customersTabularView.Visibility" Value="Collapsed"/>
                        <Setter Target="customerColumnarView.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    
</Page>

运行结果如下图，窗口宽度小于660像素时的布局和大于660像素的布局完全不同，正是我们想要的效果。

25.2.2 向用户界面应用样式

布局我们大概明白了，接下来时理解应用样式。我们在前面写的应用程序的基础上为它定义一些简单的样式。

右击项目，选择添加=>新建项，点击资源字典，命名为AppStyle.xaml，点击添加。
文本编辑窗口中显示AppStyle.xaml的内容：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers">
    
</ResourceDictionary>

样式是资源的一种。

右击项目，添加=>新建文件夹，命名为Images
右击Image文件夹选择添加=>现有项，然后可以随便找一张图片添加进去就行了。
接下来很繁琐，我就不一一细讲了，总之就是将AppStyle.xaml中的样式表作如下定义：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers">
    <ImageBrush x:Key="testBrush" ImageSource="Images/Reimu.png"/>
    <Style x:Key="GridStyle" TargetType="Grid">
        <Setter Property="Background" Value="{StaticResource testBrush}"/>
    </Style>
    <Style x:Key="FontStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe Print"/>
    </Style>
    <Style x:Key="HeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource FontStyle}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="SteelBlue"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <CompositeTransform Rotation="-5"/>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TabularHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderStyle}">
        <Setter Property="FontSize" Value="40"></Setter>
    </Style>
    <Style x:Key="ColumnHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource HeaderStyle}">
        <Setter Property="FontSize" Value="30"/>
    </Style>
    <Style x:Key="LabelStyle" TargetType="TextBlock" BasedOn="{StaticResource FontStyle}">
        <Setter Property="FontSize" Value="30"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="TextWrapping" Value="Wrap"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Foreground" Value="AntiqueWhite"/>
    </Style>
</ResourceDictionary>

其实无非就是自己先预设好实际上需要用到的各种控件的属性设置，作为模板，后面在相应的控件的属性设置中直接用上自己设定好的模板就行了，就不需要再一一去重复属性设置了。因为很多相同的控件需要同样的属性设置。

MainPage.xaml中的XAML标记作相应的改变

<Page
    x:Class="C_25_2_Customers.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:C_25_2_Customers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Style="{StaticResource GridStyle}">
        <Grid x:Name="customerColumnarView" Margin="10,20,10,20" Visibility="Visible">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Style="{StaticResource ColumnHeaderStyle}" Text="Customers"/>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="ID" />
                <TextBlock Grid.Row="1" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="TItle" />
                <TextBlock Grid.Row="2" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="First Name" />
                <TextBlock Grid.Row="3" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="Last Name" />

                <TextBox Grid.Row="0" Grid.Column="1" x:Name="cid" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" IsReadOnly="True"/>
                <TextBox Grid.Row="2" Grid.Column="1" x:Name="cfirstName" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <TextBox Grid.Row="3" Grid.Column="1" x:Name="clastName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <ComboBox Grid.Row="1" Grid.Column="1" x:Name="ctitle" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  FontSize="20">
                    <ComboBoxItem Content="Mr"/>
                    <ComboBoxItem Content="Mrs"/>
                    <ComboBoxItem Content="Ms"/>
                    <ComboBoxItem Content="Miss"/>
                </ComboBox>

                <TextBlock Grid.Row="4" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="Email"/>
                <TextBox Grid.Row="4" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cemail" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="400" FontSize="20"/>
                <TextBlock Grid.Row="5" Grid.Column="0" Style="{StaticResource LabelStyle}" Text="phone"/>
                <TextBox Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="3" x:Name="cphone" HorizontalAlignment="Stretch"   TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="200" FontSize="20"/>

            </Grid>
        </Grid>


        <Grid x:Name="customersTabularView" Margin="10,20,10,20" Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Style="{StaticResource TabularHeaderStyle}" Text="Adventure Work Customers"/>

            <Grid Grid.Row="2" Margin="0,2,0,88" Grid.RowSpan="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="4*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="20"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="1" Style="{StaticResource LabelStyle}" Text="ID" />
                <TextBlock Grid.Row="0" Grid.Column="3" Style="{StaticResource LabelStyle}" Text="TItle" />
                <TextBlock Grid.Row="0" Grid.Column="5" Style="{StaticResource LabelStyle}" Text="First Name" />
                <TextBlock Grid.Row="0" Grid.Column="7" Style="{StaticResource LabelStyle}" Text="Last Name" />

                <TextBox Grid.Row="1" Grid.Column="1" x:Name="id" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" IsReadOnly="True"/>
                <TextBox Grid.Row="1" Grid.Column="5" x:Name="firstName" HorizontalAlignment="Stretch"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <TextBox Grid.Row="1" Grid.Column="7" x:Name="lastName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" />
                <ComboBox Grid.Row="1" Grid.Column="3" x:Name="title" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  FontSize="20">
                    <ComboBoxItem Content="Mr"/>
                    <ComboBoxItem Content="Mrs"/>
                    <ComboBoxItem Content="Ms"/>
                    <ComboBoxItem Content="Miss"/>
                </ComboBox>

                <TextBlock Grid.Row="3" Grid.Column="1" Style="{StaticResource LabelStyle}" Text="Email" />
                <TextBox Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="3" x:Name="email" HorizontalAlignment="Left"  TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="400" FontSize="20"/>
                <TextBlock Grid.Row="5" Grid.Column="1" Style="{StaticResource LabelStyle}" Text="phone"/>
                <TextBox Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="3" x:Name="phone" HorizontalAlignment="Left"   TextWrapping="Wrap" Text="" VerticalAlignment="Center" Width="200" FontSize="20"/>

            </Grid>
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="TabularLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="660"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="customersTabularView.Visibility" Value="Visible"/>
                        <Setter Target="customerColumnarView.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="ColumnarLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="customersTabularView.Visibility" Value="Collapsed"/>
                        <Setter Target="customerColumnarView.Visibility" Value="Visible"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    
</Page>

运行效果如图：（图片是我随便找的灵梦的图，就作为背景图，无所谓的）

竖向的：

横向的（全屏的）：

visual C#（二十五）实现UWP应用的用户界面

文章目录

25.1 UWP应用的特点

25.2 使用空白模板构建UWP应用

25.2.1 实现可伸缩的用户界面

用Grid控件实现表格布局

用可视状态管理器调整布局

25.2.2 向用户界面应用样式

CORS error 但是 status code 是200 OK

压缩上传的GPU数据的方案

使用skopeo同步镜像

pygame實現貪喫蛇小遊戲

算法導論（5）貪心算法

visual C#（二十六）在UWP應用中顯示和搜索數據

OpenGL學習（七）攝像機

OpenGL學習（六）座標系統

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結