Exposing properties in Expression Blend

6 04 2011

I work a lot in Microsoft Expression Blend. If you do any Silverlight or WP7 development, you should too. A problem I’ve had lately is when creating a large number of User Controls. I don’t want them to contain the same content, but since they’re custom controls, there is no field for these settings in Blend.

Silverlight Expression Blend

Creating the Avatar

One of the most common User Controls I do for projects is the Avatar. A single image of a person which should feature some special behaviors such as a PressedState or a MouseOver effect. If I want to do an avatar User Control where I can swap the bound image from Blend, this is what I do.

1. Base code

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="MyProject"
    d:DesignWidth="640" d:DesignHeight="480" Width="200" Height="200">

    <Grid x:Name="LayoutRoot"/>
</UserControl>

 

 

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyProject
{
    public partial class MyAvatar : UserControl
    {
        public MyAvatar()
        {
            // Required to initialize variables
            InitializeComponent();
        }
    }
}

 

2. Add an Image in the XAML

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyProject"
d:DesignWidth="640" d:DesignHeight="480" Width="200" Height="200">

<Grid x:Name="LayoutRoot">
        <Image x:Name="AvatarImage"/>
    </Grid>

</UserControl>

3. Add property in the code behind

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyProject
{

public ImageSource ImageSourceProperty
{

get { return this.AvatarImage.Source; }

set { this.AvatarImage.Source = value; }

}

public partial class MyAvatar : UserControl
{
public MyAvatar()
{
// Required to initialize variables
InitializeComponent();
}
}
}

 

4. Bind the Image to the property

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyProject"
d:DesignWidth="640" d:DesignHeight="480" Width="200" Height="200">

<Grid x:Name="LayoutRoot">
<Image x:Name="AvatarImage" Source="{Binding ImageSourceProperty}" />
</Grid>

</UserControl>

5. Voila

You should now see two things. Firstly, when inside your User Control, you should see a yellow square around your Source Property of the Image.

Silverlight Expression Blend

Second, you should now be able to bind directly to this from another page where you host your control. (Click image for full)

Silverlight Expression Blend

Now I can customize the User Control to my heart’s content and still be able to set properties on it via Blend.

Advertisements

Actions

Information

3 responses

8 04 2011
Exposing properties in Expression Blend | www.nalli.net

[…] Fragile Development I work a lot in Microsoft Expression Blend. If you do any Silverlight or WP7 development, you […]

9 04 2011
Charlie Schmahl

Keep up the great work!

27 01 2015
languagekings

Great article, but just wanted to correct that definition of the ImageSource property should be inside MyAvatar class, otherwise it won’t compile. (It may be obvious for C# developers, but myself coming from Java, was unfamiliar with the property syntax).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: