UWP - How to bold text in a TextBlock

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 apply the Run and Bold instances programmatically. In the third TextBlock, we will use the TextBlock class FontWeight property to make the TextBlock all text to bold font weight.

The Run class represents a discrete section of formatted or unformatted text. The UWP developers can use a Run instance in a TextBlock or RichTextBlock. The UWP app developers can even place multiple Run elements inside a Span. The UWP developers should typically use the Run element only when they want to format a discrete section of text within the TextBlock.

The Run class Text property gets or sets the text contents of the Run.

The Bold class provides an inline-level content element that causes content to render with a bold font weight.

The Bold class Inlines property gets an InlineCollection containing the top-level inline elements that include the contents of Span. This property is inherited from Span.

The TextBlock class Inlines property gets the collection of inline text elements within a TextBlock. This property value is an InlineCollectionwhich is a collection that holds all inline text elements from the TextBlock. The default value of this property is an empty collection.

The TextBlock class FontWeight property gets or sets the top-level font weight for the TextBlock. This property value is a FontWeight which is the requested font-weight, which is a FontWeight that is obtained from one of the FontWeights property values.

The default value is Normal. The FontWeight structure describes the density of a typeface, in terms of the lightness or heaviness of the strokes. Here we will set this property value to Bold to display bold text in a TextBlock control.

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 Background="DarkBlue" Margin="10">
            <TextBlock
                x:Name="TextBlock1"
                Margin="50"
                TextWrapping="Wrap"
                FontSize="25"
                Foreground="White"
                FontFamily="Consolas"
                >
                <Bold>
                    <Run>
                        This is a bold text.
                    </Run>
                </Bold>
                <Run>
                    This is non bold text.
                </Run>
            </TextBlock>
        </Border>
        <Border Background="Crimson" Margin="10">
            <TextBlock
                x:Name="TextBlock2"
                Margin="50"
                FontSize="30"
                TextWrapping="Wrap"
                FontFamily="MV Boli"
                Text="Second TextBlock. "
                Foreground="Snow"
                />
        </Border>
        <Border Background="Purple" Margin="10">
            <TextBlock
                x:Name="TextBlock3"
                Margin="50"
                FontSize="30"
                TextWrapping="Wrap"
                Text="All are bold text on a TextBlock. "
                Foreground="Snow"
                FontWeight="Bold"
                />
        </Border>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new Bold instance
            Bold bold = new Bold();

            // Initialize a new Run instance
            Run run = new Run();

            // Set the text for run
            run.Text = "This is programmatically bold text.";

            // Add the Run to Bold
            bold.Inlines.Add(run);

            // Finally, show the bold text on second text block
            TextBlock2.Inlines.Add(bold);
        }
    }
}

UWP - How to underline text in a TextBlock

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.

The Run class represents a discrete section of formatted or unformatted text. The UWP developers can use a Run instance in a TextBlock or RichTextBlock. The UWP app developers even can place multiple Run elements inside of a Span. The UWP developers should typically use the Run element only when they want to format a discrete section of text within the TextBlock.

The Run class Text property gets or sets the text contents of the Run.

The Underline class provides an inline-level content element that causes content to render with an underlined text decoration.

The Underline class Inlines property gets an InlineCollection containing the top-level inline elements that include the contents of Span. This property is inherited from Span.

The TextBlock class Inlines property gets the collection of inline text elements within a TextBlock. This property value is an InlineCollectionwhich is a collection that holds all inline text elements from the TextBlock. The default value of this property is an empty collection.

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 Background="PaleGreen">
            <TextBlock
                x:Name="TextBlock1"
                Margin="50"
                TextWrapping="Wrap"
                FontSize="25"
                >
                <Underline>
                    <Run>
                        This is a underlined text.
                    </Run>
                </Underline>
                <Run>
                    Non underlined text.
                </Run>
            </TextBlock>
        </Border>
        <Border Background="Peru">
            <TextBlock
                x:Name="TextBlock2"
                Margin="50"
                FontSize="30"
                TextWrapping="Wrap"
                FontFamily="MV Boli"
                Text="Second TextBlock. "
                />
        </Border>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new Underline instance
            Underline underline = new Underline();

            // Initialize a new Run instance
            Run run = new Run();

            // Set the text for run
            run.Text = "This is programmatically underlined text.";

            // Add the Run to Underline
            underline.Inlines.Add(run);

            // Finally, show the underlined text on second text block
            TextBlock2.Inlines.Add(underline);
        }
    }
}

