Exposing properties in Expression Blend

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.

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.

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

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

About these ads