Why does the IsMouseOver trigger not work for a Grid ColumnDefinition?

136 Views Asked by At

Goal:
I'm trying to create an accordion-style Grid, using only a couple of columns (ColumnDefinition).

Expected behavior:
The ColumnDefinition Width should increase to 2* when the mouse cursor is above the column. It should return to 1* when it's not.

Expected behaviour, e.g. for the cursor above the red column.

Actual results:
The columns do not react to the cursor above them. The widths remain fixed, i.e. 1*.


What I've tried:

  • Testing the exact same Style for the Grid element itself (only switching the Grid Background property in place of the ColumnDefinition Width, but still being triggered by the same IsMouseOver, it works fine.) (Added something related to this in the 1st edit below.)
  • Adding the Background="Transparent" property to the Grid element, in case that the cursor has nothing to "stick" to. (Of course there is no Background property for the ColumnDefinition to try the same.)
  • Limiting the height of the Rectangles to see if the trigger happens over them or in the same column but above/below them. Removing the Rectangles alltoghether (however then it's impossible to even see the triggering effect).
  • Adding/removing the initial Setter Property="Width" Value="1*" (above the Style.Triggers tag)
  • Explicitly referring to the Style with its x:Key property.
  • Tried on WPF Core .NET 5.0. and WPF .NET Framework 4.7.2.

I know that there are other ways to make this work (leaving the Column width as Auto and working with the Widths of Rectangles, or maybe changing the Column Widths through events in the code-behind). But using the row/column star unit of width and a single style seems to be the perfect way, eliminating the need to write any additional logic. And I really can't see why this would not work. I'm guessing that right now the cursor is not recognized at all over the column area, but I'm having trouble understanding why.


    <Window.Resources>
        <Style TargetType="ColumnDefinition" x:Key="ColumnAccordionStyle">
            <Setter Property="Width" Value="1*"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Width" Value="1*"></Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Width" Value="2*"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
        </Grid.ColumnDefinitions>
    
        <Rectangle Fill="Blue" Grid.Column="0"/>
        <Rectangle Fill="Red" Grid.Column="1"/>
        <Rectangle Fill="Green" Grid.Column="2"/>
        <Rectangle Fill="Yellow" Grid.Column="3"/>
    </Grid>

EDIT:

0

There are 0 best solutions below