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
Stylefor theGridelement itself (only switching theGridBackgroundproperty in place of theColumnDefinitionWidth, but still being triggered by the sameIsMouseOver, it works fine.) (Added something related to this in the 1st edit below.) - Adding the
Background="Transparent"property to theGridelement, in case that the cursor has nothing to "stick" to. (Of course there is noBackgroundproperty for theColumnDefinitionto try the same.) - Limiting the height of the
Rectanglesto see if the trigger happens over them or in the same column but above/below them. Removing theRectanglesalltoghether (however then it's impossible to even see the triggering effect). - Adding/removing the initial
Setter Property="Width" Value="1*"(above theStyle.Triggerstag) - Explicitly referring to the
Stylewith itsx:Keyproperty. - 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:
- The
IsMouseOverfor let's sayGrid, is inherited from theUIElementclass (UIElement Docs), but for theColumnDefinitionit is inherited fromContentElementclass (ContentElement Docs). - Added my temporary workaround solution, in case it helps someone...