Silverlight image bind with .png not work

Question

I was careful to check this in the forums, but I did not find a solution.

This works perfect:

 <Image Margin="0,0,0,0" Stretch="UniformToFill" Source="http://localhost:5313/Images/1.png"    MaxHeight="140" MinHeight="155" VerticalAlignment="Top"/>

Why does this not work:

<Image Margin="0,0,0,0" Stretch="UniformToFill" Source="{Binding ImagenSeleccionada}"    MaxHeight="140" MinHeight="155" VerticalAlignment="Top"/>

The code behind.

    private string _imagenSeleccionada;
    public string ImagenSeleccionada
    {
        get
        {
            return this._imagenSeleccionada;
        }
        set
        {
            if (this._imagenSeleccionada == value)
                return;

            this._imagenSeleccionada = value;
        }
    }

Main Page

The Control

ItemsSource="{Binding FilteredTemperatureReports}" UseLayoutRounding="False" RowHeight="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionMode="Single" HorizontalGridLinesBrush="Transparent" VerticalGridLinesBrush="Transparent" Background="{x:Null}" BorderBrush="{x:Null}" IsFilteringAllowed="False" RowIndicatorVisibility="Collapsed" CanUserFreezeColumns="False" ShowGroupPanel="False" HeaderRowStyle="{StaticResource GridViewHeaderRowStyle}" GroupRowStyle="{StaticResource GridViewGroupRowStyle}" RowStyle="{StaticResource GridViewRowStyle}">

    <telerik:GridViewDataColumn Width="150" DataMemberBinding="{Binding Medio}" IsReadOnly="True" Header="Medio" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyleFirst}"
                                                CellStyle="{StaticResource GridViewCellStyle}" />
    <telerik:GridViewDataColumn Width="80" DataMemberBinding="{Binding TimeStamp}" IsReadOnly="True" Header="Fecha" DataFormatString="{} {0:dd/MM/yyyy}"  
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"
                                                CellStyle="{StaticResource GridViewCellStyle}"/>
    <telerik:GridViewDataColumn Width="200" DataMemberBinding="{Binding Producto}" IsReadOnly="True" Header="Producto" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"
                                                CellStyle="{StaticResource GridViewCellStyle}"/>
    <telerik:GridViewDataColumn Width="180" DataMemberBinding="{Binding Version}" IsReadOnly="True" Header="Version" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"
                                                CellStyle="{StaticResource GridViewCellStyle}"/>
    <telerik:GridViewDataColumn Width="80" DataMemberBinding="{Binding Inversion}" IsReadOnly="True" Header="Inversion" DataFormatString="{}{0:C}" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"
                                                CellStyle="{StaticResource GridViewCellStyle}"/>
    <telerik:GridViewDataColumn Width="80" DataMemberBinding="{Binding Ytd}" IsReadOnly="True" Header="YTD" DataFormatString="{}{0:C}" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}"
                                                CellStyle="{StaticResource GridViewCellStyle}"/>
    <telerik:GridViewColumn Width="80" IsReadOnly="True" Header="Product" 
                                                HeaderCellStyle="{StaticResource GridViewHeaderCellStyle}" 
                                                CellStyle="{StaticResource GridViewCellStyle}" >

The Code Behin the Grid.

void OnGridViewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangeEventArgs e)
{
    var grid = sender as RadGridView;
    if (grid.SelectedItem != null)
    {
        grid.ScrollIntoView(grid.SelectedItem);
            var _internetDataViewModel = this.DataContext as InternetDataViewModel;
            _internetDataViewModel.ImagenSeleccionada = ((ExecutiveDashboard.TemperatureData)(grid.SelectedItem)).Image;
    }
}

What is not ok?

Thnaks

Anders Gustafsson Anders Gustafsson · Accepted Answer · 2013-05-17T07:04:48

The {Binding} does not automatically know where to locate ImagenSeleccionada.

You need to either link it to a specific element, typically your named user control:

<UserControl x:Name="ThisCtrl" .... >
    <Image Source="{Binding ImagenSeleccionada, ElementName=ThisCtrl}" ... />

or explicitly set the DataContext of your user control to itself; the DataContext will then propagate down to the user control children:

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}" ... >
    <Image Source="{Binding ImagenSeleccionada}" ... />

(alternatively you can set the DataContext to this in the code-behind constructor,)

or you can set the relative source of your image binding to the ancestor that is the user control, preferably via its type:

<UserControl ...>
    <Image Source="{Binding ImagenSeleccionada,
           RelativeSource={RelativeSource AncestorType=local:YourUserControlType}}" ... />

Silverlight image bind with .png not work

The code behind.

1 Answers