XAML Grouped listView: Changing a row background color

Question

I'm an iOS developer and now i'm approaching to .net windows 8 store application development right now. Well, i have this problem: I've created a grouped listView with XAML like that:

<ListView Margin="0,10,50,50"
          x:Name="listView"
          AutomationProperties.AutomationId="listView"
          AutomationProperties.Name="Grouped Items"
          Grid.Row="1"
          Background="LightGray"
          BorderBrush="#FF818181"
          ItemsSource="{Binding Source={StaticResource groupedIndexViewSource}}"
          ItemTemplate="{StaticResource StandardSubIndexNOIcon320x70ItemTemplate}"
          BorderThickness="0,1,1,1"
          SelectionMode="None"
          IsSwipeEnabled="false"
          IsItemClickEnabled="True"
          ItemClick="itemClicked">
  <ListView.GroupStyle>
    <GroupStyle>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
          <Grid x:Name="Prr"
                Width="315"
                Margin="-5,0,0,2"
                Height="70"
                Background="#FFB9B9B9">
            <Button Width="315"
                    Height="70"
                    Margin="0"
                    Click="HeaderClicked"
                    BorderThickness="0"
                    BorderBrush="{x:Null}"
                    Foreground="{x:Null}"
                    Background="{x:Null}"
                    Padding="0">
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="260" />
                  <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0"
                           Width="250"
                           Margin="10,0,0,0"
                           Text="{Binding Title}"
                           Style="{StaticResource BodyTextStyle}"
                           TextWrapping="NoWrap"
                           FontSize="20"
                           Foreground="#DE000000"
                           VerticalAlignment="Center"
                           TextAlignment="Left"
                           HorizontalAlignment="Left" />
              </Grid>
            </Button>
          </Grid>
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
    </GroupStyle>
  </ListView.GroupStyle>
</ListView>

Now, i would like to change the background color of the header button clicked defined in the headerTemplate, so, in my c# code i have defined this method:

private void HeaderClicked(object sender, RoutedEventArgs e)
    {
        ((Grid)((Button)e.OriginalSource).Parent).Background = new SolidColorBrush(Colors.DarkBlue);
}

The problem is that this instruction is just ignored.

Can you please help me solve this problem?

Thanks in advance.

UPDATES:

With the help of DanM i just found that i actually have a problem on this property: ((Grid)((Button)e.OriginalSource).Parent).Background predefinite type 'Microsoft.CSharp.RuntimeBinder.Binder' is not defined or imported

It is an english translation from italian (my ide is italian).

When i go in references->add reference->assembly->frameworks i can only see a message that says that i have already all references to frameworks, and that i need to use "object viewer" to explore references in the frameworks...

I'm not sure of what it means...

Answer 1

dont do this. do not change the UI elements from code. Rather databind them. You can use a converter to triger on the button. Databind the button itself to a new bool property (Selected), and connect to a converter.

<Button BackGroud="{Bind Selected, Converter={StaticResource selectedToBrushConverter}}" />

there are plenty of articles how to use converters on the internet.

Another thing you could do is to set the style of the button to a resource key. Then you can define Triggers to the GotFocus and LostFocus properties. On gotfocus set the color to one color, on the lostfocus to another.

Here is one of my templates that i let apply to all buttons. You can set a specific key, and bind the button to the styla.

<Style TargetType="{x:Type Button}">
    <Setter Property="Margin" Value ="1" />
    <Setter Property="Background" Value="Gray" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}" >
                <Border Background="{TemplateBinding Background}" Opacity="{TemplateBinding Opacity}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="3"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkOrange" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="Gray" />
            <Setter Property="Opacity" Value="0.95" />
            <!--<Setter Property="BorderThickness" Value="2" />-->
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Background" Value="#82A3FF" />
        </Trigger>

        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="DarkGray" />
        </Trigger>
    </Style.Triggers>

</Style>

This way you have no need to do any eventhandling ;)

Answer 2

The only thing that jumps out at me is that perhaps you should be using Transparent instead of x:Null for your Button brushes.

So, your button markup would become:

<Button Width="315"
        Height="70"
        Margin="0"
        Click="HeaderClicked"
        BorderThickness="0"
        BorderBrush="Transparent"
        Foreground="Transparent"
        Background="Transparent"
        Padding="0">

If this does work, it would be because a button with a Transparent background still accepts a click event, while a button with a null background might not.