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 向用戶界面應用樣式

SQL優化-20231016

pygame實現貪喫蛇小遊戲

算法導論（5）貪心算法

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

OpenGL學習（七）攝像機

OpenGL學習（六）座標系統

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

linux以太網驅動總結