burneech
burneech

Reputation: 31

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

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:


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:

Upvotes: 3

Views: 158

Answers (0)

Related Questions