Change colour of data bound Itemtemplate on selected

Question

I have a small problem.

I am binding an XML File to an itemGridView and an itemListView

The Databind: (Works perfectly fine, just providing what I've done here)

 var data = from query in xdoc.Descendants("Colour")
                       select new ColourClass
                       {
                           Colour = "FFFF0000"

                       };
            itemGridView.DataContext = data;
            itemListView.DataContext = data;

I want to change the color of the text when the item in the grid is selected (change the color permanently that is). I wrote up this: It doesn't seem to work.

    void ItemView_ItemClick(object sender, ItemClickEventArgs e)
    {

        ((ColourClass) e.ClickedItem).Colour = "#FF46FF00";

    }

My XAML:

<GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemsGridView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="116,136,116,46"
            ItemsSource="{Binding}"
            ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick"/>

And the standard template:

<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="400" Height="60">
        <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="test" Foreground="{Binding Colour, Mode=TwoWay}" Style="{StaticResource AppIDTextStyle}" Height="60" Margin="15,0,15,0"/>
        </StackPanel>
    </Grid>
</DataTemplate>

How would I go about changing the colour of a particular item in the Standard 250 template used in gridview?

I have tried to change the colour through databinding itself, but am open to easier ways of doing it.

All I need happening is the colour of the item changing from red to green when the user clicks on the item.

Farhan Ghumra Farhan Ghumra · Accepted Answer · 2013-09-27T11:01:35

UPDATE 1

INotifyPropertyChanged will also work for you. I am giving simplest demo which will help you. I suspect how are you binding Foreground with help of string property Colour without using converter class implementing IValueConverter.

XAML

<GridView x:Name="gv" SelectionMode="None" IsItemClickEnabled="True" ItemClick="gv_ItemClick_1">
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBlock FontSize="20" Text="{Binding Color}" Width="200" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

C#

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    gv.ItemsSource = new List<ColourClass> 
    {
        new ColourClass("abc"),
        new ColourClass("dsd"),
        new ColourClass("yhd"),
        new ColourClass("nve"),
        new ColourClass("a3e"),
    };
}

private void gv_ItemClick_1(object sender, ItemClickEventArgs e)
{
    ((ColourClass)e.ClickedItem).Color = "#FF46FF00";
}


public class ColourClass : INotifyPropertyChanged
{
    private string _Color;
    public string Color
    {
        get { return _Color; }
        set { _Color = value; OnPropertyChanged("Color"); }
    }

    public ColourClass(string c)
    {
        Color = c;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string Prop)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(Prop));
        }
    }
}

These will help you.

Metro App ListView SelectedItem Selected VisualState

Controlling The DataTemplate

Change colour of data bound Itemtemplate on selected

2 Answers