UWP - How to change TextBlock background color

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 container control that draws a border, background, or both, around another object. So we can draw a background color to a TextBlock control by wrapping the TextBlock control with a Border and setting a background color to this Border control.

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"
        >
        <!-- Put TextBlock inside a Border and change the Border background color -->
        <Border Background="Red">
            <TextBlock
                Text="This is a sample text block."
                Margin="50"
                />
        </Border>
        <Border Background="Green">
            <TextBlock
                Text="This is another text block."
                Margin="50"
                />
        </Border>
        <Border Background="Blue">
            <TextBlock
                Text="This is another sample text block."
                Margin="50"
                />
        </Border>
    </StackPanel>
</Page>

UWP - PivotItem header with image and text

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 allows us to display an icon and the TextBlock control can show simple text. As a result, our Pivot controls show both the icon and text inside each item’s header.

The SymbolIcon class represents an icon that uses a glyph from the Segoe MDL2 Assets font as its content.

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.

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"
        >
        <Pivot x:Name="Pivot1" Title="Pivot Example" 
               Background="LightPink" Padding="0,0,0,15">
            <PivotItem Background="LightSkyBlue">
                <PivotItem.Header>
                    <StackPanel>
                        <SymbolIcon Symbol="Attach"/>
                        <TextBlock Text="Attach"/>
                    </StackPanel>
                </PivotItem.Header>
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock
                        Text="Pivot Item 1 : Attach"
                        Margin="10"
                        />
                    <Viewbox MaxHeight="200" MaxWidth="200">
                        <SymbolIcon Symbol="Attach"/>
                    </Viewbox>
                </StackPanel>
            </PivotItem>
            <PivotItem Background="Bisque">
                <PivotItem.Header>
                    <StackPanel Orientation="Vertical">
                        <SymbolIcon Symbol="Delete"/>
                        <TextBlock Text="Delete"/>
                    </StackPanel>
                </PivotItem.Header>
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock
                        Text="Pivot Item 2: Delete"
                        Margin="10"
                        />
                    <Viewbox MaxWidth="200" MaxHeight="200">
                        <SymbolIcon Symbol="Delete"/>
                    </Viewbox>
                </StackPanel>
            </PivotItem>
            <PivotItem Background="LightSteelBlue">
                <PivotItem.Header>
                    <StackPanel Orientation="Vertical">
                        <SymbolIcon Symbol="Calculator"/>
                        <TextBlock Text="Calculator"/>
                    </StackPanel>
                </PivotItem.Header>
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock
                        Text="Pivot Item 3 : Calculator"
                        Margin="10"
                        />
                    <Viewbox MaxWidth="200" MaxHeight="200">
                        <SymbolIcon Symbol="Calculator"/>
                    </Viewbox>
                </StackPanel>
            </PivotItem>
        </Pivot>
    </StackPanel>
</Page>

UWP - How to use Pivot

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 generate the content of the ItemsControl such as a Pivot control. The default value is null.

The PivotItem class represents the container for an item in a Pivot control. The Pivot class’s SelectedItem property gets or sets the currently selected item in the Pivot. And the SelectedIndex property gets or sets the zero-based index of the currently selected item in the Pivot control.

