Frequently used properties of the Border element:
Comparison of the Border and the Rectangle's properties:
Border | Rectangle |
---|---|
BorderBrush | Stroke |
BorderThickness | StrokeThickness |
Background | Fill |
CornerRadius | RadiusX / RadiusY |
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="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):
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:
Helper classes and structures:
Classes that derive from the PathSegment class:
Shapes in Blend:
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:
The Thumb control provides rudimentary touch functionality.
In Windows 10 Microsoft has exposed programmability into the application title bar through the ApplicationViewTitleBar and CoreApplicationViewTitleBar classes.