Month: November 2008

Silverlight Toolkit: Label

Hi, I have found the awesome article from Justin-Josef Angel about LABEL the new silverlight control.
I guess that I could post it into my blog for my own reference and
might as well any one who has been reading my blogs by any chance.

Click here to see the original post from Justin-Josef Angel.

Thanks Justin for an awesome article )

Setup

1. Create a new project.

image

2, Add a reference to the Silverlight Controls assembly (Microsoft.Windows.Controls.dll) which can be downloaded at http://codeplex.com/Silverlight.

image image

3. Look under “Custom Controls” In the Blend Asset Library.

image

4. Add a Label to the Page.

image

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.

image

image

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:

image

Changing the Label’s Border

We can set the BorderBrush & BorderThinckness properties for Label in order to change it’s border.

image

Let’s start by changing the BorderBrush to a SoliderColorBrush with a light grey color. Click on BorderBrush and select SolidColorBrush.

image –> image

Than we’ll select a light gray color.

image

Next, we’ll change the BorderThickness to 1 on all sides.

image

And we can see our Label has a nice subtle light grey border around itself:

image

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.

image –>image

image

Next we’ll select the Foreground property and set it to SolidColorBrush with the color white.

image –>image

here’s our Label:

image

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.

image

Than Right Click on it, select “Edit Control Parts(Template) –> Create Empty…”.

image

We’ll change the Resource name to RadialPanelTemplate.

image

And here’s the drawing area of the new template:

image

Let’s add the Ellipse for the radial background.

image

image

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.

image

image

Finally we can add our TextBlock that has the Label Content.

image

image

We’ll
use TemplateBinding to connect this TextBlock.Text to the Label.Content
property. Click the “Advanced Options” next to the Text
property.

image

Select “Custom Expression”.

image

And put in the correct TemplateBinding.

image

To preview our form we can go back to our form.

image

And here it is:

image

Now we can we add 3 more label to our page and just apply this new template to them.

image

We’ll
select each of our new Labels, Right click, select “Edit Control
Parts (Template) –> Apply Resource –> Radial Label
Template”.

image

And here’s our new form:

image

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.

image

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:

image

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.

image

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…”

image

We’ll call our new ContentTemplate – CowContentTemplate.

image

As always we start off with an empty ContentTemplate.

image

I’ll spare you my third grade drawing skills and we’ll magiclly add some lines that are our cow.

image

Truly a masterpiece.

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

image

Click “Advanced Options –> Custom Expression”.

image

image

And add a Binding to the Cow Name.

image

Next, we’ll select the Cow’s head.

image

And set a StrokeThickness to a Custom expression that’s bound to the Cow’s age.

image

One last thing we have to do before we can run the sample is set the Cow’s Content to it’s DataContext.

image

We’ll ad a Custom expression to the Content property of the label.

image

Finally we can run the sample.

image

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.

image

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}” />

Advertisements