The Pivot class’s LeftHeader property gets or sets the content for the header on the Pivot control's left side. And the RightHeader property gets or sets the content for the header on the Pivot control's right side.

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"
        >
        <Pivot x:Name="Pivot1" Title="Simple Pivot" Background="PaleVioletRed" Padding="0,0,0,15">
            <PivotItem Header="Rectangle" Background="Pink">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 1 : Rectangle"
                        Margin="0,0,0,15"
                    />
                    <Rectangle
                        Width="400"
                        Height="200"
                        Fill="Crimson"
                    />
                </StackPanel>
            </PivotItem>
            <PivotItem Header="Ellipse" Background="Orange">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 2 : Ellipse"
                        Margin="0,0,0,15"
                    />
                    <Ellipse
                        Width="400"
                        Height="200"
                        Fill="Blue"
                    />
                </StackPanel>
            </PivotItem>
            <PivotItem Header="Border" Background="CornflowerBlue">
                <StackPanel Orientation="Vertical" Padding="50">
                    <TextBlock 
                        Text="Pivot Item 3 : Border"
                        Margin="0,0,0,15"
                    />
                    <Border
                        Width="400"
                        Height="200"
                        BorderBrush="Snow"
                        BorderThickness="5"                        
                    />
                </StackPanel>
            </PivotItem>
        </Pivot>
    </StackPanel>
</Page>

UWP - Border example

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
            Width="400"
            Height="150"
            BorderBrush="SeaGreen"
            BorderThickness="2"
            CornerRadius="20,15,10,5"
            HorizontalAlignment="Left"
            Margin="5"
            />
        <Border
            Width="300"
            Height="100"
            BorderBrush="Orchid"
            BorderThickness="5"
            CornerRadius="25"
            HorizontalAlignment="Left"
            Margin="5"
            />
        <Border
            Width="250"
            Height="200"
            BorderBrush="Crimson"
            BorderThickness="10"
            HorizontalAlignment="Left"
            Margin="5"
            Background="Aqua"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Create a Border programmatically
            CreateBorder();
        }

        private void CreateBorder()
        {
            // Initialize a new Border
            Border border = new Border();

            // Set border brush/color
            border.BorderBrush = new SolidColorBrush(Colors.Blue);

            // Set border thickness
            border.BorderThickness = new Thickness(3);

            // Set border width and height
            border.Width = 300;
            border.Height = 100;

            // Set border horizontal alignment
            border.HorizontalAlignment = HorizontalAlignment.Left;

            // Finally, add the border to layout
            StackPanel1.Children.Add(border);
        }
    }
}

UWP - Polyline example

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.Controls;
using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
using Windows.Foundation;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Create a Polyline
            CreatePolyline();
        }

        private void CreatePolyline()
        {
            // Initialize a new Polyline instance
            Polyline polyline = new Polyline();

            // Set polyline color
            polyline.Stroke = new SolidColorBrush(Colors.Black);

            // Set polyline width/thickness
            polyline.StrokeThickness = 10;

            // Initialize a point collection
            var points = new PointCollection();
            points.Add(new Point(20, 100));
            points.Add(new Point(35, 150));
            points.Add(new Point(60, 200));
            points.Add(new Point(90, 250));
            points.Add(new Point(40, 300));

            // Set polyline points
            polyline.Points = points;

            // Finally, add the polyline to layout
            StackPanel1.Children.Add(polyline);
        }
    }
}

UWP - Line example

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"
            />
        <Line
            Stroke="DarkBlue"
            X2="350"
            Margin="10"
            StrokeThickness="5"
            />
        <Line
            Stroke="HotPink"
            StrokeThickness="7"
            StrokeDashOffset="5"
            StrokeDashArray="1,2,3"
            X2="500"
            Margin="20"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
using Windows.UI.Xaml;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Create a line
            CreateLine();
        }

        private void CreateLine()
        {
            // Initialize a new line instance
            Line line = new Line();

            // Set line X2
            line.X2 = 450;

            // Set line color
            line.Stroke = new SolidColorBrush(Colors.Black);

            // Set line width/thickness
            line.StrokeThickness = 10;

            // Add margin to the line
            line.Margin = new Thickness(10, 10, 10, 0);

            // Finally, add the line to layout
            StackPanel1.Children.Add(line);
        }
    }
}

