This example shows how to customize progress bar appearance in UXProgressBar.

Example

Description

Style could be considered as a convenient way to apply a set of property values to more than one element. For example, if you want your UXProgressBar elements to share some properties, you can create a Style in the Resources section of your XAML file as demonstrated in the code below.

For more information about Style, see Styles and Templates Overview.

Code

XAML	Copy Code
<Intersoft:UXPage.Resources> <Style TargetType="Intersoft:UXProgressBar"> <Setter Property="CornerRadius" Value="6" /> <Setter Property="BorderThickness" Value="3" /> <Setter Property="BorderBrush" Value="Red" /> <Setter Property="Background" Value="Black" /> <Setter Property="Foreground" Value="Gray" /> <Setter Property="ProgressBarBrush" Value="White" /> <Setter Property="TextVisibility" Value="Visible" /> </Style> </Intersoft:UXPage.Resources> <StackPanel x:Name="LayoutRoot"> <Intersoft:UXProgressBar Width="200" Height="24" Value="50" /> <Intersoft:UXProgressBar Width="200" Height="24" Value="70" /> </StackPanel>

XAML

Copy Code

<Intersoft:UXPage.Resources> 
    <Style TargetType="Intersoft:UXProgressBar">
        <Setter Property="CornerRadius" Value="6" />
        <Setter Property="BorderThickness" Value="3" />
        <Setter Property="BorderBrush" Value="Red" />
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="ProgressBarBrush" Value="White" />
        <Setter Property="TextVisibility" Value="Visible" />
    </Style>
</Intersoft:UXPage.Resources>

<StackPanel x:Name="LayoutRoot">
    <Intersoft:UXProgressBar Width="200" Height="24" Value="50" />
    <Intersoft:UXProgressBar Width="200" Height="24" Value="70" />
</StackPanel>

Concepts

ClientUI Controls

Styles and Templates Overview

UI Controls Overview

Other Resources

Locating the Samples in Local Installation

Walkthroughs and How-to Topics