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.
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>