UWP - Polygon example

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.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
using Windows.Foundation;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Create a polygon
            CreatePolygon();
        }

        private void CreatePolygon()
        {
            // Initialize a new polygon instance
            Polygon polygon = new Polygon();

            // Fill the polygon with a solid color
            polygon.Fill = new SolidColorBrush(Colors.Blue);

            // Initialize a new point collection
            var points = new PointCollection();
            points.Add(new Point(20, 120));
            points.Add(new Point(120, 180));
            points.Add(new Point(80, 200));
            points.Add(new Point(20, 340));

            // Set polygon points
            polygon.Points = points;

            // Finally, add the polygon to layout
            StackPanel1.Children.Add(polygon);
        }
    }
}

UWP - Rectangle example

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="Black"
            StrokeThickness="5"
            Margin="5"
            />
        <Rectangle
            Width="300"
            Height="100"
            Fill="Crimson"
            Stroke="Yellow"
            StrokeThickness="3"
            Margin="5"
            />
        <Rectangle
            Width="300"
            Height="100"
            Fill="Pink"
            Stroke="CadetBlue"
            StrokeThickness="2"
            Margin="5"
            RadiusX="50"
            RadiusY="50"
            />
        <Rectangle
            Width="300"
            Height="100"
            Fill="Honeydew"
            Stroke="BlueViolet"
            StrokeThickness="5"
            Margin="5"
            RadiusX="10"
            RadiusY="45"
            />
    </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()
        {
            this.InitializeComponent();

            // Create a rectangle
            CreateRectangle();
        }

        private void CreateRectangle()
        {
            // Initialize a new rectangle instance
            Rectangle rectangle = new Rectangle();

            // Set the rectangle height and width
            rectangle.Height = 100;
            rectangle.Width = 300;

            // Fill the rectangle with a solid color
            rectangle.Fill = new SolidColorBrush(Colors.Blue);

            // Set the rectangle border color
            rectangle.Stroke = new SolidColorBrush(Colors.LightSeaGreen);

            // Set rectangle border thickness/width
            rectangle.StrokeThickness = 5;

            // Finally, add the rectangle to layout
            StackPanel1.Children.Add(rectangle);
        }
    }
}

UWP - Add border to an Ellipse

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.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()
        {
            this.InitializeComponent();

            // Create an ellipse
            CreateEllipse();
        }

        private void CreateEllipse()
        {
            // Initialize a new ellipse instance
            Ellipse ellipse = new Ellipse();

            // Set the ellipse height and width
            ellipse.Height = 250;
            ellipse.Width = 250;

            // Fill the ellipse with a solid color
            ellipse.Fill = new SolidColorBrush(Colors.BlueViolet);

            // Set the ellipse border color
            ellipse.Stroke = new SolidColorBrush(Colors.Red);

            // Set ellipse border thickness/width
            ellipse.StrokeThickness = 5;

            // Finally, add the ellipse to layout
            StackPanel1.Children.Add(ellipse);
        }
    }
}

UWP - Create an Ellipse programmatically

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()
        {
            this.InitializeComponent();

            // Create an ellipse
            CreateEllipse();
        }

        private void CreateEllipse()
        {
            // Initialize a new ellipse instance
            Ellipse ellipse = new Ellipse();

            // Set the ellipse height and width
            ellipse.Height = 250;
            ellipse.Width = 250;

            // Fill the ellipse with a solid color
            ellipse.Fill = new SolidColorBrush(Colors.Crimson);

            // Finally, add the ellipse to layout
            StackPanel1.Children.Add(ellipse);
        }
    }
}

UWP - ComboBox alternate item color

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"
            FontFamily="Calibri"
            FontSize="25"
            Text="Select a color from ComboBox."
            TextWrapping="WrapWholeWords"
            Margin="150,175,0,0"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml;
