[WPF] ContextMenu stylen

  • C#

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von Samus Aran.

    [WPF] ContextMenu stylen

    Ich hab hier in WPF ein Kontextmenü, das so definiert ist:
    Spoiler anzeigen

    XML-Quellcode

    1. <ContextMenu>
    2. <MenuItem Click="AdjustClicked" Header="Adjust Color" Template="{StaticResource MenuItemTemplate}">
    3. <MenuItem.Icon>
    4. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/monitor-wallpaper.png" />
    5. </MenuItem.Icon>
    6. </MenuItem>
    7. <MenuItem Header="Settings" Template="{StaticResource MenuItemTemplate}">
    8. <MenuItem.Icon>
    9. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/gear.png" />
    10. </MenuItem.Icon>
    11. <MenuItem Click="ShowSettings" Header="Soup Rice" Template="{StaticResource MenuItemTemplate}">
    12. <MenuItem.Icon>
    13. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/gear.png" />
    14. </MenuItem.Icon>
    15. </MenuItem>
    16. </MenuItem>
    17. <Separator />
    18. <MenuItem Click="BuyMeACoffee" Header="Buy me a coffee :)" Template="{StaticResource MenuItemTemplate}">
    19. <MenuItem.Icon>
    20. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/cup.png" />
    21. </MenuItem.Icon>
    22. </MenuItem>
    23. <Separator />
    24. <MenuItem Click="ShowAbout" Header="About" Template="{StaticResource MenuItemTemplate}">
    25. <MenuItem.Icon>
    26. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/robot.png" />
    27. </MenuItem.Icon>
    28. </MenuItem>
    29. <MenuItem Click="CloseApp" Header="Close" Template="{StaticResource MenuItemTemplate}">
    30. <MenuItem.Icon>
    31. <Image Height="16" Width="16" Source="/AeroAdjuster;component/Icons/close.png" />
    32. </MenuItem.Icon>
    33. </MenuItem>
    34. </ContextMenu>

    Das angegebene Template sieht so aus:
    Spoiler anzeigen

    XML-Quellcode

    1. <ControlTemplate x:Key="MenuItemTemplate" TargetType="MenuItem" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    2. <Grid SnapsToDevicePixels="True">
    3. <Rectangle RadiusX="2" RadiusY="2" Fill="{TemplateBinding Panel.Background}" Stroke="{TemplateBinding Border.BorderBrush}" StrokeThickness="1" Name="Bg" />
    4. <Rectangle RadiusX="2" RadiusY="2" Stroke="#00FFFFFF" StrokeThickness="1" Name="InnerBorder" Margin="1,1,1,1" />
    5. <Grid>
    6. <Grid.ColumnDefinitions>
    7. <ColumnDefinition Width="Auto" MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" />
    8. <ColumnDefinition Width="4" />
    9. <ColumnDefinition Width="*" />
    10. <ColumnDefinition Width="37" />
    11. <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
    12. <ColumnDefinition Width="17" />
    13. </Grid.ColumnDefinitions>
    14. <ContentPresenter Content="{TemplateBinding MenuItem.Icon}" ContentSource="Icon" Name="Icon" Margin="1,1,1,1" VerticalAlignment="Center" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
    15. <Border BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" BorderBrush="#FFCDD3E6" Background="#FFE6EFF4" Name="GlyphPanel" Width="22" Height="22" Margin="1,1,1,1" Visibility="Hidden"><Path Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" Name="Glyph" Width="9" Height="11" FlowDirection="LeftToRight" />
    16. </Border>
    17. <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding HeaderedContentControl.Header}" ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}" ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Grid.Column="2" />
    18. <TextBlock Text="{TemplateBinding MenuItem.InputGestureText}" Margin="{TemplateBinding Control.Padding}" Visibility="Collapsed" Grid.Column="4" />
    19. <Path Data="M0,0L4,3.5 0,7z" Fill="{TemplateBinding TextElement.Foreground}" Margin="4,0,0,0" VerticalAlignment="Center" Grid.Column="5" />
    20. </Grid>
    21. <Popup IsOpen="False" Placement="Right" HorizontalOffset="-2" VerticalOffset="-3" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" AllowsTransparency="True" Name="PART_Popup" Focusable="False">
    22. <mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw">
    23. <Border BorderThickness="1,1,1,1" BorderBrush="#FF959595" Background="#FFF5F5F5" Name="SubMenuBorder">
    24. <ScrollViewer Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}" Name="SubMenuScrollViewer" Margin="1,0,1,0">
    25. <Grid RenderOptions.ClearTypeHint="Enabled">
    26. <Canvas Width="0" Height="0" HorizontalAlignment="Left" VerticalAlignment="Top">
    27. <Rectangle Fill="#FFF5F5F5" Name="OpaqueRect" Width="Auto" Height="Auto" />
    28. </Canvas>
    29. <Rectangle RadiusX="2" RadiusY="2" Fill="#FFF1F1F1" Width="28" Margin="1,2,1,2" HorizontalAlignment="Left" />
    30. <Rectangle Fill="#FFE2E3E3" Width="1" Margin="29,2,0,2" HorizontalAlignment="Left" />
    31. <Rectangle Fill="#FFFFFFFF" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
    32. <ItemsPresenter Name="ItemsPresenter" Margin="2,2,2,2" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" />
    33. </Grid>
    34. </ScrollViewer>
    35. </Border>
    36. </mwt:SystemDropShadowChrome>
    37. </Popup>
    38. </Grid>
    39. <ControlTemplate.Triggers>
    40. <Trigger Property="MenuItem.IsSuspendingPopupAnimation">
    41. <Setter Property="Popup.PopupAnimation" TargetName="PART_Popup">
    42. <Setter.Value>
    43. <x:Static Member="PopupAnimation.None" />
    44. </Setter.Value>
    45. </Setter>
    46. <Trigger.Value>
    47. <s:Boolean>True</s:Boolean>
    48. </Trigger.Value>
    49. </Trigger>
    50. <Trigger Property="MenuItem.IsHighlighted">
    51. <Setter Property="Shape.Stroke" TargetName="InnerBorder">
    52. <Setter.Value>
    53. <SolidColorBrush>#D1DBF4FF</SolidColorBrush>
    54. </Setter.Value>
    55. </Setter>
    56. <Trigger.Value>
    57. <s:Boolean>True</s:Boolean>
    58. </Trigger.Value>
    59. </Trigger>
    60. <Trigger Property="MenuItem.Icon">
    61. <Setter Property="UIElement.Visibility" TargetName="Icon">
    62. <Setter.Value>
    63. <x:Static Member="Visibility.Collapsed" />
    64. </Setter.Value>
    65. </Setter>
    66. <Trigger.Value>
    67. <x:Null />
    68. </Trigger.Value>
    69. </Trigger>
    70. <Trigger Property="MenuItem.IsChecked">
    71. <Setter Property="UIElement.Visibility" TargetName="GlyphPanel">
    72. <Setter.Value>
    73. <x:Static Member="Visibility.Visible" />
    74. </Setter.Value>
    75. </Setter>
    76. <Setter Property="UIElement.Visibility" TargetName="Icon">
    77. <Setter.Value>
    78. <x:Static Member="Visibility.Collapsed" />
    79. </Setter.Value>
    80. </Setter>
    81. <Trigger.Value>
    82. <s:Boolean>True</s:Boolean>
    83. </Trigger.Value>
    84. </Trigger>
    85. <Trigger Property="Popup.HasDropShadow" SourceName="PART_Popup">
    86. <Setter Property="FrameworkElement.Margin" TargetName="Shdw">
    87. <Setter.Value>
    88. <Thickness>0,0,5,5</Thickness>
    89. </Setter.Value>
    90. </Setter>
    91. <Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
    92. <Setter.Value>
    93. <Color>#71000000</Color>
    94. </Setter.Value>
    95. </Setter>
    96. <Trigger.Value>
    97. <s:Boolean>True</s:Boolean>
    98. </Trigger.Value>
    99. </Trigger>
    100. <Trigger Property="MenuItem.IsHighlighted">
    101. <Setter Property="Shape.Fill" TargetName="Bg">
    102. <Setter.Value>
    103. <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
    104. <LinearGradientBrush.GradientStops>
    105. <GradientStop Color="#34C5EBFF" Offset="0" />
    106. <GradientStop Color="#3481D8FF" Offset="1" />
    107. </LinearGradientBrush.GradientStops>
    108. </LinearGradientBrush>
    109. </Setter.Value>
    110. </Setter>
    111. <Setter Property="Shape.Stroke" TargetName="Bg">
    112. <Setter.Value>
    113. <SolidColorBrush>#8571CBF1</SolidColorBrush>
    114. </Setter.Value>
    115. </Setter>
    116. <Trigger.Value>
    117. <s:Boolean>True</s:Boolean>
    118. </Trigger.Value>
    119. </Trigger>
    120. <Trigger Property="UIElement.IsEnabled">
    121. <Setter Property="TextElement.Foreground">
    122. <Setter.Value>
    123. <SolidColorBrush>#FF9A9A9A</SolidColorBrush>
    124. </Setter.Value>
    125. </Setter>
    126. <Setter Property="Panel.Background" TargetName="GlyphPanel">
    127. <Setter.Value>
    128. <SolidColorBrush>#FFEEE9E9</SolidColorBrush>
    129. </Setter.Value>
    130. </Setter>
    131. <Setter Property="Border.BorderBrush" TargetName="GlyphPanel">
    132. <Setter.Value>
    133. <SolidColorBrush>#FFDBD6D6</SolidColorBrush>
    134. </Setter.Value>
    135. </Setter>
    136. <Setter Property="Shape.Fill" TargetName="Glyph">
    137. <Setter.Value>
    138. <SolidColorBrush>#FF848589</SolidColorBrush>
    139. </Setter.Value>
    140. </Setter>
    141. <Trigger.Value>
    142. <s:Boolean>False</s:Boolean>
    143. </Trigger.Value>
    144. </Trigger>
    145. <Trigger Property="ScrollViewer.CanContentScroll" SourceName="SubMenuScrollViewer">
    146. <Setter Property="Canvas.Top" TargetName="OpaqueRect">
    147. <Setter.Value>
    148. <Binding Path="VerticalOffset" ElementName="SubMenuScrollViewer" />
    149. </Setter.Value>
    150. </Setter>
    151. <Setter Property="Canvas.Left" TargetName="OpaqueRect">
    152. <Setter.Value>
    153. <Binding Path="HorizontalOffset" ElementName="SubMenuScrollViewer" />
    154. </Setter.Value>
    155. </Setter>
    156. <Trigger.Value>
    157. <s:Boolean>False</s:Boolean>
    158. </Trigger.Value>
    159. </Trigger>
    160. </ControlTemplate.Triggers>
    161. </ControlTemplate>

    Warum sieht das ContextMenu jetzt so aus:

    und weshalb wird das Untermenü bei Settings nicht mehr geöffnet?

    (Tl;dr: Wie style ich ein ContextMenu in WPF korrekt?)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „nikeee13“ ()

Facebook
Telefonspende