Tuesday, July 9, 2013

Decorate label in WPF

Step 1: Create a WPF application and add new item Resource Directory(WPF) and named it Style.xaml



Step 2: Update the MainWindow.xaml as follows.

<Window x:Class="LabelControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="274" Width="470">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Style.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
 
    <WrapPanel>
        <Label Content="Hello World!" Style="{StaticResource roundLabel}"/>
        <Label Content="Hello World!" Style="{StaticResource styleTextLabel}"/>
        <Label Content="Hello World!" Style="{StaticResource styleBorderTextLabel}"/>
        <Label Content="Hello World!" Style="{StaticResource styleImageBrushLabel}"/>
    </WrapPanel>
</Window>

*********************************************************************

Step 3: Update the Style.xaml as follows.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="roundLabel" TargetType="{x:Type Label}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <Border BorderBrush="#BFE3FE" BorderThickness="1" CornerRadius="5" Padding="3">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#FFc2ccdb" Offset="1"/>
                                <GradientStop Color="#FFF1EDED" Offset="0"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="70"/>
        <Setter Property="FontSize" Value="22"/>
    </Style>

    <LinearGradientBrush x:Key="ForeGroundBrush" StartPoint="0,0" EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="Blue" Offset="0.1" />
                    <GradientStop Color="Orange" Offset="0.25" />
                    <GradientStop Color="Green" Offset="0.75" />
            </GradientStopCollection>
        </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="styleTextLabel" TargetType="{x:Type Label}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Foreground" Value="{StaticResource ForeGroundBrush}"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="70"/>
        <Setter Property="FontSize" Value="22"/>
    </Style>

    <Style x:Key="styleBorderTextLabel" TargetType="{x:Type Label}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <Border BorderBrush="{StaticResource ForeGroundBrush}" BorderThickness="2" CornerRadius="5" Padding="3">
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Foreground" Value="{StaticResource ForeGroundBrush}"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="70"/>
        <Setter Property="FontSize" Value="22"/>
    </Style>

    <Style x:Key="styleImageBrushLabel" TargetType="{x:Type Label}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <Border BorderBrush="#BFE3FE" BorderThickness="2" CornerRadius="5" Padding="3">
                        <Border.Background>
                            <ImageBrush ImageSource="Images/Tulips.jpg"/>
                        </Border.Background>
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontWeight" Value="DemiBold"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="70"/>
        <Setter Property="FontSize" Value="22"/>
    </Style>
    
</ResourceDictionary>

*********************************************************************
If every thing goes you will get following output. 



Post a Comment