using Windows.UI.Text;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Blue",
                "Yellow",
                "Snow",
                "Gold",
                "Forest Green",
                "Medium Sea Green"
            };

            // Get the ComboBox item collection
            ItemCollection ic = ComboBox1.Items;

            // Loop through the array elements
            for (int index = 0; index < colors.Length; index++) {
                // Initialize a new ComboBoxItem instance
                ComboBoxItem item = new ComboBoxItem();

                // Set item padding
                item.Padding = new Thickness(10,5,10,5);

                // Set item font size
                item.FontSize = 20;

                // Set the item content
                item.Content = colors[index];

                // Set item font
                item.FontFamily = new FontFamily("MV Boli");
                item.FontWeight = FontWeights.Bold;
                item.Foreground = new SolidColorBrush(Colors.Black);

                if (index % 2 == 0)
                {
                    // Set rugular item style
                    item.Background = new SolidColorBrush(Colors.SeaGreen);
                }
                else {
                    // Set alternate item style
                    item.Background = new SolidColorBrush(Colors.MediumSeaGreen);
                }

                // Add the item to item collection
                ic.Add(item);
            }
        }

        private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the instance of ComboBox
            ComboBox comboBox = sender as ComboBox;

            // Get the ComboBox selected item
            ComboBoxItem item = (ComboBoxItem)comboBox.SelectedItem;

            // Get the ComboBox selected item text
            string selectedItemText = item.Content.ToString();

            // Finally, display the ComboBox selected item text to text block
            TextBlock1.Text = "Selected : " + selectedItemText;
        }
    }
}

UWP - How to get ComboBox selected item

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 of the ItemsControl. The default value of this property is null. So we can data bind the ComboBox control with a String array using this ItemsSource property.

The Selector class’s SelectionChanged event occurs when the currently selected item changes. And the Selector class’s SelectedItem property gets or sets the selected item. This property value is an Object instance that is the selected item. The default value of this property is null. So using the SelectionChanged event and SelectedItem property we can get the ComboBox selected item at runtime.

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="AliceBlue"
        Padding="50"
        >
        <ComboBox 
            x:Name="ComboBox1"
            SelectionChanged="ComboBox1_SelectionChanged"
            Margin="0,100,0,0"
            />
        <TextBlock
            x:Name="TextBlock1"
            Foreground="Crimson"
            FontFamily="MV Boli"
            FontSize="25"
            Text="Select a color from ComboBox."
            TextWrapping="WrapWholeWords"
            Margin="100,100,0,0"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Blue",
                "Yellow",
                "Snow",
                "Gold",
                "Forest Green",
                "Medium Sea Green"
            };

            // Specify the ComboBox item source
            ComboBox1.ItemsSource = colors;
        }

        private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the instance of ComboBox
            ComboBox comboBox = sender as ComboBox;

            // Get the ComboBox selected item text
            string selectedItems = comboBox.SelectedItem.ToString();

            // Finally, display the ComboBox selected item text to text block
            TextBlock1.Text = "Selected : " + selectedItems;
        }
    }
}

UWP - ListView multi select example

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 get them all. The ListViewBase class’s SelectedItems property gets the currently selected items. This property value is an IList which is a collection of the currently selected items. The default value of this property is an empty collection. So, utilizing this property we can get the ListView controls selected items.

The following UWP app development tutorial demonstrates how we can allow the user to select multiple items from a ListView control. Here we data bind the ListView control with a String array. And set a selection change event for the ListView control. As a result, when the user makes changes to the ListView items selection the SelectionChanged event occurs and we can get the user’s selected item or items programmatically.

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="50"
        >
        <TextBlock
            x:Name="TextBlock1"
            Foreground="Crimson"
            FontFamily="MV Boli"
            FontSize="25"
            Text="Select item(s) from ListView."
            TextWrapping="WrapWholeWords"
            Margin="5,5,5,25"
            />
        <ListView 
            x:Name="ListView1"
            SelectionChanged="ListView1_SelectionChanged"
            SelectionMode="Multiple"
            />
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Blue",
                "Yellow",
                "Black",
                "Gray",
                "White",
                "Snow",
                "Gold"
            };

            // Specify the list view item source
            ListView1.ItemsSource = colors;
        }

        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the instance of ListView
            ListView listView = sender as ListView;

            // Initialize an empty string to store list view selected items
            string selectedItems = "";

            // Loop through the list view selected items
            foreach (string item in listView.SelectedItems)
            {
                // Add a comma separator
                if (selectedItems.Length > 1)
                {
                    selectedItems += ", ";
                }

                // Add the items to selected items string
                selectedItems += item;
            };

            // Finally, display the list view selected items to text block
            TextBlock1.Text = "Selected : " + selectedItems;
        }
    }
}

