Menü in WPF?
<Menu FontSize="25" Foreground="White" HorizontalAlignment="Stretch" Background="Transparent">
<MenuItem Header="Modelle"/>
<MenuItem Header="Elektromodelle"/>
<MenuItem Header="Weitere Optionen"/>
</Menu>
Kann mir jemand sagen wie ich diesen Code so bearbeiten kann, dass
- das gesamte Menü weiß unterstrichen wird
- Jedes Menüelement blau unterstrichen wird wenn ich mit der Maus drüber hovere
Ich versuche die BMW Website nachzubauen, ihr könnt also dort gerne nachschauen, dann seht ihr wie ich es mir vorgestellt habe. ChatGPT hat leider nichts sinnvolles ausgespuckt..
1 Antwort
Du kannst einen eigenen Style für die MenuItems definieren, welcher unter anderem das Template der Komponenten überschreibt, als auch einen Mouseover-Trigger setzt.
Im folgenden Beispiel lege ich den Style als Ressource des aktuellen Fensters an:
<Window.Resources>
<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<StackPanel Orientation="Vertical">
<MenuItem Foreground="White" Header="{TemplateBinding Header}" Padding="0 0 0 10" />
<Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="0 0 0 4" Width="50" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Ich habe das Template hierbei in zwei Komponenten unterteilt: Dem eigentlichen MenuItem (du könntest ebenso einen TextBlock o.ä. stattdessen verwenden) sowie einem Border, der unter ersterer Komponente liegt. Einfacherhalber orientiert sich die Rahmenfarbe an der Vordergrundfarbe der äußeren MenuItem-Komponente und die Schriftfarbe des MenuItem ist konstant weiß.
Der Style Trigger wiederum schaltet die Vordergrundfarbe auf Blau um.
Anschließend kannst du jedem MenuItem, welches sich wie beschrieben verhalten soll, diesen Style zuordnen:
<MenuItem Header="..." Style="{StaticResource MenuItemStyle}" />