Binding property of usercontrol to data

Question

I'm not sure of the correct terminology to use. I created a Windows Store app about a year ago and the main page was created by Visual Studio and I never changed it much. It uses a view model that works fine but I don't know enough to fix problems. Anyhow...

The page uses a GridView to display the contents of CollectionViewSource element to reference an ObservableCollection. This all works fine. The DataTemplate for one of the data items looks like this right now:

<DataTemplate x:Key="TopImageTileTemplate">
    <Grid MinHeight="135" Width="350" Margin="0" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="135"/>
        </Grid.RowDefinitions>

        <TextBlock Text="{Binding Path=ImagePath}" FontSize="33"/>

        <usercontrols:WaitingImageControl SourcePath="{Binding Path=ImagePath}" Grid.Row="0" Width="350" Height="165" HorizontalAlignment="Center" VerticalAlignment="Stretch" AutomationProperties.Name="{Binding Title}" Visibility="{Binding TypeDescription, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource TextToVis}}"/>

        <usercontrols:WaitingImageControl SourcePath="XXX" Grid.Row="0" Width="350" Height="165" HorizontalAlignment="Center" VerticalAlignment="Stretch" AutomationProperties.Name="{Binding Title}" Visibility="{Binding TypeDescription, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource TextToVis}}"/>

        <ProgressRing Opacity="0.5" Foreground="#FF8A57FF" Grid.Row="0" Name="TheProgressControl" IsActive="True" Height="32" Width="32" Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Center"/>

        ...

    </Grid>
</DataTemplate>

The problem that I have is that the data item for this contains a string called ImagePath that I want to pass into the WaitingImageControl usercontrol and it's not working. The TextBlock works fine and the text displays the ImagePath string just fine. The second WaitingImageControl works fine and the code that handle SourcePath does get passed the "XXX" just fine too. But the first WaitingImageControl never gets passed the ImagePath value from the data item.

This is some sort of binding issue and I know so little about binding that I'm to even sure what to try (or what to show in this question). given that the TextBlock binding works and the second WaitingImageControl binding works, I'm at a loss.

Here's the WaitingImageControl code for the SourcePath property:

    public static readonly DependencyProperty SourcePathProperty = 
        DependencyProperty.Register("SourcePath", typeof(string), typeof(WaitingImageControl), new PropertyMetadata(""));

    public string SourcePath
    {
        get { return m_SourcePath; }
        set 
        {
            if( string.IsNullOrEmpty( value ) )
                return;

            m_SourcePath = value;
            ResourcesStore Store = new ResourcesStore();
            if( Store.Count() == 0 )
            {
                var IgnoreMe = CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync( CoreDispatcherPriority.Normal, () =>
                {
                    // No progress and no image...
                    TheProgressControl.Visibility = Visibility.Collapsed;
                    TheImage.Visibility = Visibility.Collapsed;
                } );
                return;
            }
            ResourceItem Item = Store.getItemByFilename( m_SourcePath );

            LocalInboxService.Instance.InboxStatusChanged -= InboxStatusChanged;
            InboxStatusChanged( null );
            LocalInboxService.Instance.InboxStatusChanged += InboxStatusChanged;
        }
    }

The code is supposed to show the Image element and hide the ProgressRing element when the image has been downloaded.

And the code for the data item, which again, works just fine when the ImagePath is passed automatically to the TextBlock:

    public string ImagePath
    {
        get
        {
             return this._imagePath;
        }

        set
        {
            this._imagePath = value;
            this.SetProperty(ref this._imagePath, value);
       }
    }

Any help is appreciated making the ImagePath to SourcePath binding (below) work:

    <usercontrols:WaitingImageControl SourcePath="{Binding Path=ImagePath}"
     Grid.Row="0" Width="350" Height="165" HorizontalAlignment="Center"
     VerticalAlignment="Stretch" AutomationProperties.Name="{Binding Title}"
     Visibility="{Binding TypeDescription, RelativeSource={RelativeSource
     Mode=TemplatedParent}, Converter={StaticResource TextToVis}}"/>

David Rector David Rector · Accepted Answer · 2015-06-13T06:29:05

After hours of searching, I found a StackOverflow answer to a similar question. The answer was to add a PropertyChanged function to the Propertymetadata. I'm not sure yet what this actually means or why it is only needed here, but it works properly:

    public static readonly DependencyProperty SourceImageResourceIdProperty = 
        DependencyProperty.Register("SourceImageResourceId", typeof(string), typeof(WaitingImageControl), new PropertyMetadata( string.Empty, OnSourcePathPropertyChanged ));


    private static void OnSourcePathPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as WaitingImageControl).SourceImageResourceId = e.NewValue.ToString();
    }

The OnSourcePathPropertyChanged function gets called and the property gets set like it should.

Now I just hope that it wasn't one of the twenty other experiments that actualy fixed this!

Binding property of usercontrol to data

1 Answers