UWP - How to use ListView ItemTemplate

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 the data values.

The UWP app developers typically use a DataTemplate to specify the visual representation of ListView data. The DataTemplate objects are particularly useful when they are binding an ItemsControl such as a ListView to an entire collection. Here we displayed a book list in a ListView control. We used the ItemTemplate and DataTemplate to display the booklist more organized.

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 list of objects.

The following UWP app development tutorial demonstrates how we can display a ListView control’s complex items by using the ItemTemplate and DataTemplate instead of the default string representation.

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="50"
        >
        <ListView 
            x:Name="ListView1" 
            SelectionChanged="ListView1_SelectionChanged"
            >
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel 
                        Orientation="Horizontal" 
                        Margin="0"
                        BorderBrush="LightSkyBlue"
                        BorderThickness="0,0,0,2"
                        Padding="5,5,5,5"
                        >
                        <Image
                            Source="{Binding Image}"
                            Margin="10,10,20,10"
                            />
                        <StackPanel Orientation="Vertical">
                            <TextBlock
                                Text="{Binding BookName}"
                                FontWeight="Black"
                                Margin="0,30,0,0"
                                FontFamily="Calibri"
                                FontSize="17"
                                />
                            <TextBlock
                                Text="{Binding Author}"
                                FontStyle="Italic"
                                />
                            <TextBlock
                                Text="{Binding Price}"
                                Foreground="Crimson"
                                />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;
using System.Collections.Generic;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new list of books
            List<Book> books = new List<Book>();

            // Add some items to collection
            books.Add(
                new Book(
                            "Professional C# 6 and .NET Core 1.0",
                            "Christian Nagel",
                            "$60.00",
                            "Assets/professional_c_sharp_6_and_dot_ner_core_1.jpeg"
                    )
                );

            books.Add(
                new Book(
                            "Beginning ASP.NET for Visual Studio 2015",
                            "William Penberthy",
                            "$45.00",
                            "Assets/beginning_asp_dot_net_for_visual_studio_2015.jpeg"
                    )
                );

            books.Add(
                new Book(
                            "C# 24-Hour Trainer, 2nd Edition",
                            "Rod Stephens",
                            "$45.00",
                            "Assets/c_sharp_24_hour_trainer_2nd_edition.jpeg"
                    )
                );

            books.Add(
                new Book(
                            "Professional Visual Studio 2015",
                            "Bruce Johnson",
                            "$60.00",
                            "Assets/professional_visual_studio_2015.jpeg"
                    )
                );

            // Specify the list view item source
            ListView1.ItemsSource = books;
        }

        public class Book
        {
            public string BookName { get; set; }
            public string Author { get; set; }
            public string Price { get; set; }
            public string Image { get; set; }

            public Book(string bookName, string author, string price, string image)
            {
                this.BookName = bookName;
                this.Author = author;
                this.Price = price;
                this.Image = image;
            }
        }

        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the instance of ListView
            ListView listView = sender as ListView;

            // Get the ListView selected item as a Book
            Book selectedBook = listView.SelectedItem as Book;

            // Initialize a new message dialog
            MessageDialog dialog = new MessageDialog(
                "Selected : \n"
                + selectedBook.BookName + "\n"
                + selectedBook.Author + "\n"
                + selectedBook.Price
                );

            // Finally, display the selected item details on dialog
            dialog.ShowAsync();
        }
    }
}

UWP - How to use ListView HeaderTemplate

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 template that display the data values.

