Change the background of a grid in run time

Question

I have grids that are set to have a light gray background and I'm wondering how to change the background of a grid when the mouse hovers over a specific grid. I currently end up having my screen completely black if I change the target type from border to grid:

What I get

What I want but for all the light gray to be yellow

XAML

<DataTemplate x:Key="PropertyNodeTemplate">
        <Grid VerticalAlignment="Top" HorizontalAlignment="Center" Background="LightGray">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border VerticalAlignment="Center" Grid.Row="0">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Background" Value="Yellow"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Label Name="PropertyTitle" Content="Property Shnarf" VerticalAlignment="Top" HorizontalAlignment="Center">
                </Label>
            </Border>
            <Button Name="AddScenario" Click="AddScenarioButton_OnClick" Grid.Row="3" BorderThickness="0">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border BorderThickness="0">
                                        <ContentPresenter/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsHighlighted}" Value="False">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
                <Border BorderThickness="1,1,1,1" VerticalAlignment="Center" Background="LightGray">
                    <Border.BorderBrush>
                        <DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
                            <DrawingBrush.Drawing>
                                <DrawingGroup>
                                    <GeometryDrawing Brush="LightGray">
                                        <GeometryDrawing.Geometry>
                                            <GeometryGroup>
                                                <RectangleGeometry Rect="0,0,50,50" />
                                                <RectangleGeometry Rect="50,50,50,50" />
                                            </GeometryGroup>
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup>
                            </DrawingBrush.Drawing>
                        </DrawingBrush>
                    </Border.BorderBrush>
                    <StackPanel Margin="2" Width="120" Orientation="Horizontal" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type syncfusion:Node}}}">
                        <Image Source="{StaticResource ImageBkgPlus}" Width="16" Height="16" Margin="5"/>
                        <Label Width="70" FontSize="10" VerticalAlignment="Center" Content="Add Scenario">
                        </Label>
                    </StackPanel>
                </Border>
            </Button>
        </Grid>
    </DataTemplate>

score 3 · Accepted Answer · edited May 23 '17 at 11:44

3

Your Borderis only in row 0 of your grid, so that is the only part that reponds to your DataTrigger. Why not put the use Grid.Style rather than Border.Style:

<DataTemplate x:Key="PropertyNodeTemplate">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.Style>
          <Style TargetType="Grid">
            <Setter 
               Property="BackGround"
               Value="LightGray" />
            <Style.Triggers>
              <DataTrigger 
                Binding="{Binding IsHighlighted}" 
                value="True">
                <Setter 
                   Property="Background" 
                   Value="Yellow" />
              </DataTrigger>
            </Style.Triggers>
          </Style>
        </Border.Style>
      ...
    </Grid>
</DataTemplate>

You might use IsMouseover, instead of the DataTrigger, depending on what you want: WPF Grid IsMouseOver Property.

edited May 23 '17 at 11:44

Community

1
1

answered Oct 05 '15 at 10:26

PScr

449
2
11

OK thanks a lot, I'll give this a try and let you know – Ryan Archibald Oct 05 '15 at 10:35
Still just get the black screen above, even using the IsMouseOver instead of datatrigger :( – Ryan Archibald Oct 05 '15 at 10:43
I made a mistake, and left TargetType ="Border". It should be TartgetType="Grid". I think it might have been hitting the `Border` of your `Window`. I think you probably also need to put the `LightGray`into the Style, because of the priorities in using local/style setters. I'll edit for that, too... – PScr Oct 05 '15 at 10:51
Sorry, I can't check the code right now, but I think barring spelling mistakes, it should work. – PScr Oct 05 '15 at 11:05

Change the background of a grid in run time

1 Answers1