Programming Tutorials

UWP - TextBlock Bold Text 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 bold the TextBlock text. Here we will display bold text in three TextBlock controls. That means we will render some or all text of those TextBlock texts in bold font weight. For the first TextBlock control, we will bold some text using the XAML language. And for the second TextBlock control, we will bold all of its text programmatically. For the first TextBlock control, we will use inline Run and Bold instances to bold some text. And for the second TextBlock control, we will create and app...

UWP - TextBlock Underline Text 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 underline the TextBlock text. Here we will display underlining on two TextBlock texts. For the first TextBlock control, we will underline some text using the XAML language. And for another TextBlock control, we will underline parts of its text programmatically. For the first TextBlock control, we will use inline Run and Underline instances to make some text underlined. And for the second TextBlock control, we will create and apply the Run and Underline instances programmatically. ...

UWP - Change TextBlock Background Color 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 change the TextBlock background color. Here we will wrap the TextBlock control with a Border control. Then We will set the Border control’s background color. This color will be displayed as the TextBlock control’s background color. The Border class draws a border, background, or both, around another object. The Border class Background property gets or sets the Brush that fills the background of the border which means the inner area of the border. The Border is a con...

UWP - PivotItem Header With Image & Text The Pivot class represents a control that provides quick navigation of views within an app. The UWP app developers put a Pivot control in their app screen to present groups of content that a user can swipe through. The developers should use a Pivot as the top-level control on the app screen. The following UWP app development tutorial code will demonstrate how we can show both the image and text inside a PivotItem’s header section. Here we put a Pivot control in the layout. This Pivot control shows three items. We put the items inside the Pivot using XAML UI elements. Inside each item’s header, we display both an icon and text. The PivotItem class’s Header property gets or sets the header for the PivotItem. In the Pivot items header section, we placed a StackPanel container control. And inside the StackPanel control, we added a SymbolIcon control and a TextBlock control. The SymbolIcon control allow...