The UWP app developers commonly use a DataTemplate to specify the visual representation of ListView data. The DataTemplate objects are especially useful when they are binding an ItemsControl such as a ListView to an entire collection. In the following UWP app development tutorial code, we used the HeaderTemplate to display a header for the ListView control.

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"
            Background="Snow"
            >
            <ListView.HeaderTemplate>
                <DataTemplate>
                    <StackPanel
                        Background="Crimson"
                        BorderBrush="DarkRed"
                        BorderThickness="0,0,0,2"
                        >
                        <TextBlock
                            Foreground="Snow"
                            FontStyle="Italic"
                            FontWeight="Bold"
                            FontSize="25"
                            Text="Select a color from this list."
                            Padding="7"
                            FontFamily="Calibri"
                        />
                    </StackPanel>
                </DataTemplate>
            </ListView.HeaderTemplate>
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI;
using Windows.UI.Xaml;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the list item height
                item.Height = 50;

                if (index % 2 == 0)
                {
                    // Set the regular item background
                    item.Background = new SolidColorBrush(Colors.SeaGreen);
                }
                else
                {
                    // Set the alternate item background
                    item.Background = new SolidColorBrush(Colors.MediumSeaGreen);

                    // Set the alternate item content alignment
                    item.HorizontalContentAlignment = HorizontalAlignment.Right;
                }

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}

UWP - How to add margin to each item in a ListView

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 corresponding array element. We also specify the item height programmatically in the c# code section.

Now we add a margin to the ListViewItem instance. Then we add the ListViewItem instance to the ListView item collection. Finally, the ListView shows the margin around each item.

The ListViewItem class represents the container for an item in a ListView control. The ListViewItem class provides the container for items displayed in a ListView control.

The ListViewItem class Margin property gets or sets the outer margin of a FrameworkElement. The ListView Margin property is inherited from FrameworkElement.

The FrameworkElement class provides a base element class for Windows Runtime UI objects. FrameworkElement defines a common API that supports UI interaction and the automatic layout system.

The FrameworkElement class Margin property gets or sets the outer margin of a FrameworkElement. This property value is a Thickness that provides margin values for the object. The default value of this property is a default Thickness with all properties (dimensions) equal to 0.

A margin value greater than 0 applies space outside the item’s actual width and actual height. In this UWP tutorial code, we also set different background colors for ListView alternate items.

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"
            Background="Snow"
            >
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI;
using Windows.UI.Xaml;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the list item height
                item.Height = 50;

                // Set the list view item margin
                item.Margin = new Thickness(
                        5, // Left
                        5, // Top
                        5, // Right
                        5 // Bottom
                    );

                if (index % 2 == 0)
                {
                    // Set the regular item background
                    item.Background = new SolidColorBrush(Colors.CornflowerBlue);
                }
                else
                {
                    // Set the alternate item background
                    item.Background = new SolidColorBrush(Colors.LightSkyBlue);

                    // Set the alternate item content alignment
                    item.HorizontalContentAlignment = HorizontalAlignment.Right;
                }

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}

UWP - ListView item style example

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;


namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Gray",
                "Cornsilk",
                "Cyan",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the item border as item separator
                item.BorderThickness = new Thickness(0, 0, 0, 2);
                item.BorderBrush = new SolidColorBrush(Colors.Snow);

                // Set the list item height
                item.Height = 50;

                // Item text style
                item.FontSize = 20;
                item.FontStyle = FontStyle.Italic;
                item.FontWeight = FontWeights.Bold;
                item.FontStretch = FontStretch.ExtraExpanded;
                item.FontFamily = new FontFamily("Century Gothic");
                item.Padding = new Thickness(10, 5, 30, 5);
                item.Foreground = new SolidColorBrush(Colors.DarkRed);

                if (index % 2 == 0)
                {
                    // Set the regular item background
                    item.Background = new SolidColorBrush(Colors.DarkOrange);
                }
                else {
                    // Set the alternate item background
                    item.Background = new SolidColorBrush(Colors.Orange);
                    // Set the alternate item content alignment
                    item.HorizontalContentAlignment = HorizontalAlignment.Right;
                }

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}

UWP - How to change ListView item height

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 ListViewItem content from the corresponding array element.

Now we set the height of the ListViewItem instance. We also set the minimum height and maximum height of the ListViewItem instance. Then we add the ListViewItem instance to the ListView item collection. Finally, the ListView shows the item with a specified height.The ListViewItem class represents the container for an item in a ListView control. The ListViewItem class provides the container for items displayed in a ListView control.

The ListViewItem class Height property gets or sets the suggested height of a FrameworkElement. The ListView Height property is inherited from FrameworkElement.

