Create data template with expression blend

For this kind of work, you will probably want to zoom to make the button larger in the editing area. Your rectangle might look different than the one in the figure for example, it might have rounded corners. Move ContentPresenter to the top: At this point, it is possible that the text "Button" will not be visible any longer. If this is so, this is because innerRectangle is on top of the myContentPresenter. To fix this, drag myContentPresenter below innerRectangle.

Reposition rectangles and myContentPresenter to look similar to below. Alternatively, you can also position myContentPresenter on top by right-clicking it and pressing Send Forward.

Notice that the settings for the Fill and Stroke of innerRectangle are the opposite of those for outerRectangle. Add a glass layer on top: The final piece of customizing the look of the button is to add a glass layer on top.

This glass layer consists of a third rectangle. Because the glass will cover the entire button, the glass rectangle is similar in dimensions to the outerRectangle. Therefore, create the rectangle by simply making a copy of the outerRectangle. Name this new rectangle "glassCube". Reposition glassCube if necessary: If glassCube is not already positioned so that it covers the entire button, drag it into position.

Give glassCube a slightly different shape than outerRectangle: Change the properties of glassCube. This is what to set the gradient stops to:. In the sections ahead, we'll use property triggers and events to show and manipulate the glass layer. At this point, you have customized the presentation of the button by editing its template, but the button does not react to user actions as typical buttons do for example, changing appearance upon mouse-over, receiving focus, and clicking.

The next two procedures show how to build behaviors like these into the custom button. We'll start with simple property triggers, and then add event triggers and animations. This creates a property trigger with a default property trigger. This makes the property trigger activate when the IsMouseOver property is true when the user points to the button with the mouse. This means that any changes you make to the property values of glassCube while recording is on will become an action that takes place when IsMouseOver is true.

You have now created your first property trigger. Press F5 to run the application, and move the mouse pointer over and off the button. You should see the glass layer appear when you mouse-over the button and disappear when the pointer leaves. While recording continues, switch your selection from glassCube to outerRectangle. This sets the Stroke to the typical highlight color used by buttons. Press F5 to see the effect when you mouse over the button. Make the content of the button appear a little blurry when the glass appears over it.

To return the Properties panel back to what it was before you did the search for BitmapEffect , clear the text from the Search box. At this point, we have used a property trigger with several associated actions to create highlighting behavior for when the mouse pointer enters and leaves the button area.

Another typical behavior for a button is to highlight when it has focus as after it is clicked. We can add such behavior by adding another property trigger for the IsFocused property.

Create property trigger for IsFocused: Using the same procedure as for IsMouseOver see the first step of this section , create another property trigger for the IsFocused property. While Trigger recording is on , add the following actions to the trigger:. Sergey Aldoukhov Sergey Aldoukhov Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name.

Email Required, but never shown. The Overflow Blog. Podcast Making Agile work for data science. Stack Gives Back Featured on Meta. New post summary designs on greatest hits now, everywhere else eventually. Related 8.

Along with the Slider we will provide a textbox to modify the width of the rectangle. In this section we will see how we can use data binding with data sources. Data sources can either be xml or any other CLR object. As we know that xml works only with WPF so for this demo we will have to use data binding with sample data.

When we work on an actual project we have CLR objects in which data is stored and they definitely follow some schema. So we can build up sample data in Blend to represent that sample data. Expression Blend 4 : Data Binding Background. The code for this post can be found here. Open Expression blend 4 and create a new Silverlight Project. Now go to the tools pallet and select rectangle. Expression Blend 4 : Rectangle. Expression Blend 4 : Rectangle Properties.