Padrão ContextMenu Style - WPF

Question

Eu estou tentando modificar o estilo padrão do ContextMenu em WPF.

Normalmente, você pode creat uma cópia do padrão no Expression Blend usando o Parts Edit Control (modelo)> Editar uma opção de menu Copiar. No entanto eu não posso trabalhar para fora como fazer isso com um ContextMenu. Alguma idéia de como posso obter o estilo padrão para modificar?

Eu estou tentando desativar o lado esquerdo do menu de contexto onde os ícones são mostrados normalmente.

Obrigado!

Update: Talvez eu não estava claro sobre como remover os ícones. Por exemplo, se você tem um menu de contexto com nenhum ícone em seguida, todo o lado esquerdo do menu é espaço desperdiçado. Eu gostaria de modificar o estilo padrão do fundo do menu de contexto para remover este. Simplesmente não sei como acessar este estilo padrão.

Answer 1

Para modelos e estilos que não são acessíveis através do Expression Interface (tais como o modelo ContextMenu), pode utilizar o seguinte código para extrair o template:

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)

Ou em C #

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

Answer 2

Eu encontrei a maneira fácil de obter o modelo ContextMenu no Blend:

1. Eu adicionei um ContextMenu a um botão com alguns menuitems.
2. Em "Diversos" no painel de propriedades, há um item de agrupadas para ContextMenu.
3. Abra isso. Você vai encontrar as habituais propriedades de estilo e modelo.
4. Clique no quadrado para o menu pop-up e selecione Converter para novo recurso ...

É isso. Escolha onde deseja que o modelo / estilo para ser colocado, e você está feito.

Aqui está a marcação que eu tinha:

<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>

E o estilo / modelo que eu tenho:

<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>

Espero que isso ajude. Em rigor MS de costume, as escovas no estilo padrão não são encontrados. :)

Answer 3

Tente isto:. (Coloque este código em seu Resources parte do seu XAML) Isso deve remover a faixa de ícones no menu de contexto

<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

Na verdade, o espaço não é parte do ContextMenu é parte de MenuItem. Então, basta arrastar um MenuItem à sua janela no Expression Blend e criar uma cópia do controle. Espero que a sua declaração ContextMenu é a seguinte

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

E dentro do seu MenuItem ControlTemplate você pode ver o espaço como abaixo. Então, remova a Coluna Ícone e primeiro do grid I marcado na captura de tela.

Answer 5

O espaço extra à esquerda é devido à marca de seleção pouco que aparece quando se ajusta IsCheckable e IsChecked para true em MenuItem.

A marca de verificação é no modelo para MenuItem isso, se você edição que você pode tirá-lo.