Stopbyte

UWP - Binding WinRT Image Source to StorageFile Object is not working

Software Development WinRT & UWP
#1

i am trying to bind my image’s source property into a StorageFile But it’s failing.

i don’t know what’s wrong but here is the XAML code:

<Style x:Key="SearchListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate DataType="model:DatabaseItem" >
                <Border BorderThickness="0,0,0,1" BorderBrush="#e9e9e9" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="80">
                    <Grid>
                        <!-- The following Image is the concerned. -->
                        <Image Width="93" Height="61" Margin="12,0,0,0" VerticalAlignment="Center" Source="{Binding StorageFile}" 
                               Stretch="UniformToFill" HorizontalAlignment="Left" />
                        <TextBlock Text="{Binding Name}" Margin="115,15,0,0" Foreground="#787878" FontFamily="Arial" 
                                   FontSize="12" FontWeight="Bold" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <TextBlock Text="{Binding Author}" Margin="115,34,0,0" FontFamily="Arial" FontSize="12" FontWeight="Bold" 
                                   Foreground="{Binding Installed, Converter={StaticResource InstalledByColorConverter}}" 
                                   VerticalAlignment="Top" HorizontalAlignment="Left" />
                   </Grid>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

StorageFile property is defined in the model:DatabaseItem Class.

public StorageFile StorageFile {
    get
    {
        return _StorageFile;
    }
    set
    {
        StorageFile = value;
        OnPropertyChanged("StorageFile");
    }
}
2 Likes
#2

i don’t think you can simply bind an Image Source to a StorageFile. instead use a string or a converter.

1 Like
#3

The problem is that The Image.Source Property doesn’t recognize or expect a Value of StorageFile Type.

But the good news there are 2 or 3 solutions:​

1. Use Simple String instead of StorageFile
That can be done by replacing your Property’s Type from StorageFile into String as follows:

public string StorageFile {
    get
    {
        return _StorageFile;
    }
    set
    {
        StorageFile = value;
        OnPropertyChanged("StorageFile");
    }
}

If the Value of this string is a correctly formed Path string then the binding should work without any issues.

Note: Even Image URL values are allowed, and the downloading, displaying…etc is all handled by the .NET framework internally, so you don’t need to bother with the details. this is personally my favorite one.

2. Use ImageSource Inherited class
This will allow you to handle the image loading by yourself, and you can simply do that by replacing StorageFile Property Type into string.

3. Use a IValueConverter
This is the hardest method, furthermore it’s not advice-able that you use IValueConverter for such heavy long operations, as the DataTemplate snippet you quoted above shows that you need it for a ListBoxItem, Thus i wont go further in explaining it, just giving you an idea of what you “may” do.

2 Likes
#4

I think you may simply bind to something like this: "StorageFile.FilePath"

#5

I would simply use a File Path as a string or in the worst cases an Uri object will do.

something like:

public Uri FilePath
{
    get {return _file_path;}
    set {_file_path = value; OnPropertyChanged("FilePath");}
}

And bind your image to that Property instead of FileStorage.

if a FileStorage property is a must then i suggest that you bind to an Internal property within FileStorage Class something like: FileStorage.Path, FileStorage.FileName…etc