Standard ContextMenu Stil - WPF

Question

Ich versuche, den Standardstil des ContextMenu in WPF zu ändern.

Normalerweise können Sie eine Kopie des Standards in Expression Blend erstellen, indem Sie die Menüoption Steuerteile bearbeiten (Vorlage) > Kopie bearbeiten verwenden. Ich kann jedoch nicht herausfinden, wie man dies mit einem ContextMenu macht. Irgendeine Idee, wie ich den Standardstil ändern kann?

Ich versuche, die linke Seite des Kontextmenüs zu deaktivieren, wo normalerweise die Symbole angezeigt werden.

Danke!

Aktualisierung: Vielleicht habe ich mich nicht klar ausgedrückt, was das Entfernen der Icons angeht. Wenn Sie zum Beispiel ein Kontextmenü ohne Symbole haben, dann ist die gesamte linke Seite des Menüs verschwendeter Platz. Ich würde gerne den Standardstil des Hintergrunds des Kontextmenüs ändern, um dies zu entfernen. Ich weiß nur nicht, wie ich auf diese Standardvorlage zugreifen kann.

Answer 1

Für Vorlagen und Stile, die nicht über die Expression-Schnittstelle zugänglich sind (z. B. die ContextMenu-Vorlage), können Sie den folgenden Code verwenden, um die Vorlage zu extrahieren:

Dim sb As System.Text.StringBuilder = New System.Text.StringBuilder
Using Writer As TextWriter = New StringWriter(sb)
    System.Windows.Markup.XamlWriter.Save(ContextMenu.Template, Writer)
End Using
Debug.Write(sb.ToString)

Oder in C#

var str = new StringBuilder();
using (var writer = new StringWriter(str))
    XamlWriter.Save(ContextMenu.Template, writer);
Debug.Write(str);

Answer 2

Ich habe einen einfachen Weg gefunden, um die ContextMenu-Vorlage in Blend zu erhalten:

1. Ich habe ein ContextMenu zu einer Schaltfläche mit einigen Menüpunkten hinzugefügt.
2. Unter "Verschiedenes" im Eigenschaftsfenster gibt es ein gruppiertes Element für ContextMenu.
3. Öffnen Sie dies. Hier finden Sie die üblichen Eigenschaften von Stil und Vorlage.
4. Klicken Sie auf das Quadrat für das Popup-Menü, und wählen Sie In neue Ressource konvertieren...

Das war's. Wählen Sie aus, wo die Vorlage/der Stil eingefügt werden soll, und schon sind Sie fertig.

Hier ist der Aufschlag, den ich hatte:

<StackPanel x:Name="LayoutRoot">
    <Button Content="Click for ContextMenu" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.ContextMenu>
            <ContextMenu Template="{DynamicResource ContextMenuControlTemplate1}" Style="{DynamicResource ContextMenuStyle1}">
                <MenuItem Header="File"/>
                <MenuItem Header="Edit"/>
                <MenuItem Header="View"/>
                <MenuItem Header="Recent Files"/>
                    <MenuItem Header="file1.txt"/>
                    <MenuItem Header="file2.txt"/>
            </ContextMenu>
        </Button.ContextMenu>
    </Button>
</StackPanel>

Und der Stil/die Vorlage, die ich bekommen habe:

<Style x:Key="ContextMenuStyle1" TargetType="{x:Type ContextMenu}">
    <Setter Property="Background" Value="{DynamicResource MenuBackgroundBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource WindowBorderBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <Border Uid="Border_93">
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.DropShadowKey}}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Padding" Value="0,0,5,5"/>
                                    <Setter Property="Effect">
                                        <Setter.Value>
                                            <DropShadowEffect BlurRadius="4" Opacity="0.8" ShadowDepth="1"/>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Ich hoffe, das hilft. In gewohnter MS-Gründlichkeit werden die Pinsel im Standardstil nicht gefunden :)

Answer 3

Versuchen Sie Folgendes: (Fügen Sie diesen Code in den Ressourcenteil Ihrer XAML ein) Dies sollte den Symbolstreifen aus dem Kontextmenü entfernen.

<Style TargetType="{x:Type ContextMenu}">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <Border BorderThickness="1" CornerRadius="4" BorderBrush="Black" x:Name="Border" Background="White">
                    <StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="White" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 4

Das Leerzeichen ist nicht Teil des ContextMenu, sondern Teil von MenuItem. Ziehen Sie also einfach ein MenuItem in Ihr Fenster in Expression Blend und erstellen Sie eine Kopie des Controls. Hoffentlich sieht Ihre ContextMenu-Deklaration wie folgt aus

 <ContextMenu  >
    <MenuItem Header="Copy"/>
    <MenuItem Header="Paste"/>
    <MenuItem Header="Clear"/>
 </ContextMenu>

Und in Ihrem MenuItem ControlTemplate können Sie den Raum wie unten sehen. Entfernen Sie also das Symbol und die erste Spalte des Rasters, die ich im Screenshot markiert habe.

Answer 5

Der zusätzliche Platz auf der linken Seite ist auf das kleine Häkchen zurückzuführen, das erscheint, wenn Sie die IsCheckable と IsChecked zu true auf MenuItem .

Das Häkchen ist in der Vorlage für MenuItem Wenn Sie das also bearbeiten, können Sie es herausnehmen.