Hi Folks,
I’d like for us to talk a bit a seemingly simple control in the Silverlight Toolkit – Label.
In the following article we’ll deep dive into the many nooks and crannies Label has and unleash some of it’s true power.
Setup
1. Create a new project.
2, Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.
3. Look under "Custom Controls" In the Blend Asset Library.
4. Add a Label to the Page.
And here's the XAML we got:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightControlsNovember2008.Page"
Width="640" Height="480"
xmlns:slctls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls">
<Grid x:Name="LayoutRoot" Background="White">
<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Label"/>
</Grid>
</UserControl>
Setting the content for Label
One way of editing a Label's content is double clicking on it.
And here's the XAML we just got:
<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,220" Width="148" Content="Hello World!"/>
Another way is editing the Content property directly through the Blend Data pane:
Changing the Label’s Border
We can set the BorderBrush & BorderThinckness properties for Label in order to change it’s border.
Let’s start by changing the BorderBrush to a SoliderColorBrush with a light grey color. Click on BorderBrush and select SolidColorBrush.
--> 
Than we’ll select a light gray color.
Next, we’ll change the BorderThickness to 1 on all sides.
And we can see our Label has a nice subtle light grey border around itself:
Here’s the XAML we just generated:
<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1"/>
Changing Label’s Background and Foreground
Let’s do what the title says!
In case you’re wondering TextBlock does not have a Background. So it’s a bit different than what we would have normally done with TextBlock.
We’ll select Background and set it to SolidColorBrush with the color Black.
-->
Next we’ll select the Foreground property and set it to SolidColorBrush with the color white.
-->
here’s our Label:
And the xaml we generated:
<slctls:Label HorizontalAlignment="Left" Margin="98,179,0,0" Width="79" Content="I am a Label!" VerticalAlignment="Top" Height="20" BorderBrush="#FFC6C4C4" BorderThickness="1,1,1,1" Background="#FF000000" Foreground="#FFF5F3F3"/>
Changing the Label’s Template
Let’s say we're unhappy with the default border for out Text inside the Label. Through the power of templating we can change it.
So let’s create a RadialLabelTemplate.
We’ll start of by adding a new label to form.
Than Right Click on it, select “Edit Control Parts(Template) –> Create Empty…”.
We’ll change the Resource name to RadialPanelTemplate.
And here’s the drawing area of the new template:
Let’s add the Ellipse for the radial background.
Now we want to add a TextBlock to display the content of the Label. Before we can do that, we’ll need to add a container that will contain both our Ellipse and our TextBlock. We’ll Group our Ellipse into a Canvas.
Finally we can add our TextBlock that has the Label Content.
We’ll use TemplateBinding to connect this TextBlock.Text to the Label.Content property. Click the “Advanced Options” next to the Text property.
Select “Custom Expression”.
And put in the correct TemplateBinding.
To preview our form we can go back to our form.
And here it is:
Now we can we add 3 more label to our page and just apply this new template to them.
We’ll select each of our new Labels, Right click, select “Edit Control Parts (Template) –> Apply Resource –> Radial Label Template”.
-
And here’s our new form:
Here’s the XAML we just generated for the RadialLabelTemplate:
<UserControl.Resources>
<ControlTemplate x:Key="RadialLabelTemplate" TargetType="slctls:Label">
<Canvas Height="Auto" Width="Auto">
<Ellipse Height="35" Width="125" Fill="#FFFFFFFF" Stroke="#FF000000"/>
<TextBlock Height="20" Width="82.667" Canvas.Left="22.667" Canvas.Top="7.333" Text="{TemplateBinding Content}" TextWrapping="Wrap"/>
</Canvas>
</ControlTemplate>
</UserControl.Resources>
And the Xaml for our labels:
<slctls:Label Template="{StaticResource RadialLabelTemplate}" Content="Radial Label!" Width="124" Height="34"/>
<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="19.333" Content="Radial == good" FontSize="10"/>
<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="29.333" Width="144" Content="I R Radial" />
<slctls:Label Template="{StaticResource RadialLabelTemplate}" Height="28.667" Width="130.334" Content="U R Radial"/>
Editing a Label’s ContentTemplate
Templates are used with TemplateBindings that emanate for general Control properties. But we might do bind our Label to CLR property from any Data Source. like, Cows.
We’ll create (in Visual studio) our Cow class that has Age and Name.
public class Cow
{
public Cow(string Name, int Age)
{
Name = Name;
Age = Age;
}
public string Name { get; set; }
public int Age { get; set; }
}
A very basic CLR class that has 2 properties: a numeric age and a string that represents the age of the cow.
Now let’s use this class and create a cow we’ll DataBind our label to.
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
myLabel.DataContext = new Cow("Betsy", 3);
}
}
Eventually I’d like for us to see a Label that looks like this:
We’d like to change the thickness of the head line based on Cow.Age and change the text based on Cow.Name.
Let’s start by adding a new Label to the page and changing it’s name to myLabel.
We’d like to edit the ContentTemplate of this label, so we’ll Right Click on the label select “Edit Other Templates –> Edit Generated Content (ContentTemplate) –> Create Empty…”
We’ll call our new ContentTemplate – CowContentTemplate.
As always we start off with an empty ContentTemplate.
I’ll spare you my third grade drawing skills and we’ll magiclly add some lines that are our cow.
Truly a masterpiece.
If you squint really hard, they look alike
Next we’d like to add the appropriate bindings.
We’ll select the TextBlock in the middle of the cow.
Click “Advanced Options –> Custom Expression”.
And add a Binding to the Cow Name.
Next, we’ll select the Cow’s head.
And set a StrokeThickness to a Custom expression that’s bound to the Cow’s age.
One last thing we have to do before we can run the sample is set the Cow’s Content to it’s DataContext.
We’ll ad a Custom expression to the Content property of the label.
Finally we can run the sample.
Let’s add a few more Labels with that ContentTemplate and with more Cows.
public partial class Page : UserControl
{
public Page()
{
// Required to initialize variables
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
myLabel.DataContext = new Cow("Betsy", 3);
myCowLabel1.DataContext = new Cow("Martha", 1);
myCowLabel2.DataContext = new Cow("Flossy", 5);
myCowLabel3.DataContext = new Cow("Hoss", 2);
}
}
We’ll make sure to add those label to our page and re-run this sample.
And our Cow Herd is now complete.
Here’s our DataTemplate XML.
<UserControl.Resources>
<DataTemplate x:Key="CowContentTemplate">
<Grid>
<TextBlock Margin="21.75,9.833,27.25,9.167" TextWrapping="Wrap" FontSize="8" Text="{Binding Path=Name}"/>
<Ellipse HorizontalAlignment="Right" Margin="0,2.167,4.583,13.833" Width="15.084" Fill="#FFFFFFFF" Stroke="#FF000000" StrokeThickness="{Binding Path=Age}"/>
<Rectangle Margin="18.75,8,25.25,8" Fill="#FFFFFFFF" Stroke="#FF000000" RadiusX="1" RadiusY="1"/>
<Path Height="2.334" HorizontalAlignment="Right" Margin="0,12.25,19.417,0" VerticalAlignment="Top" Width="6.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M65.166664,9.833333 L59.5,11.166667"/>
<Path Height="6" HorizontalAlignment="Right" Margin="0,0,23.75,2.667" VerticalAlignment="Bottom" Width="3.667" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M58.833332,19.666666 L61.5,24.666666" d:LayoutOverrides="Width"/>
<Path Height="4.5" HorizontalAlignment="Left" Margin="27.585,0,0,3.833" VerticalAlignment="Bottom" Width="2.166" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M35.333332,19.666666 L34.166668,23.166666"/>
<Path Height="4.834" HorizontalAlignment="Right" Margin="0,0,33.751,4.333" VerticalAlignment="Bottom" Width="1.833" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M51.833332,22.666666 L51,18.833334" d:LayoutOverrides="Width"/>
<Path Height="5" HorizontalAlignment="Left" Margin="18.917,0,0,4.333" VerticalAlignment="Bottom" Width="4" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M27.333334,19.35417 L24.833334,23.187502"/>
</Grid>
</DataTemplate>
</UserControl.Resources>
And our Cow labels:
<slctls:Label Height="32.5" Margin="311.5,56.75,235.5,0" VerticalAlignment="Top" x:Name="myLabel" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />
<slctls:Label Height="32.5" Margin="311,129.5,236,0" VerticalAlignment="Top" x:Name="myCowLabel1" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />
<slctls:Label Height="32.5" Margin="311,198.75,236,0" VerticalAlignment="Top" x:Name="myCowLabel2" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />
<slctls:Label Height="32.5" Margin="311.5,0,235.5,184.5" x:Name="myCowLabel3" ContentTemplate="{StaticResource CowContentTemplate}" Content="{Binding}" />
-- Justin-Josef Angel
Microsoft Silverlight Program Manager