Basic Use of Style Element In Silverlight

App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="BasicUseOfStyleElement.App">

    <Application.Resources>

      <Style x:Key="lblDemo_Border" TargetType="Border">

        <Setter Property="Background" Value="#FFB5E871" />

        <Setter Property="CornerRadius" Value="10" />

        <Setter Property="Height" Value="44" />

        <Setter Property="Margin" Value="0,0,0,0" />

      </Style>

      <Style x:Key="lblDemo_TextBlock" TargetType="TextBlock">

        <Setter Property="VerticalAlignment" Value="Center" />

        <Setter Property="HorizontalAlignment" Value="Center" />

        <Setter Property="FontWeight" Value="Bold" />

        <Setter Property="FontFamily" Value="Verdana" />

        <Setter Property="FontSize" Value="14" />

        <Setter Property="Foreground" Value="#FFBB4F4F" />

      </Style>

  </Application.Resources>

</Application>

Page.xaml

Think of Application.Resources as css file and Style in Application.Resources as css items.

To use the defined Styles in the control use Style = "{StaticResource lblDemo_Border}" and point to Style key name.

Setter node is key and value pair of controls attributes.

Note the commented xaml code below that is equivalent of applied Styles.

<UserControl x:Class="BasicUseOfStyleElement.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="200">

    <Grid x:Name="LayoutRoot" Background="White">

      <Border Style="{StaticResource lblDemo_Border}">

        <TextBlock x:Name="lblDemo" Text="Moo like cow! Mooo~~~~"

                   Style="{StaticResource lblDemo_TextBlock}" />

      </Border>

      <!--<Border CornerRadius="10" Background="/Portals/6/#FFB5E871"

              Height="44" Margin="0,0,0,0">

        <TextBlock x:Name="lblDemo" Text="Moo like cow! Mooo~~~~"

                   VerticalAlignment="Center" HorizontalAlignment="Center"

                   FontWeight="Bold" FontFamily="Verdana"

                   FontSize="14" Foreground="#FFBB4F4F" />

      </Border>-->

  </Grid>

</UserControl>