UWP Pivot The Pivot class represents a control that provides quick navigation of views within an app. The UWP app developers put a Pivot control in their app screen to present groups of content that a user can swipe through. The developers should use a Pivot as the top-level control on the app screen. The following UWP app development tutorial code will demonstrate how we can use Pivot control. Here we put a Pivot control in the layout. The Pivot control shows three items. We put the items inside a Pivot using XAML UI elements. The Pivot control is an ItemsControl, so the Pivot can contain a collection of any type of items. Developers can populate the Pivot control with items using XAML UI elements. Or they can populate items from the Pivot ItemsSource property. The ItemsControl class’s ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property value is an object that is used to gener...

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 x:Name="StackPanel1" Margin="50" Orientation="Vertical" Background="AliceBlue" Padding="50" > <Border Width="300" Height="100" BorderBrush="Red" BorderThickness="1" HorizontalAlignment="Left" Margin="5" /> <Border ...

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 x:Name="StackPanel1" Margin="50" Orientation="Horizontal" Background="AliceBlue" Padding="50" > <Polyline Stroke="Red" StrokeThickness="5" Points="20,100,80,120,40,150,50,250" Margin="0,0,50,0" /> </StackPanel> </Page> MainPage.xaml.cs using Windows.UI.Xaml...

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 x:Name="StackPanel1" Margin="50" Orientation="Vertical" Background="AliceBlue" Padding="50" > <Line Stroke="Red" X2="400" Margin="10" /> <Line Stroke="Indigo" X1="200" X2="500" Margin="10" /...

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 x:Name="StackPanel1" Margin="50" Orientation="Horizontal" Background="AliceBlue" Padding="50" > <Polygon Fill="Red" Points="20,300,120,75,150,300,20,175" Margin="0,0,50,0" /> </StackPanel> </Page> MainPage.xaml.cs using Windows.UI.Xaml.Controls; using Windows.UI; using Windows....

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 x:Name="StackPanel1" Margin="50" Orientation="Vertical" Background="AliceBlue" Padding="50" > <Rectangle Width="300" Height="100" Fill="PaleGreen" Margin="5" /> <Rectangle Width="300" Height="100" Stroke="Bl...

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 x:Name="StackPanel1" Margin="50" Orientation="Vertical" Background="AliceBlue" Padding="50" > <Ellipse Width="200" Height="200" Fill="Orange" Stroke="Black" StrokeThickness="10" Margin="0,0,0,15" /> </StackPanel> </Page...

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 x:Name="StackPanel1" Margin="50" Orientation="Vertical" Background="Honeydew" Padding="50" > </StackPanel> </Page> MainPage.xaml.cs using Windows.UI.Xaml.Controls; using Windows.UI; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Shapes; namespace UniversalAppTutorials { public sealed partial class MainPage : Page { public MainPage() { ...

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 x:Name="stack_panel1" Margin="50" Orientation="Horizontal" Background="LightPink" Padding="50" > <ComboBox x:Name="ComboBox1" SelectionChanged="ComboBox1_SelectionChanged" Margin="0,175,0,0" /> <TextBlock x:Name="TextBlock1" Foreground="Crimson"...

UWP - Get ComboBox Selected Item The ComboBox class represents a selection control that combines a non-editable text box and a drop-down list box that allows UWP app users to select an item from a list. The ComboBox starts in a compact state and it expands to display a list of selectable items. The ComoboBox control is also known as a drop-down list. The following UWP app development tutorial code demonstrates how we can get the ComboBox selected item. Here we data bind the ComboBox control with the items of a String array. We also add a selection changed event to the ComboBox control, so we can get the selected item when the user makes a selection on the ComboBox or change the existing selection. The ItemsControl class’s ItemsSource property gets or sets an object source used to generate the content of the ItemsControl such as a ComboBox control. This property value is an Object instance that is the object that is used to generate the content o...

UWP - ListView multi-select The ListView class represents a control that displays data items in a vertical stack in a UWP app. The UWP app developers are using a ListView to display a collection of items stacked vertically or horizontally. By default, the ListView selection mode is single. But the UWP app developers can set the mode to multiple by setting the ListView class SelectionMode property. The ListViewSelectionMode enumeration value allows multi-selection or disabled selection. The ListView() constructor initializes a new instance of the ListView class. The ItemsControl class ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property lets us populate the ListView control with items from a string array. The SelectionChanged event occurs when the currently selected item changes. When the ListView selection mode is multiple, we must loop through the selected items collection to ...

UWP - ListView ItemTemplate The ListView class represents a control that displays data items in a vertical stack in a UWP app. The UWP developers are using a ListView to display a collection of items stacked vertically or horizontally. The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default. The ItemsControl class’s ItemTemplate property gets or sets the DataTemplate used to display each item. This property value is a DataTemplate instance which is the template that specifies the visualization of the data objects. The default value of the ItemTemplate property is null. So using this ItemTemplate property we can display custom-styled items in a ListView control. The DataTemplate class describes the visual structure of a data object. This class is used for data binding for specific elements in the template that display...

UWP - ListView HeaderTemplate The ListView class represents a control that displays data items in a vertical stack in a UWP app. The UWP developers are using a ListView to display a collection of items stacked vertically or horizontally. The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default. The ListViewBase class’s HeaderTemplate property gets or sets the DataTemplate used to display the content of the view header. This property value is a DataTemplate instance which is the template that specifies the visualization of the header object. The default value of this property is null. So using this HeaderTemplate property we can display a customized header for the ListView control. The DataTemplate class describes the visual structure of a data object. This class is used for data binding for specific elements in the te...

UWP - ListView Item Margin The ListView class represents a control that displays data items in a vertical stack. The UWP app developers can use ListView to display a collection of items stacked vertically or horizontally. The ListView is an ItemsControl, so the ListView can contain a collection of items of any type. To populate a ListView the UWP developers have to add items to the Items collection or set the ItemsSource property to a data source. The ListView data item is displayed as the string representation by default. The following Universal Windows Platform application development tutorial demonstrates how we can add margin to items in a ListView. Here we will add margin to all of the items in a ListView control. In the beginning, we populate an array with elements. Then we loop through the array. While looping through the array elements, we create a ListViewItem instance for each array item. We also set the ListViewItem content from the ...

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 x:Name="stack_panel1" Margin="50" Orientation="Vertical" Background="AliceBlue" Padding="25" > <ListView x:Name="ListView1" > </ListView> </StackPanel> </Page> MainPage.xaml.cs using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Text; name...

UWP - ListView Item Height The ListView class represents a control that displays data items in a vertical stack. The UWP app developers can use ListView to display a collection of items stacked vertically or horizontally. The ListView is an ItemsControl, so the ListView can contain a collection of items of any type. To populate a ListView the UWP developers have to add items to the Items collection or set the ItemsSource property to a data source. The ListView data item is displayed as the string representation by default. The following Universal Windows Platform application development tutorial demonstrates how we can set or change each item height in a ListView. Here we will also set or change each item’s maximum and minimum height in a ListView. In the beginning, we populate an array with elements. Then we loop through the array. While looping through the array elements, we create a ListViewItem instance for each array item. We also set the...

UWP - ListView Item Separator The ListView class represents a control that displays data items in a vertical stack. The UWP app developers can use ListView to display a collection of items stacked vertically or horizontally. The ListView is an ItemsControl, so the ListView can contain a collection of items of any type. To populate a ListView the UWP developers have to add items to the Items collection or set the ItemsSource property to a data source. The ListView data item is displayed as the string representation by default. The following Universal Windows Platform application development tutorial demonstrates how we can add an item separator to ListView control. Here we will put an item separator line between each item of a ListView. In this UWP tutorial code, we initialize an array with data. We loop through the array elements. Then we create a ListViewItem instance for each array item programmatically in the c# code section. We also set the ...