Silverlight image bind with .png not work - image

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

Answer 1

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}}" ... />