Frequently used properties of the Border element:

• Width
• Height
• BorderBrush
• BorderThickness
• Background - background color
• CornerRadius - used to round the border corners
• Padding - used to position the object inside the Border

Comparison of the Border and the Rectangle's properties:

Example: A border with rounded corners:

<Page x:Class="TestApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
    <Page.Resources>
        <Style x:Key="CustomBorder" TargetType="Border">
            <Setter Property="Background" Value="AliceBlue"/>
            <Setter Property="Margin" Value="8"/>
            <Setter Property="Padding" Value="4"/>
            <Setter Property="BorderBrush" Value="SteelBlue"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="CornerRadius" Value="6"/>
            <Setter Property="UseLayoutRounding" Value="True"/>
        </Style>
    </Page.Resources>
 
    <Grid>
        <StackPanel>
            <Border Style="{StaticResource CustomBorder}">
                <StackPanel>
                    <TextBlock Text="Text 1" HorizontalAlignment="Center"></TextBlock>
                    <TextBlock Text="Text 2" HorizontalAlignment="Center"></TextBlock>
                </StackPanel>
            </Border>
        </StackPanel>
    </Grid>

In Windows 10 the following elements have their own Border properties (BorderBrush, BorderThickness, CornerRadius, and Padding):

• ContentPresenter
• Grid
• StackPanel

Example: A Rectangle used in a DataTemplate:

<Grid Background="Beige" Width="300" Height="300">
    <ItemsControl>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Width="100" Height="50" Margin="10">
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding}" />
                    </Rectangle.Fill>
                </Rectangle>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
 
        <Color>Blue</Color>
        <Color>Red</Color>
        <Color>Green</Color>
        <Color>Magenta</Color>
    </ItemsControl>
</Grid>

The Viewbox element automatically scales its content to fill the available space.

The following Viewbox has streching disabled. The child Canvas element looks the same as without the Viewbox:

<Viewbox Stretch="None">
    <Canvas Width="18" Height="18" VerticalAlignment="Center">
        <Ellipse Canvas.Left="0" Canvas.Top="0" Width="18" Height="18" Fill="GreenYellow" Stroke="Navy" />
        <Ellipse Canvas.Left="2" Canvas.Top="2" Width="14" Height="14" Fill="GreenYellow" Stroke="Navy" />
        <Ellipse Canvas.Left="7" Canvas.Top="4" Width="4" Height="10" Fill="Tomato" />
        <Ellipse Canvas.Left="4" Canvas.Top="7" Width="10" Height="4" Fill="Tomato" />
    </Canvas>
</Viewbox>

Stretch=“Uniform” (default) stretches the content to fit the space available and preserves the aspect ratio of the content:

Stretch=“Fill” stretches the content to fill the space available:

Stretch=“UniformToFill” preserves the aspect ratio and fills the space, but clips the content. Which part of the content gets clipped depends on the HorizontalAlignment and VerticalAlignment properties:

The Viewbox is frequently used to provide automatic scaling for the child element. In the following code snippet, the child element is a Bezier curve:

<Viewbox>
    <Path Stroke="{StaticResource ApplicationForegroundThemeBrush}"
          StrokeThickness="24"
          StrokeDashArray="0 1.5"
          StrokeDashCap="Round"
          Data="M 100   0
                C  45   0,   0  45, 0 100
                S  45 200, 100 200
                S 200 150, 250 100
                S 345   0, 400   0
                S 500  45, 500 100
                S 455 200, 400 200
                S 300 150, 250 100
                S 155   0, 100   0" />
</Viewbox>

In Windows 10 the Glyphs element has the IsColorFontEnabled and ColorFontPalleteIndex properties to support color fonts. When you use ColorFontPalleteIndex for color palette switching, a single icon can be rendered with different color sets; for example, to show an enabled and disabled version of the icon.

<Glyphs FontUri="ms-appx:///Assets/seguiemj.ttf" 
        FontRenderingEmSize="40" 
        Indices="300;301;305;318;500;501;506" 
        IsColorFontEnabled="True" 
        Fill="Blue" />

Shapes derive from the Shape class. The shapes are located in the Windows.UI.Xaml.Shapes namespace.

Shape classes:

• Line
• Polyline - Defines the Points property of type PointCollection. It is frequently used to define curves using parametric formulas.
• Polygon
• Path - Defines the Data property of type Geometry. It is used to draw arcs, cubic Bezier splines, and quadratic Bezier splines.
• Rectangle
• Ellipse

Helper classes and structures:

• Windows.Foundation.Point
• Windows.UI.Xaml.Media.PointCollection
• Windows.UI.Xaml.Media.Geometry - The Geometry object defines lines and curves.
• Windows.UI.Xaml.Media.PathGeometry - Derives from Geometry. It has the content property Figures which is a collection of PathFigure objects.
• Windows.UI.Xaml.Media.PathFigure - It has the content property Segments which is a collection of PathSegment objects.

Classes that derive from the PathSegment class:

• LineSegment
• PolylineSegment
• BezierSegment
• PolyBezierSegment
• QuadraticBezierSegment
• PolyQuadraticBezierSegment
• ArcSegment