The FrameworkElement class provides a base element class for Windows Runtime UI objects. FrameworkElement defines a common API that supports UI interaction and the automatic layout system.

The FrameworkElement class Height property gets or sets the suggested height of a FrameworkElement. The Height property value is a Double value which is the height, in pixels, of the object. The default value is NaN. Except for the special NaN value, this value must be equal to or greater than 0.

The ListViewItem MinHeight property gets or sets the minimum height constraint of a FrameworkElement. This property is inherited from FrameworkElement. And the ListViewItem MaxHeight property gets or sets the maximum height constraint of a FrameworkElement. This property is also inherited from FrameworkElement.

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"
            Height="500"
            >
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;
using Windows.UI.Xaml.Media;
using Windows.UI;
using Windows.UI.Xaml;

namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Gray",
                "Cornsilk",
                "Cyan",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++)
            {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the item border as item separator
                item.BorderThickness = new Thickness(0, 0, 0, 2);
                item.BorderBrush = new SolidColorBrush(Colors.OrangeRed);

                // Set the list view item height

                /*
                    Height
                    Gets or sets the suggested height of a
                    FrameworkElement. (Inherited from FrameworkElement) 
                */
                item.Height = 75;

                /*
                    MinHeight
                        Gets or sets the minimum height constraint of a
                        FrameworkElement. (Inherited from FrameworkElement)                        

                */
                item.MinHeight = 50;

                /*
                    MaxHeight
                        Gets or sets the maximum height constraint of a
                        FrameworkElement. (Inherited from FrameworkElement) 
                */
                item.MaxHeight = 100;

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }
    }
}

UWP - How to add item separator to ListView

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 ListViewItem content from the corresponding array element.

Now we add a border and border brush to the ListViewItem instance. We add the ListViewItem instance to the ListView item collection. Finally, the ListView shows the item separator line between each item. In this UWP example code, we also add a SelectionChanged event to the ListView control. We display the selected item on a dialog when a user changes the ListView item selection.

The ListViewItem class represents the container for an item in a ListView control. The ListViewItem class provides the container for items displayed in a ListView control.

The ListViewItem class BorderThickness property gets or sets the border thickness of a control. This ListVieItem property is inherited from Control. This property value is a Thickness which is the border thickness of a control, as a Thickness value.

The ListViewItem class BorderBrush property gets or sets a brush that describes the border fill of a control. This property is also inherited from Control. The BorderBrush property value is a Brush which is the brush that is used to fill the control's border. The default value is null, and a null brush is evaluated as Transparent for rendering.

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"
            SelectionChanged="ListView1_SelectionChanged"
            >
        </ListView>
    </StackPanel>
</Page>

MainPage.xaml.cs

using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;
using Windows.UI.Xaml.Media;
using Windows.UI;
using Windows.UI.Xaml;

namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Initialize a new string array
            string[] colors = {
                "Red",
                "Green",
                "Orange",
                "Gray",
                "Cornsilk",
                "Cyan",
                "Bisque",
                "Beige",
                "Coral"
            };

            // Get the list view item collection
            ItemCollection ic = ListView1.Items;

            // Loop through the array items
            for (int index = 0; index < colors.Length; index++) {
                // Initialize a new ListViewItem instance
                ListViewItem item = new ListViewItem();

                // Add the content to item
                item.Content = colors[index];

                // Set the item border as item separator
                item.BorderThickness = new Thickness(0, 0, 0, 2);
                item.BorderBrush = new SolidColorBrush(Colors.DarkBlue);

                // Finally, add the item to the list view item collection
                ic.Add(item);
            }
        }


        private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Get the list view instance
            ListView listView = sender as ListView;

            // Get the list view selectted item
            ListViewItem item = (ListViewItem)listView.SelectedItem;

            // Get the list view selectted item text
            string selectedItemText = item.Content.ToString();

            // Initialize a new message dialog
            MessageDialog dialog = new MessageDialog("Selected : " + selectedItemText);

            // Finally, display the selected item text on dialog
            dialog.ShowAsync();
        }
    }
}