# Wisenheimer Brainstorm Wiki

### Site Tools

notes:uwp:otherelements

# Other Elements in XAML

### Border

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:

Border Rectangle
BorderBrush Stroke
BorderThickness StrokeThickness
Background Fill
Child -

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="BorderBrush" Value="SteelBlue"/>
<Setter Property="BorderThickness" Value="2"/>
<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

### Rectangle

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>

### Viewbox

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>

### Glyphs

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

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
• 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>
</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

### Thumb

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

### Tapped event

• 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

### Title bar

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.