Windows 10 開發 - XAML 控制元件

XAML 代表可擴充套件應用程式標記語言 (Extensible Application Markup Language)。它是一個使用者介面框架，提供廣泛的控制元件庫，支援 Windows 的 UI 開發。其中一些控制元件具有視覺化表示，例如按鈕、文字框和文字塊等；而其他控制元件則用作其他控制元件或內容（例如影像等）的容器。所有 XAML 控制元件都繼承自“System.Windows.Controls.Control”。

XAML 新興故事

XAML 用於許多重要的 Microsoft 平臺，例如 Windows Presentation Foundation (WPF)、Silverlight，現在還包括 Windows 應用。現在，Microsoft Office 2016 也是 UWP 應用家族的一員。XAML 是一個豐富的平臺，它提供非常酷的功能和控制元件，可用於 UWP 應用程式。

下面顯示控制元件的完整繼承層次結構。

佈局控制元件

控制元件佈局對於應用程式可用性非常重要且至關重要。它用於在應用程式中排列一組 GUI 元素。選擇佈局面板時，需要考慮某些重要事項：

• 子元素的位置。
• 子元素的大小。
• 彼此重疊的子元素的分層。

下面列出了佈局控制元件：

UI 控制元件

這是一個 UI 控制元件列表，終端使用者可以看到這些控制元件。

下面是一個示例，其中包含SplitView 中不同型別的控制元件。在 XAML 檔案中，建立了具有某些屬性和事件的不同控制元件。

<Page 
   x:Class = "UWPControlsDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPControlsDemo" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Margin = "20"> 
		
         <StackPanel Orientation = "Horizontal"> 
			
            <ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
               Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked" 
               HorizontalAlignment = "Center"/> 
					
            <AppBarButton Icon = "Like" />
            <AppBarButton Icon = "Dislike" /> 
            <AppBarSeparator/> 
            <AppBarButton Icon = "Accept" /> 
            <AppBarButton Icon = "Add" /> 
				
         </StackPanel> 
			
         <SplitView x:Name = "splitView" DisplayMode = "Inline" 
            OpenPaneLength = "296"> 
				
            <SplitView.Pane> 
               <StackPanel> 
                  <TextBlock Text = "SplitView Pane" FontSize = "36" 
                     VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                     Margin = "10"/> 
							
                  <Button Content = "Options" Margin = "10"> 
						
                     <Button.Flyout> 
                        <MenuFlyout> 
                           <MenuFlyoutItem Text = "Reset"/> 
                           <MenuFlyoutSeparator/> 
                           <MenuFlyoutItem Text = "Repeat"/> 
                           <MenuFlyoutItem Text = "Shuffle"/> 
                        </MenuFlyout> 
                     </Button.Flyout> 
							
                  </Button> 
						
               </StackPanel> 
            </SplitView.Pane> 
					
            <StackPanel>
				
               <TextBlock Text = "SplitView Content" FontSize = "36" 
                  VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                  Margin = "10"/>
						
               <Border BorderThickness = "3" BorderBrush = "Red" Margin = "5"> 
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBlock Text = "Hyperlink example" Margin = "5"/> 
                     <HyperlinkButton Content = "www.microsoft.com" 
                        NavigateUri = "http://www.microsoft.com"/> 
                  </StackPanel> 
               </Border> 
					
               <RelativePanel BorderBrush = "Red" BorderThickness = "2"  
                  CornerRadius = "10" Padding = "12" Margin = "5"> 
						
                  <TextBlock x:Name = "txt" Text = "Relative Panel example" 
                     RelativePanel.AlignLeftWithPanel = "True" 
                     Margin = "5,0,0,0"/> 
							
                  <TextBox x:Name = "textBox1" RelativePanel.RightOf = "btn" 
                     Margin = "5,0,0,0"/> 
							
                  <Button x:Name = "btn" Content = "Name"  
                     RelativePanel.RightOf = "txt" Margin = "5,0,0,0"/> 
							
               </RelativePanel> 
					
               <FlipView Height = "400" Margin = "10" Width = "400"> 
                  <Image Source = "Images/DSC_0104.JPG"/> 
                  <Image Source = "Images/DSC_0080.JPG"/> 
                  <Image Source = "Images/DSC_0076.JPG"/> 
                  <Image Source = "Images/thGTF7BWGW.jpg"/> 
               </FlipView>
					
            </StackPanel> 
				
         </SplitView> 
			
      </StackPanel> 
		
   </Grid> 
	
</Page> 

下面是 C# 中的事件實現。

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
namespace UWPControlsDemo {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
    
      public MainPage() {
         this.InitializeComponent(); 
      } 
		
      private void HandleCheck(object sender, RoutedEventArgs e) { 
         splitView.IsPaneOpen = true; 
      }
		
      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         splitView.IsPaneOpen = false; 
      }
		
   }
	
} 

編譯並執行上述程式碼後，您將看到以下視窗：

單擊左上角的漢堡按鈕，將開啟/關閉SplitView 面板。

在SplitView 面板中，您可以看到Flyout、MenuFlyout 和FlipView 控制元件。

在SplitView 內容中，您可以看到超連結、相對面板、ViewBox 和其他按鈕和文字框控制元件。