Question

I have a Silverlight user control that has an Image control within it. This image needs to be set by another page that contains the above mentioned control, through a datamember of a bound list of items. Currently, the image does not get set when the URL is sent through to the user control. In actual fact, no code other than the SetValue(ImageSourceProperty, value); seems to be hit.

The XAML in the user control looks as follows:

<Grid x:Name="LayoutRoot" Background="Black">
    <Image Name="ContentImage"/>
</Grid>

In the code behind of that I have a DependencyObject set to receive the URL of the image and set the datasource of the image:

        public static DependencyProperty ImageSourceProperty =
    DependencyProperty.Register("ImageSource", typeof(String), typeof(MediaItemControl), null);

public String ImageSource
    {
        get { return (String)GetValue(ImageSourceProperty); }
        set
        {
            SetValue(ImageSourceProperty, value);
            Dispatcher.BeginInvoke(() => this.ContentImage.Source = new BitmapImage(new Uri(value, UriKind.RelativeOrAbsolute)));
        }
    }

The MainPage.Xaml holds a reference to this user control within an ItemsTemplate who’s itemssource gets set in the code behind to a list of objects, which has a property called ImageURL. This datasource is set correctly in the code behind. This is the XAML for the MainPage:

<UserControl x:Class="ExampleSilverlightApp.MainPage"
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" xmlns:medc="clr-namespace:ExampleSilverlightApp.Controls" mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Name="ItemsControlStackPanel">
        <ItemsControl Name="ContentItemControl" Visibility="Visible">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Width="126" HorizontalAlignment="Center">
                        <medc:MediaItemControl x:Name="CustomMediaItemControl"   
                                               ImageSource="{Binding ImageURL}"
                                               >
                        </medc:MediaItemControl>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Grid>

The issue I have is that the image source does not get set on the user control. The setter of the dependency object doesnt appear to be hit. If I put a button on the control that when pressed sets the ImageSource property, the set is then hit and the image is displayed. The interesting part is that the ImageSource value HAS actually been set correctly, but the image’s datasource is null until set using the button.

Does anyone have any ideas as to why this is happening?

Answer 1

Try setting the ContentImage.Source in the PropertyChangedCallback delegate of the Dependency property – like this :

public static DependencyProperty ImageSourceProperty = 
DependencyProperty.Register("ImageSource", typeof(String), typeof(MediaItemControl), 
    new PropertyMetadata(delegate(DependencyObject sender, DependencyPropertyChangedEventArgs args)
            {
                (sender as MediaItemControl).ContentImage.Source = new BitmapImage(new Uri((string)args.NewValue, UriKind.RelativeOrAbsolute));
            }));

When you databind, the databinding engine in the background calls DependencyObject.SetValue(ImageSourceProperty, newValue) and doesn’t refer to the actual propery (ie – it doesn’t call MediaItemControl.ImageSource = newValue) – hence the logic in the setter doesn’t get called.

HTH !