Question

我为MenuItems设置了一个样式，如下所示

的App.xaml

<Style x:Key="MenuItemHover" TargetType="MenuItem">
        <Setter Property="Width" Value="50"></Setter>
        <Setter Property="FontFamily" Value="Calibri"></Setter>
        <Setter Property="Template">

            <Setter.Value>
                <ControlTemplate TargetType="MenuItem">

                    <Border x:Name="border"
                            Background="#282828"
                            >

                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="Gray"></Setter>

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

MainWindow.xaml

<Menu x:Name="Menu_Dropdown" Width="150" Background="#282828" Foreground="White" HorizontalAlignment="Left" Grid.Column="0" Grid.ColumnSpan="2" Height="25" VerticalAlignment="Top">
        <MenuItem x:Name="MenuItem_User" Height="25" Header="Nutzer" Style="{DynamicResource MenuItemHover}"></MenuItem>
        <MenuItem x:Name="MenuItem_Kasse" Header="Kasse" Style="{DynamicResource MenuItemHover}"></MenuItem>
        <MenuItem x:Name="MenuItem_Design" Header="Design" Style="{DynamicResource MenuItemHover}"></MenuItem>
    </Menu>

当我使用我的风格＆＃34; MenuItemHover＆＃34;它让文字消失了。其余的工作正常。（所以悬停效果本身 - 当我将鼠标移动时它会改变颜色）

不使用样式标题正常显示。

Answer 1

您的模板应包含ContentPresenter

<Border x:Name="border"Background="#282828" >
     <ContentPresenter Content="{TemplateBinding Header}"/>
</Border>

在MenuItem的原生模板中使用ContentPresenter并设置ContentSource =＆＃34; Header＆＃34;

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
    <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Height="22" SnapsToDevicePixels="true">
        <Grid Margin="-1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="13"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                <ColumnDefinition Width="20"/>
            </Grid.ColumnDefinitions>
            <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
            <Border x:Name="GlyphPanel" BorderBrush="{StaticResource MenuItem.Highlight.Border}" BorderThickness="1" Background="{StaticResource MenuItem.Highlight.Background}" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
                <Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="{StaticResource MenuItem.Selected.Glyph}" FlowDirection="LeftToRight" Height="11" Width="9"/>
            </Border>
            <!-- ContentPresenter which showing MenuItem.Header -->
            <ContentPresenter x:Name="menuHeaderContainer" Grid.Column="2" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        ...
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 2

要使这些代码更好，有几件事情让我们一个接一个地看看。

首先，当你覆盖模板时，你需要知道你没有扩展，而是重写它;因此，您需要添加“明显”部分，而不仅仅是新部分。正如Anton所说，你需要至少一个控件来显示文本本身。请参阅他的答案。

其次，如果要为每个MenuItem使用相同的样式，最好在没有键的情况下定义样式。这种方式将成为MenuItems的默认样式，除非您明确说明，否则它将应用于所有这些样式。（您不需要为每个MenuItem标记添加FontSize="50"。请记住，存在应用样式的层次结构。例如，如果在样式中将字体大小设置为15，则添加{{ 1}}显式的MenuItem之一，MenuItem将使用值50.查看更多相关信息here）

最后，但并非最不重要的是，我认为在样式中进行此类更改的好方法是打开Blend，选择控件，然后创建原始模板的副本：

并自定义该副本。（正如你在下面看到的，这只是ControlTemplate，你需要把它放到一个样式中）这样你可以确定你不会丢失原来的东西。示例（MenuItem ControlTemplate）：

    <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
        <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Grid VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
                <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsHighlighted" Value="True"/>
                    <Condition Property="IsEnabled" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
                <Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

您案件中的相关部分是：

<Trigger Property="IsHighlighted" Value="True">
    <Setter Property="Background" TargetName="templateRoot" Value="#3D26A0DA"/>
    <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
</Trigger>

您可以在此更改背景颜色以达到您想要的效果（我将其更改为红色以便更好地查看）：

您可能还想更改BorderBrush颜色。

C＃WPF菜单项样式让标题消失

2 个答案: