自定義菜單WPF（XAML）

我們在我們的服務中開發了wpf xaml與powershell腳本之間的鏈接。其實，我們真的沒有像文本框，richtextbox，按鈕等每個簡單的控制困難...自定義菜單WPF（XAML）

但現在，我們想要嘗試使記事本菜單例如（文件，編輯等...）。目標是有這樣的菜單樣式：Black Menu

我已經閱讀了許多線程在這裏和其他網站關於造型，但沒有任何工作（許多代碼與C＃使用，所以修改它很複雜）。

如果我理解正確，我們需要爲我們的菜單創建一個自定義樣式。例如，在這裏我的菜單：

<Window x:Class="Test.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:eo="http://schemas.essentialobjects.com/wpf/" 
     Title="MainWindow" Height="250" Width="350"> 
    <StackPanel> 
     <Menu> 
      <MenuItem Header="_File"> 
       <MenuItem Header="_New" /> 
       <MenuItem Header="_Save" /> 
       <MenuItem Header="_Quit" /> 
      </MenuItem> 
      <MenuItem Header="_Edit"> 
       <MenuItem Header="_Copy" /> 
       <MenuItem Header="_Cut" /> 
       <MenuItem Header="_Paste" /> 
      </MenuItem> 
     </Menu> 
    </StackPanel> 
</Window>

我需要把自定義樣式和如何？（背景黑色，文字白色，懸停淺藍色，子菜單背景黑色沒有白色邊框）

感謝您的幫助和抱歉，如果我不清楚我的要求。很難解釋。

來源

2016-03-21 Steve A.

嘗試這樣：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:WpfApplication1" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 

     <Style x:Key="menuParentStyle" TargetType="MenuItem"> 
      <Setter Property="Background" Value="Black"/> 
      <Setter Property="Foreground" Value="White"/> 
     </Style> 


     <SolidColorBrush x:Key="Menu.Static.Foreground" Color="White"/> 
     <SolidColorBrush x:Key="Menu.Static.Background" Color="Black"/> 
     <SolidColorBrush x:Key="Menu.Static.Border" Color="Transparent"/> 
     <Style x:Key="MenuItemStyle1" TargetType="{x:Type MenuItem}"> 
      <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
      <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
      <Setter Property="Background" Value="Black"/> 
      <Setter Property="BorderBrush" Value="Transparent"/> 
      <Setter Property="Foreground" Value="White"/> 
      <Setter Property="BorderThickness" Value="0"/> 
      <Setter Property="ScrollViewer.PanningMode" Value="Both"/> 
      <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> 
      <Setter Property="Template" Value="{DynamicResource MenuItemControlTemplate1}"/> 
      <Style.Triggers> 
       <Trigger Property="Role" Value="TopLevelHeader"> 
        <Setter Property="Background" Value="Transparent"/> 
        <Setter Property="BorderBrush" Value="Transparent"/> 
        <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/> 
        <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> 
        <Setter Property="Padding" Value="6,0"/> 
       </Trigger> 
       <Trigger Property="Role" Value="TopLevelItem"> 
        <Setter Property="Background" Value="{StaticResource Menu.Static.Background}"/> 
        <Setter Property="BorderBrush" Value="{StaticResource Menu.Static.Border}"/> 
        <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/> 
        <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> 
        <Setter Property="Padding" Value="6,0"/> 
       </Trigger> 
       <Trigger Property="Role" Value="SubmenuHeader"> 
        <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/> 
       </Trigger> 
       <Trigger Property="IsMouseOver" Value="true"> 
        <Setter Property="Background" Value="Pink" /> 
       </Trigger> 
       <Trigger Property="IsKeyboardFocusWithin" Value="true"> 
        <Setter Property="Background" Value="#0a99f3" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
     <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}"> 
      <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/> 
        <Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22"> 
         <Path x:Name="Glyph" 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" Height="11" Width="10"/> 
        </Border> 
        <ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" 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> 
       <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="Blue"/> 
        <!--<Setter Property="BorderBrush" TargetName="templateRoot" Value="Yellow"/>--> 
       </Trigger> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/> 
        <Setter Property="Fill" TargetName="Glyph" 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> 
     <ControlTemplate x:Key="MenuItemControlTemplate2" 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="{TemplateBinding Foreground}" 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}"/> 
        <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom"> 
         <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1" Background="#FFF0F0F0" Padding="2"> 
          <ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"> 
           <Grid RenderOptions.ClearTypeHint="Enabled"> 
            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0"> 
             <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/> 
            </Canvas> 
            <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/> 
            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/> 
           </Grid> 
          </ScrollViewer> 
         </Border> 
        </Popup> 
       </Grid> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsSuspendingPopupAnimation" Value="True"> 
        <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/> 
       </Trigger> 
       <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="Blue"/> 
        <!--<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> 
       <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False"> 
        <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/> 
        <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 


    </Window.Resources> 
    <StackPanel> 
     <Menu> 
      <MenuItem Header="_File" Style="{StaticResource menuParentStyle}" ItemContainerStyle="{DynamicResource MenuItemStyle1}" Template="{DynamicResource MenuItemControlTemplate2}" > 
       <MenuItem Header="_New" /> 
       <MenuItem Header="_Save"/> 
       <MenuItem Header="_Quit" /> 
      </MenuItem> 
      <MenuItem Header="_Edit" Style="{StaticResource menuParentStyle}" ItemContainerStyle="{DynamicResource MenuItemStyle1}" Template="{DynamicResource MenuItemControlTemplate2}"> 
       <MenuItem Header="_Copy"/> 
       <MenuItem Header="_Cut" /> 
       <MenuItem Header="_Paste" /> 
      </MenuItem> 
     </Menu> 
    </StackPanel>

我敢肯定，它可以優化，但可以給你要走的路。

關於，

來源

2016-03-21 11:02:47 sexta13

是的，它真的很棒！我需要修改一些代碼，但這正是我需要的方式。謝謝！ –

不用客氣;） – sexta13

爲了優化閱讀，可以將這部分分成另一個xaml文件？就像我可以在其他文件中有主xaml和模板。如果需要，更容易修改它。 –

自定義菜單WPF（XAML）

回答

相關問題