Shapes in Blend:

• You can convert any shape (a rectangle, an ellipse, etc.) to a path: right-click > Path > Convert to Path. The format of the paths is SVG.
• You can also combine shapes. The shapes are translated to paths.

Example: Examples of Ellipse:

<!-- draw a circle; keep the aspect ratio; show the entire circle -->
<Ellipse Stroke="Red"
         StrokeThickness="10"
         Fill="Blue"
         Stretch="Uniform" />
 
<!-- draw a circle; keep the aspect ratio; fill out the container; show the bottom part of the circle -->
<Ellipse Stroke="Red"
         StrokeThickness="10"
         Fill="Blue"
         Stretch="UniformToFill"
         VerticalAlignment="Bottom" />

<!-- 
The stroke is defined as a rounded 0-units long dash. Only dash caps are rendered.
In effect the dash looks like a dot. 
-->
<Ellipse Stroke="Red"
         StrokeDashCap="Round"
         StrokeDashArray="0 4" /> <!-- 0-units dash followed by a gap four units long -->

The EllipseGeometry element has the Center property unlike the Ellipse element which does not have it:

<Path Fill="Blue">
    <Path.Data>
        <EllipseGeometry RadiusX="24" RadiusY="24" />
    </Path.Data>
</Path>

Example: Examples of Polyline:

<Polyline Stroke="Red" 
          StrokeThickness="1" 
          HorizontalAlignment="Center"
          Stretch="Uniform">
          <Polyline.Stroke>  
              <!-- 
              Maintain the aspect ratio by setting Stretch="UniformToFill". The default value is Fill.
              This may crop the image. AlignmentY and AlignmentX control which part of the image is cropped.
              -->
              <ImageBrush ImageSource="..." Stretch="UniformToFill" AlignmentY="Top" />
          </Polyline.Stroke>  
</Polyline>

<Polyline x:Name="Polyline1"
          Stroke="#FF808080"
          StrokeThickness="3"
          Points="0,0" />

// Polyline1 is a Polyline element defined in XAML
// x and y are coordinates of a new point added to the polyline
Polyline1.Points.Add(new Point(x, y));

Example: An example of PathGeometry:

<StackPanel>
    <Path Stroke="Blue" StrokeThickness="5" StrokeLineJoin="Round">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,0">
                    <LineSegment Point="0,100" />
                    <LineSegment Point="50,100" />
                    <LineSegment Point="50,0" />
                </PathFigure>
 
                <PathFigure StartPoint="100,0">
                    <BezierSegment Point1="90,140" Point2="160,140" Point3="150,0" />
                </PathFigure>
 
                <PathFigure StartPoint="200,100">
                    <ArcSegment Size="10,8" Point="200,10" IsLargeArc="True" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
 
    <!-- Path Markup Syntax -->
    <Path Stroke="Green" StrokeThickness="5" StrokeLineJoin="Round" 
            Data="M 0 0 L 0 100 L 50 100 L 50 0
                  M 100 0 C 90 140, 160 140, 150 0
                  M 200 100 A 10 8 0 1 0 200 10"/>
</StackPanel>

Path markup syntax:

• M - move (the starting point)
• L - a polyline (one or more points)
• C - a cubic Bezier curve (control points and an end point)
• A - an arc: A hr vr rt la sd ep
  • hr - the horizontal radius of an ellipse
  • vr - the vertical radius of an ellipse
  • rt - a number of degrees the ellipse is rotated
  • la - IsLargeArc property (true or false)
  • sd - the sweep direction property (true or false)
  • ep - the end point

The Thumb control provides rudimentary touch functionality.

• Thumb is defined in Windows.UI.Xaml.Controls.Primitives
• It is a building block for the Slider and Scrollbar
• It generates three events based on movement relative to itself: DragStarted, DragDelta, and DragCompleted

• The delegate of the Tapped event is Windows.UI.Xaml.Input.TappedEventHandler

• The argument of TappedEventHandler is TappedRoutedEventArgs. It provides:
  • the coordinates at which the tap occurred (Point pt = args.GetPosition(this))
  • an indication whether the tap came from a finger, mouse, or pen (PointerDeviceType)

• Properties that need to be set in a UIElement in order for the Tapped event to work properly:
  • IsHitTestVisible = true - You may want to set this property to false if you have multiple overlapping elements and you don't want to block touch input from reaching an underlying element
  • IsTapEnabled = true
  • Visibility = Visibility.Visible

In Windows 10 Microsoft has exposed programmability into the application title bar through the ApplicationViewTitleBar and CoreApplicationViewTitleBar classes.

• Using the ApplicationView.TitleBar property, you can set the foreground and background colors of the title bar.
• Using the ApplicationView.Title property, you can set the text that appears on the title bar.
• Using the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property, you can overlay the title bar with your content.
• Using the Window.Current.SetTitleBar(RectTitleBar) method, you can define a UIElement to serve as the custom title bar for a window. This allows you to use any part of the surface of the RectTitleBar Rectangle to move the window.