Guten Abend,
ich möchte, dass der Content von einem Button nur angezeigt wird, wenn die Maus sich darüber befindet.
Das Ein- und Ausblenden soll aber mit einer kleinen DoubleAnimation und der TargetProperty Opacity geschehen.
Soweit funktioniert das auch wunderbar, allerdings werden die Trigger nur ausgelöst, wenn sich die Maus direkt über dem Content befindet, der Rest des Buttons wird ignoriert. Das Gleiche gilt für den Click, das Event wird nur ausgelöst, wenn tatsächlich auf das deutlich kleinere Bild geklickt wird.
Um das zu verdeutlichen:
Ein Button nimmt die gesamte Höhe des Monitors ein und hat keine sichtbare Oberfläche. Einzig das kleine Bild soll zu sehen sein, wenn die Maus über diesen Button fährt oder ihn klickt.
Im Moment löse ich das so, indem ich ein fast lehres Template mit einem ContentPresenter und zwei EventTrigger(für die Events MouseEnter und MouseLeave) als Style dem Button gebe:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
| <Style x:Key="ShowOnMouseOverButton" TargetType="Button">
<Setter Property="Opacity" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<TimelineCollection>
<DoubleAnimation From="0.0" To="1.0" Duration="0:0:0.2" RepeatBehavior="1x" Storyboard.TargetProperty="Opacity" />
</TimelineCollection>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<TimelineCollection>
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:0.2" RepeatBehavior="1x" Storyboard.TargetProperty="Opacity" />
</TimelineCollection>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style> |
Der Button liegt in einem Grid, mit dem ich die Flächen, wo der Button sein soll, abstecke:
XML-Daten
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
| <Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="28*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Button Style="{StaticResource ShowOnMouseOverButton}" Command="{Binding MyCommandProperty}">
<Image Source="{Binding MyImageProperty}" Width="50" />
</Button>
</Grid> |
Der ursprüngliche Button kann das, was ich will, allerdings mache ich mir das mit dem Template kaputt.
Weiß jemand, wie ich das einfach nachbauen oder mit übernehmen kann, oder wie ich mein Vorhaben anders lösen könnte?
Beste Grüße
