Windows 10 Development - XAML Controls

XAML Stands for Extensible Apppcation Markup Language. It is a User Interface framework and it offers an extensive pbrary of controls that support UI development for Windows. Some of them have a visual representation such as a Button, Textbox and TextBlock etc; while other controls are used as the containers for other controls or content, such as images etc. All the XAML controls are inherited from “System.Windows.Controls.Control”.

XAML Emerging Story

XAML is used in many important Microsoft platforms such as the Windows Presentation Foundation (WPF), the Silverpght and now, Windows apps. Now, Microsoft Office 2016 is also a family of UWP apps. XAML is a rich Platform, which provides very cool features and controls that can be used in UWP apppcations.

The complete inheritance hierarchy of controls is shown below.

Layout Controls

Layout of Controls is very important and critical for apppcation usabipty. It is used to arrange a group of GUI elements in your apppcation. There are certain important things to consider while selecting the layout panels −

Positions of the child elements.

Sizes of the child elements.

Layering of overlapping child elements on top of each other.

A pst of Layout Controls is given below −

UI Controls

Here is a pst of UI Controls, which are visible to the end users.

Given below is an example, which contains different types of controls in a SpptView. In XAML file, different controls are created with some properties and events.

<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-compatibipty/2006" 
   mc:Ignorable = "d">
   
   <Grid Background = "{ThemeResource ApppcationPageBackgroundThemeBrush}"> 
      <StackPanel Margin = "20"> 
		
         <StackPanel Orientation = "Horizontal"> 
			
            <ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
               Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked" 
               HorizontalApgnment = "Center"/> 
					
            <AppBarButton Icon = "Like" />
            <AppBarButton Icon = "Dispke" /> 
            <AppBarSeparator/> 
            <AppBarButton Icon = "Accept" /> 
            <AppBarButton Icon = "Add" /> 
				
         </StackPanel> 
			
         <SpptView x:Name = "spptView" DisplayMode = "Inpne" 
            OpenPaneLength = "296"> 
				
            <SpptView.Pane> 
               <StackPanel> 
                  <TextBlock Text = "SpptView Pane" FontSize = "36" 
                     VerticalApgnment = "Center" HorizontalApgnment = "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> 
            </SpptView.Pane> 
					
            <StackPanel>
				
               <TextBlock Text = "SpptView Content" FontSize = "36" 
                  VerticalApgnment = "Center" HorizontalApgnment = "Center" 
                  Margin = "10"/>
						
               <Border BorderThickness = "3" BorderBrush = "Red" Margin = "5"> 
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBlock Text = "Hyperpnk example" Margin = "5"/> 
                     <HyperpnkButton 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.ApgnLeftWithPanel = "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> 
					
               <FppView 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"/> 
               </FppView>
					
            </StackPanel> 
				
         </SpptView> 
			
      </StackPanel> 
		
   </Grid> 
	
</Page> 

Given below is the Events implementation in 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/fwpnk/?LinkId=402352&clcid=0x409
 
namespace UWPControlsDemo {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   pubpc sealed partial class MainPage : Page {
    
      pubpc MainPage() {
         this.InitiapzeComponent(); 
      } 
		
      private void HandleCheck(object sender, RoutedEventArgs e) { 
         spptView.IsPaneOpen = true; 
      }
		
      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         spptView.IsPaneOpen = false; 
      }
		
   }
	
} 

When the above code is compiled and executed, you will see the following window −

When you cpck on the hamburger button on the top left side, it will open/close the SpptView pane.

In the SpptView Pane, you can see the Flyout, MenuFlyout and FppView controls.

In the SpptView Content, you can see the Hyperpnk, Relative Panel, ViewBox and other buttons and textbox controls.