Eclipsed4utoo's Blog

In a previous tutorial, I showed how to do a custom Item Template for a ListBox. However, one of the painstaking parts of that was having to create the class and the code to populate the ListBox with actual data. Also, even though I was populating the ListBox, I still simply saw blank controls during design-time.

This is where Sample Data comes in. Not only can you quickly create sample data for a control, you can drag and drop it onto the control, and the ItemTemplate will be created for you(which you can still edit). And the biggest plus to using Sample Data?….the data can be view at DESIGN-TIME.

So first, let’s create a Silverlight project in Blend. I named mine SampleDataProject.

Next, we will put a ListBox on our page, and give it a Height of 200 and a Width of 250.

<ListBox
	Margin="178,128,212,152"
	Width="250"
	Height="200"/>

Now that we have the ListBox on the page, we can create our Sample Data. Click on the Data window, then on the “Create sample data” button, then choose “New Sample Data…”…

We are going to name it PersonDataSource.

A couple of things to note on this screen. You will see two radio buttons: Project, and This document. If you choose Project, it will make the sample data available to any control in the project. If you choose This document, then the sample data will only be available to this page.

You will also see a checkbox on this screen saying “Enable sample data when application is running”. This allows you to use the sample data in design time, but use another data source during runtime. Uncheck this box if you want to use a different data source at runtime. Since we want our sample data for design time and runtime, we will leave it checked.

After creating the sample data, the Data window will now show our data in a treeview type layout. By default, it will add two properties for us.

Let’s change the first property by double clicking it and giving it the name FullName.

Let’s change the second property to Age. By default, this property is set to a boolean type. Since our age is not a boolean value, we need to change that to a numeric format. Click on the “Change property type” button on the far right of the property line. You will see a dropdown with different types. Choose “Number”. We will leave it’s length at 2.

Now that we have the properties setup, we need to add some actual data. Click on the “Edit sample values” button…

You will now see a window with a number of rows and data. At the bottom, you can determine how many rows you want to show. We are going to change this to 3. We are going to add some data to those rows, then click OK.

Now that we have our sample data setup, let’s simply drag and drop the “Collection” from the Data window onto the ListBox. The ListBox will create it’s own ItemTemplate to display the data.

That’s all you have to do. As you can see, we now have data in our ListBox while designing it…

You can look at my other tutorial on how to edit the created ItemTemplate to show the data different ways.

To me, this is one of the best features of Blend. Being able to see how a collection control will look at design time will speed up the development process. No longer will you have to continuously run the application to see if you have the layout correct.

In this tutorial, I am going to use the Visual State Manager and Behaviors to do animations. I will be using Blend 4 to do this tutorial. Blend will make this much easier to do rather than writing the XAML by hand.

The Visual State Manager allows you to create “states” of objects and then move to those states. Moving to those states can be done through code(just one line of code), or by using behaviors.

NOTE: The VisualStateManager was added in Silverlight 2. However, it wasn’t included in WPF until .Net 4. To use the VisualStateManager in WPF in .Net 3.5 SP1, you will need to download the WPF Toolkit from CodePlex.

So first, we will create a new project in Blend. We will just create a Silverlight 4 application without the website. We will name the project VisualStateExample.

We will now draw a Rectangle on our page, and give it a Fill of Blue.

Next, we are going to go to the States tab.

This is where we will create all of our states.

So first, we need to create a State Group. Click the Add State Group button, name it MyStateGroup, then give it a default transition time of 0.4s.

Now that we have our State Group, we need to create our individual states. Let’s say that we want the rectangle to change colors when the mouse hovers over it. When the mouse moves away, we want it to change back to it’s original color. Also, let’s change the color when the left mouse button is held down on the rectangle(Mouse Down), then change back when the left mouse button is released(Mouse Up).

So let’s create our first state. Our first state will be our current, default state. Click the Add State button, then name it MouseOutState.

If you notice, now there is a red rectangle around the designer. This means that you are currently in recording mode for the state. ANY changes that are made in the designer will be recorded for that state. Clicking on the Base state will stop recording.

Since this is our default state, we don’t need to record anything.

Now, create another state named MouseOverState. While still in recording mode, select the Rectangle from the Objects and Timeline tab, and change it’s Fill color to Orange. Click on the Base state to stop recording.

