Programming Tutorials

MainPage.xaml <Page x:Class="UniversalAppTutorials.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UniversalAppTutorials" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" > <StackPanel Orientation="Vertical" Background="AliceBlue" Padding="50"> <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE133;" AutomationProperties.Name="CheckList" Margin="25" /> <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE707;" AutomationProperties.Name="Mappi...

UWP SplitView The SplitView class represents a container with two views. One view is for the main content and another view is typically used for navigation commands. The following UWP app development tutorial will demonstrate how we can use SplitView control in our app. The UWP app developers use a SplitView control to present two areas, one is a Pane and another one is the main Content. The developers commonly put a SplitView to create a top-level navigation user experience that adapts to different screen widths following the nav pane pattern or the master and details pattern. The SplitView’s Content area is always present and it can contain a single child element, which is normally a Panel that contains additional child elements. The Content can be completely covered by the Pane. The SplitView class’s IsPaneOpen property gets or sets a value that specifies whether the SplitView pane is expanded to its full width. This property value ...

UWP - Viewbox Stretch The Viewbox class defines a content decorator that can stretch and scale a single child to fill the available space. The following UWP application development tutorial will demonstrate how we can use Viewbox in an app. Here we mainly demonstrate the different Stretch modes of Viewbox control and their effect on child control. The Viewbox class’s Stretch property gets or sets the Stretch mode, which determines how content fits into the available space. This property value is a Stretch mode, which determines how content fits in the available space. The default value of this property is Uniform. The Stretch enum describes how content is resized to fill its allocated space. The Stretch enum available values are Fill, None, Uniform, and UniformToFill. The Stretch Fill value defines the content as resized to fill the destination dimensions. The aspect ratio is not preserved. The Stretch enum None value specifi...

UWP Viewbox The Viewbox class defines a content decorator that can stretch and scale a single child to fill the available space. The following UWP application development tutorial will demonstrate how we can use Viewbox in an app. Here we put two Viewbox controls in the app screen using XAML. We put another Viewbox control programmatically in the layout using code. The last Viewbox also holds child control. The Viewbox class’s Child property gets or sets the single child element of a Viewbox element. The Viewbox class’s Stretch property gets or sets the Stretch mode, which determines how content fits into the available space. This property value is a Stretch mode, which determines how content fits in the available space. The default value of this property is Uniform. The Stretch enum describes how content is resized to fill its allocated space. The Stretch enum available values are Fill, None, Uniform, and UniformToFill. The Stretc...

UWP - Resize SymbolIcon The SymbolIcon class represents an icon that uses a glyph from the Segoe MDL2 Assets font as its content. The SymbolIcon class’s Symbol property gets or sets the Segoe MDL2 Assets glyph used as the icon content. The following UWP application development tutorial code will demonstrate how we can use SymbolIcon in an application. Mainly we demonstrate how we can resize a SymbolIcon control. Firstly, we used the Viewbox control to resize a SymbolIcon control, we put the SymbolIcon as a child control of the Viewbox container. And secondly, we resize SysmbolIcon using the CompositeTransform class and UIElement class’s RenderTransform property. The Viewbox class defines a content decorator that can stretch and scale a single child to fill the available space. The Viewbox class’s Stretch property gets or sets the Stretch mode, which determines how content fits into the available space. The Viewbox class’s StretchDirection proper...

UWP SymbolIcon The SymbolIcon class represents an icon that uses a glyph from the Segoe MDL2 Assets font as its content. The SymbolIcon() constructor initializes a new instance of the SymbolIcon class. And the SymbolIcon(Symbol) constructor initializes a new instance of the SymbolIcon class using the specified symbol. The SymbolIcon(Symbol symbol) constructor has an argument named symbol which is a Symbol instance that is a named constant of the enumeration that specifies the Segoe MDL2 Assets glyph to use. The default value is null. So, using those constructors the UWP app developers can initialize a new SymbolIcon instance programmatically in their code. The Symbol enum defines constants that specify a glyph from the Segoe MDL2 Assets font to use as the content of a SymbolIcon. The enumeration has lots of useful values such as Attach, Back, Calculator, Calendar, Cancel, Clear, Copy, Crop, Cut and etc. The SymbolIcon class’s Symbol prop...

UWP - Add a new line to a TextBlock The TextBlock is the primary control for displaying read-only text in UWP apps. The UWP app developers can use it to display single-line or multi-line text, inline hyperlinks, and text with formatting like bold, italic, or underlined. The TextBlock is designed to display a single paragraph and it does not support text indentation. The following Universal Windows Platform application development tutorial demonstrates how we can add a new line to a TextBlock. Here we will add a new line to three TextBlock instances. We will add a new line using the XAML language to the first TextBlock control. And we will add a new line to the second TextBlock control programmatically using c# language. And we will add a new line to the third TextBlock control by using the new line character. For the first TextBlock control, we will use the inline LineBreak elements to add new lines to it. And for the second TextBlock co...