Question

I’m just starting out with Expression Blend, and I’m trying to create a custom UserControl that exposes a property to the control’s Properties side menu that updates the different aspects of the view. For example, I want to expose property called “Text” in Blend’s Properties side menu, that binds to a TextBlock inside the UserControl.

Here is the UserControl’s 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="XDAFacebook.XFItemGrid"
    d:DesignWidth="148" d:DesignHeight="200">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid>
            <Grid Height="148" Margin="0" VerticalAlignment="Top">
                <Image Height="148" Margin="0" Source="feeds.png" Stretch="Fill" VerticalAlignment="Bottom">
                    <Image.Clip> 
                        <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,148,148" /> 
                    </Image.Clip> 
                </Image>
                <Rectangle Fill="#00EBEBEC" Margin="0,0,0,0" Stroke="#FFB5B5B5" StrokeThickness="2" RadiusX="10" RadiusY="10"/>
            </Grid>
            <TextBlock x:Name="MainText" Height="33" Margin="8,0,11,13" TextWrapping="Wrap" Text="{Binding Text}" VerticalAlignment="Bottom" Foreground="#FF606060" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24"/>
        </Grid>
    </Grid>
</UserControl>

And here is the codebehind for that control:

[Description("Items for Main Grid")]
public partial class XFItemGrid : UserControl
{
    public XFItemGrid()
    {
        // Required to initialize variables
        InitializeComponent();
    }

    public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", 
        typeof(string), 
        typeof(XFItemGrid), 
        new PropertyMetadata(OnTextChanged));

    private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((XFItemGrid)d).Text = (String)e.NewValue;
    }

    [Description("Main Text to be displayed in the control")]
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
}

I can see the property “Text” in the Misc section of the Properties side menu, but when I update it, nothing changes in the TextBlock.

Eventually I would like to also do the same thing with the Image Source, but that if that is another post, let me know and I’ll put that in another one.

EDIT –

Dang, I found the error….. I was seriously thinking I was going crazy! But it turns out I was never setting the property correctly.

Here is the code that needs to be changed:

    private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((XFItemGrid)d).Text = (String)e.NewValue;
    }

to:

    private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((XFItemGrid)d).MainText = (String)e.NewValue;
    }

Blah, I hope that help! Make sure you actually change the property!

Answer 1

You should take the text property out into a model object and implement INotifyPropertyChanged for it so that when it is altered it notified all controls. With XAML not having some sort of backing model you bind to is just asking for trouble.