DataBinding GridView C# windows store app

Question

I have a DataTemplate as defined below

<DataTemplate x:Key="IconTextDataTemplate">
        <StackPanel Orientation="Horizontal" Width="220" Height="60">
            <Border Background="#66727272" Width="40" Height="40" Margin="10">
                <Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>
            </Border>
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                <TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
                <TextBlock  Text="{Binding Path=NumberOfPhotos}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>

I then have a GridView that uses the DataTemplate

<GridView x:Name="gv" Grid.Row="0" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" 
                  Width="Auto" Height="Auto" SelectionMode="Multiple" ItemTemplate="{StaticResource IconTextDataTemplate}" ItemsSource="{Binding}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid MaximumRowsOrColumns="8" 
                  VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Center" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

I then set the GridViews dataContext to a collection

gv.DataContext = setCollection;

The object setCollection is a collection of objects that has properties of NumberOfPhotos and Title so the binding

<TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />
                <TextBlock  Text="{Binding Path=NumberOfPhotos}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis"/>

works. However, the object does not have a property for the ImageSource

<Image Source="/SampleImage.png" Height="32" Width="32" Stretch="UniformToFill"/>

Instead of binding to a property of the objects, I want to bind to a compound structure made up of two strings and a property of the object, like so:

ImageSource = "/files/thumbnails/" + {Binding Path=Title} + fileType;

So when evaluated, the ImageSource becomes

/files/thumbnails/titleOfObject.png

where the titleOfObject is equal to that value here

<TextBlock Text="{Binding Path=Title}" Margin="10,0,0,0" Width="170" Height="20" TextTrimming="WordEllipsis" />

How can I make this happen?

Jacob Proffitt Jacob Proffitt · Accepted Answer · 2013-01-22T16:14:10

You're probably better off viewing your bound objects as ViewModels. Conceptually, that means the job of the ViewModel object is to prepare the data for view. That includes things like massaging the title to be bound to a Source attribute. So on your object (or a derived object, or a formal ViewModel of your object), create a property that does that calculation for you.

public string TitleImageSource
{
    get
    {
        return string.Format(@"/files/thumbnails/{0}{1}", this.Title, fileType);
    }
}

And then bind to that property in your Image.

An alternative is to create a converter for the binding. The converter might be something like:

public sealed class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return string.Format(@"/files/thumbnails/{0}{1}", value, parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return string.Empty;
    }
}

Then reference that converter on the Source binding on the Image tag.

DataBinding GridView C# windows store app

1 Answers