Reputation: 31
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:
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.)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.)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).Setter Property="Width" Value="1*"
(above the Style.Triggers
tag)Style
with its x:Key
property.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:
IsMouseOver
for let's say Grid
, is inherited from the UIElement
class (UIElement Docs), but for the ColumnDefinition
it is inherited from ContentElement
class (ContentElement Docs).Upvotes: 3
Views: 158