Default Focus Behavior

I would love to share with you guys about Default Focus Behavior which I just created an hour ago because I thought this behavior would be very handy.

With this behavior, we would be able to set focus to any controls when we trigger any control events.

For example, whenever we click the button, we want to textbox got focused, or when we select the Option 1 for the very first time, the textbox will get focused as below image.

To set the focus for a control only once, all we have to do is set

IsOnceOff = “True”

Click the icon below for the source code, so you can have a play with it

Hopes this helpful

TextWraping in Silverlight

Just a little thing I came across when I am trying to set TextWraping property for a TextBox, but the text doesn’t seem to be wrapped. Then I realized if the TextBox is setting with TextWraping greater than 1, the text won’t be wrapped. Just a little thing to keep in mind

Datagrid Missing Binding Error

I have run into this silly mistake, and it took me 2 hours to figure it out

I  am writing it down here for my own reference, and if you ever ran into this problem, hope that this can help you fix your problem quickly.

The problem is I had a datagrid column with the Header but not the Binding, for example

<data:DataGridTextColumn Header=”MyProperty” />

This will cause the below error at runtime

To fix it, all I had to do is to put the Binding in it

<data:DataGridTextColumn Header=”MyProperty” Binding={Binding MyProperty} />

Hope this helps

UpperCase Behavior

I was asked to create a TextBox input which has only UpperCase letters. After a bit of research, I have found this article which has inspired me to come up with this solution. As we all know that Behavior is a cool stuff in Silverlight 3, so I decided to use the concept from that article and create a Behavior which detects all the key and uppercase it. Feel free to download the source code and have a play with it.

FocusManager

I’ve read this article about FocusManager. I think it could come handy sometimes when you want to know what element has focus. FocusManager class which can be found in the System.Windows.Input namespace. Below is the sample of how to use itThe FocusManager class has only one static method:

<span class="kwrd">public</span> <span class="kwrd">static</span> Object GetFocusedElement();

Using the FocusManager is easy. Here’s a small example of a possible usage:

var focusedElement = FocusManager.GetFocusedElement() as Control;
if (focusedElement != null)
    Output.Text = focusedElement.Name;

One last note: The FocusManager class is also available in the “normal” .NET Framework 3.0 or later.

Binding for Converter Parameter

I have come across the situation where I need to do some Binding for ConverterParameter. Something like

I have done lots of research, and I found out that its impossible to do binding for ConverterParameter.
So I came up with the Solution. I created the Converter but inherited from FrameworkElement

public class ShowDeleteServiceConverter : FrameworkElement, IValueConverter

In the converter class, I created a dependency property

Now, I can do the Binding as usual

And

It might not be the best solution, but it works for me so far. If you have any idea, feel free to drop me comments.

Cheers,

How to Change the Startup Class

Another great tip from Mike Snow. Read the original article here

When a Silverlight application is launched the entry point is a class that inherits from System.Windows.Application. By default, when you create a new Silverlight application project, this would be your App class which gets defined in App.xaml.cs. You can, however, change which startup class you want to use. In fact, if you do not plan to use XAML at all you can reduce the size of your application by deleting the Page and App classes including the XAML and code behind files.

To accomplish this follow these steps:

Step 1. Create a new Silverlight application project adding a new ASP.net web project to host the Silverlight app.

Step 2. Delete App.xaml and Page.xaml (the CS files will be deleted also).

Step 3. Create a new class and call it StartupTest.cs

Step 4. Modify your new class to inherit from Application as seen here:

public class StartupTest : Application

{

    public StartupTest()

    {

    }

}

Step 5. Right click on your Silverlight application project in the Solution Explorer of VS. From the context menu choose Properties. This will bring up the Properties dialog. Click on the Silverlight tab at the top-left and change the Startup object to be your class as seen circled here:

Step 6. Go back to your StartupTest class. Add an event to monitor for when the application has started. You don’t want to do anything until after this event has started.

public class StartupTest : Application

{

    public StartupTest()

    {

        this.Startup += new StartupEventHandler(StartupTest_Startup);

    }

    void StartupTest_Startup(object sender, StartupEventArgs e)

    {

    }

}

Step 7. The Application.RootVisual is root pointer to the main application UI. You will need to create this object to point an object such as a Grid or Canvas control. Once created, you can add additional controls to the children as you see fit. In the example below, I have created a Canvas as the root and configured its background color to be black, its width to be 800 and height to be 600. Also, I have added a Textbox to the Canvas control.

void StartupTest_Startup(object sender, StartupEventArgs e)

{

    this.RootVisual = new Canvas();

    ((Canvas)this.RootVisual).Width = 800;

    ((Canvas)this.RootVisual).Height = 600;

    ((Canvas)this.RootVisual).Background = new SolidColorBrush(Colors.Black);

    TextBlock tb = new TextBlock();

    tb.Foreground = new SolidColorBrush(Colors.White);

    tb.FontSize = 20;

    tb.Text = "NO XAML NEEDED!!!";

    ((Canvas)this.RootVisual).Children.Add(tb);

}

Step 8. Run the application and you will see the following image rendered in your browser: Technorati Tags: Silverlight

Using ReSharper with Silverlight

I have found the article to show how to make use of ReSharper with Silverlight Apps.

Click here to check out the original post.

I have always known that the ReSharper is a great tool for developer productivity. But I have not got a chance to use it yet. If you haven’t already tried ReSharper, you can download it here.

Here is the main details of how to use ReSharper for Silverlight:

ReSharper has a great feature called Templates.  Templates give you the ability to quickly generate code that you would generally need to write by hand.  There are three different types of templates in ReSharper:

• Live Templates – Allow you to generate code within the context of an existing file.
• Surround Templates – Allow you to “surround” selected code with a pre-defined template.
• File Templates – Allow you to quickly generate an entire file from a pre-defined template.

There are 4 templates that you can use in your Silverlight endeavors.  Below you will find a short description of each:

Dependency Property Generation

As illustrated in the screen capture below, you simply type DependProp in the editor, supply a property name and type, then hit tab and you have a fully defined dependency property!

 

Visual State Manager Block Template
The Visual State Manager Block Template is similar in function to the Dependency Property template, but this template will build a VisualStateManager declaration within the context of an XAML file.  To use the template, simply type vsm while editing an XML/XAML file.  The usage for this template is very similar to the DependProp template.

Generic.xaml File Template
As a Silverlight control developer, you may find it annoying to have to define the generic.xaml file over and over again.  Using a File Template, we can quickly build standard declaration and ReSharper will help you fill out the rest. To generate a new Generic.xaml file, press ALT+R+N+G, enter a name for the template and then click OK.

 

Control File Template
The Control File Template will construct a basic class that inherits from Control and includes the DefaultStyleKey in the constructor. The usage for this template is the same as the Generic.xaml file template above.

Installing the Templates
To import these templates, select the File Templates tab in the ReSharper Templates Explorer.  Click the import button and select the SilverlightFileTemplates.xml file,then click ok. 

Importing the Live Templates is very similar.  Select the Live Templates tab in the ReSharper Templates Explorer.  Click the import button select the SilverlightLiveTemplates.xml file, then click Ok.

You can download the templates here:
Download Resharper Templates

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.

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