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 theGrid
element itself (only switching theGrid
Background
property in place of theColumnDefinition
Width
, 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 theGrid
element, in case that the cursor has nothing to "stick" to. (Of course there is noBackground
property for theColumnDefinition
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 theRectangles
alltoghether (however then it's impossible to even see the triggering effect). - Adding/removing the initial
Setter Property="Width" Value="1*"
(above theStyle.Triggers
tag) - Explicitly referring to the
Style
with itsx: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:
- The
IsMouseOver
for let's sayGrid
, is inherited from theUIElement
class (UIElement Docs), but for theColumnDefinition
it is inherited fromContentElement
class (ContentElement Docs). - Added my temporary workaround solution, in case it helps someone...