CODEWITHSUNDEEP
c#xamlwindows-8windows-runtimewinrt-xaml
Bitsian
Bitsian

Reputation: 2258

How to give different images to grid view items without having to create different templates?

I am adding items to a grid view on the click of a button and i want different items to have different images. There are 6 items and i dont want to create 6 different templates. Is there any way that i can do this with a single template? below is a code snippet of my data template :

<StackPanel>


                <!-- Shadow -->
                <Image Source="{Binding Time, Converter={StaticResource ThemeImageConverterClockShadow}}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                    Canvas.Top="25"/>



                <!-- Face -->
                <Image Source="{Binding Time, Converter={StaticResource FaceBackground}}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                    Canvas.Top="10" />
<StackPanel/>

I want to change only the shadow image for each item. I tried binding a property and returning a different image based upon the no. of grid view items present. But the image changes for all the grid view items whenever a new item is added to the gridview

Update: Gridview if it helps

<GridView              


         x:Name="ThemeGridView"                    
                ItemsSource="{Binding Clocks}" 
                ItemTemplate="{StaticResource WorldClockTemplate}"
                SelectionChanged="Clock_SelectionChanged"              
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" ItemContainerStyle="{StaticResource GridViewItemStyle1}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

        </GridView>

Upvotes: 0

Views: 717

Answers (1)

odyss-jii
odyss-jii

Reputation: 2719

I think I know what's going on with your code. I'm guessing that you are using the GridView item count in your converter ThemeImageConverterClockShadow to select the appropriate image. Whenever a new item is added to the GridView all the bindings will most likely be reevaluated, which explains why you get the same image for all the rows. What you should be doing instead is to have a property on your data item which indicates which shadow image to use, and the value should be set when you add a new item to the ItemsSource.

One alternative would be:

<StackPanel>
    <!-- Shadow -->
    <Image Source="{Binding ShadowImage}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                Canvas.Top="25"/>

    <!-- Face -->
    <Image Source="{Binding Time, Converter={StaticResource FaceBackground}}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                Canvas.Top="10" />
<StackPanel/>

where you have a property ImageSource ShadowImage on your data item in the ItemsSource:

public class MyDataItem 
{
    ....
    public ... Time { get { ... } set { ... } }
    public ImageSource ShadowImage { get { ... } set { ... } }
}

You then set the image when you create the data item in the code which adds a row to the GridView. Alternatively, you could add some ShadowType property instead, and then still use the converter but bind to the entire data item and then use both the Time and ShadowType to select the image:

<StackPanel>
    <!-- Shadow -->
    <Image Source="{Binding Converter={StaticResource ThemeImageConverterClockShadow}}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                Canvas.Top="25"/>

    <!-- Face -->
    <Image Source="{Binding Time, Converter={StaticResource FaceBackground}}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" Canvas.Left="10"
                Canvas.Top="10" />
<StackPanel/>

with a Converter along the lines of:

public class ThemeImageConverterClockShadow : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var dataItem = value as MyDataItem;
        if (dataItem != null)
        {
           // Use dataItem.Time and dataItem.ShadowType to select an image
        }
    }
}

Upvotes: 1

Related Questions