Now, create another state named MouseDownState. While still in recording mode, change it’s Fill color to Green.

Now, we need to create our last state. Create a new state and name it MouseUpState. While still in recording mode, change the Fill color to the Orange from the MouseOverState.

We should now have 4 states. Now we need to go to these states with the mouse events. There are a couple of ways of doing this, but I will use behaviors to do it.

There are a number of behaviors in Blend, and we are going to use the GoToStateAction behavior.

Go to the Assets tab, then click on behaviors, then click on the GoToStateAction.

Now drag that action onto the Rectange in the designer. You will now see that the GoToStateAction has been added to the Rectangle in the Objects and Timeline tab.

With the GoToStateAction selected, go to the Properties tab, set the EventName to MouseEnter, and set StateName to MouseOverState.

Do these steps to create a GoToStateAction for the other three states that we have. When you have completed, you will have four actions for the Rectangle.

You have now finished the animations. Run the application using F5, and move the mouse over the rectangle. Perform the other mouse actions to see the other animations.

This is just another way the Expression Blend makes animations so easy. I have created animations without writing one line of code. To me, that’s pretty amazing and can make application development much quicker and have less bugs.

For a Silverlight application I did recently, I wanted to do a custom modal dialog box for showing informational messages, error messages, or other messages to the user.  This dialog box would have no title bar or “X” button, and would have rounded corners.

For this tutorial, we will use Blend 4 to accomplish our task.

First, create a new Silverlight 4 application.  I named mine CustomDialog.

Once the project has been created, we are going to add a new item to our Silverlight project.  This item will be a ChildWindow.  I named mine DialogPopup.

The ChildWindow will handle the modal dialog part of our window.  However, there are parts of the ChildWindow that I didn’t like and wanted to remove/change, such as the window chrome.  I also wanted to round the corners of the window.   To do this, we need to edit the template for the window.  In the Objects and Timeline window, right-click on the ChildWindow parent –> Edit Template –> Edit a Copy…

We are going to keep it simple and save the new style to the ChildWindow document.

So first, we are just going to delete the window chrome from the window.  The window chrome is the title bar and the “X” used to close the window.  Drill-down in the treeview until you find the Chrome entry.  Right-click, and choose Delete.

Next, we need to delete some of the Borders.  These give the window a grey border that I didn’t want.

Next, we are going to round the corners of the window.  Drill-down and click on the Border shown below.

In the Properties window, set the CornerRadius to 20.

Move down to the next Border,

And set it’s CornerRadius to 20.

With the same Border selected, in the Properties window, set the Background Brush to a color of your choice.

The window “jazz” is now complete.  Next, we are going to move to the XAML.

First, we need to give our window a name so we can handle binding.  I named mine myCustomPopup.

<sdk:ChildWindow
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
   x:Class="CustomDialog.DialogPopup"
   x:Name="myCustomPopup"
   Title="DialogPopup"
   Width="400" Height="300">

Now we need to add a TextBlock to the window to hold our message.

<TextBlock
    Text="{Binding Message, ElementName=myCustomPopup}"
    Margin="51,88,57,113"
    TextWrapping="Wrap"
    Foreground="#FF1D1515"
    FontWeight="Bold"
    TextAlignment="Center"/>

You may notice that we are binding to a property called Message.  This is a custom DependencyProperty that will correspond to a public property that we will set when we create an instance of the window.

/// <summary>
/// Creates a public property for the TextBlock to bind to
/// </summary>
public static DependencyProperty MessageProperty = DependencyProperty.Register("Message", typeof(string), typeof(DialogPopup), new PropertyMetadata(""));
public string Message
{
     get { return (string)GetValue(MessageProperty); }
     set { SetValue(MessageProperty, value); }
}

This will complete our work for the window.  To show off the new window, lets add a Button to the MainPage.xaml, create an EventHandler for the Click event.

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

     <Button
        x:Name="btnShowMessage"
        Content="Click Me"
        Click="btnShowMessage_Click"
        Margin="251,207,289,236"  />
</Grid>

And the code for the Click event…

private void btnShowMessage_Click(object sender, System.Windows.RoutedEventArgs e)
{
     DialogPopup dialog = new DialogPopup();
     dialog.Message = "Our message";
     dialog.Show();
}

And that will complete our tutorial.  Run the application from Blend using F5, and you should see this..