如何在 WPF 菜單控件上設置前景色和背景色？

Question

我已經在 WPF 中工作了很長一段時間，但有一些關於樣式的基本知識我只是不明白。

如何設置Menu控件的前景色和背景色？ 我從這個開始：

    <Menu IsMainMenu="True" Background="#FF3A3A3A" Foreground="White">
        <MenuItem Header="_File">
            <MenuItem Header="_Exit">
            </MenuItem>
        </MenuItem>
    </Menu>

前景色顯然是由MenuItem繼承的，但背景色不是。 下一次嘗試：

    <Menu IsMainMenu="True" Background="#FF3A3A3A" Foreground="White">
        <MenuItem Background="#FF3A3A3A" Header="_File">
            <MenuItem Header="_Exit">
            </MenuItem>
        </MenuItem>
    </Menu>

現在，當菜單被激活時，突出顯示/覆蓋顏色不正確，而且我沒有看到一個明顯的屬性來設置它們。 此外，菜單彈出窗口有一個寬的白色邊框，我也不知道如何更改它的顏色（或大小）。

我錯過了什么？

Answer 1

您將想要了解有關 WPF（實際上是 XAML）中的模板和樣式的更多信息。 在 XAML 中，控件的外觀和控件的操作方式是完全不同的兩件事。 在您的示例中，您可能具有前景和背景屬性，但控件的樣式\模板可能不會將這些屬性用於控件的顯示。

閱讀http://wpftutorial.net/Templates.html和http://wpftutorial.net/TemplatesStyles.html ，它們將為您提供快速的概覽。 如需更深入的了解，請閱讀：http: //msdn.microsoft.com/en-us/library/ee230084.aspx

如果您使用 Visual Studio 2012 編輯 WPF UI，您可以輕松創建菜單控件正在使用的樣式\模板的副本，然后對其進行編輯。 如果您使用的是 Visual Studio 2010，您應該下載並安裝（可能免費也可能不是）Expression Blend 來編輯您的 XAML UI。

提示：如果您使用的是 Visual Studio 2012，請確保您的文檔大綱窗口窗格始終可見。 這對於編輯 XAML UI 非常方便。 我的默認折疊在程序的左側。 默認情況下，此窗格在 Expression Blend 中可見。

在文檔大綱中找到 MenuItem 控件。 右鍵單擊它並選擇編輯模板->編輯副本...

這將創建菜單項現有外觀的副本供您編輯。 執行此操作時，您將處於該模板的編輯模式，要“彈出”該模式，請單擊“文檔大綱”窗口左上角的小圖標。

編輯模板時，您可以看到模板的布局和設計。 當菜單項作為下拉部分時，它實際上顯示為彈出菜單（右鍵菜單）。 翻閱該模板，我馬上想到的是這個名為 SubMenuBackgroundBrush 的顏色資源：

<SolidColorBrush x:Key="SubMenuBackgroundBrush" Color="#FFF5F5F5"/>

如果您搜索 SubMenuBackgroundBrush，您可以看到它用於名為 PART_Popup 的部分：

<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
    <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent">
        <Border x:Name="SubMenuBorder" BorderBrush="#FF959595" BorderThickness="1" Background="{StaticResource SubMenuBackgroundBrush}">
            <ScrollViewer x:Name="SubMenuScrollViewer" Margin="1,0" 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="{StaticResource SubMenuBackgroundBrush}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                    </Canvas>
                    <Rectangle Fill="#F1F1F1" HorizontalAlignment="Left" Margin="1,2" RadiusY="2" RadiusX="2" Width="28"/>
                    <Rectangle Fill="#E2E3E3" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>
                    <Rectangle Fill="White" HorizontalAlignment="Left" Margin="30,2,0,2" Width="1"/>
                    <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                </Grid>
            </ScrollViewer>
        </Border>
    </Themes:SystemDropShadowChrome>
</Popup>

這是當您右鍵單擊顯示菜單或下拉菜單的內容時看到的彈出窗口。 將引用從： {StaticResource SubMenuBackgroundBrush}更改為{TemplateBinding Foreground} 。

當你運行程序時，你會看到彈窗的主背景發生了變化，但顯示圖標的區域沒有變化。 這些也是彈出控件中的所有<Rectangle Fill="項。也更改它們。最后對 Rectangle 的引用看起來像是分割圖標和文本的線，您可能不知道要更改什么。

享受模板的精彩世界。 它看起來很混亂，而且需要做很多工作。 這是。 但是當你掌握它的竅門時，它是一個非常酷的系統。 掌握了它之后，很難再回到任何其他 UI 系統。

Answer 2

我錯過了什么？

控件或多或少是可自定義的，自定義控件有兩個級別：

1. 在放置控件的 XAML 中設置Foreground 、 Background等屬性。
2. 在您的Style中為控件設置Template ，並創建您自己的ControlTemplate 。

第二個涉及更多，但它提供了更多的靈活性，使控件看起來像你想要的那樣。 如果是這種情況，聽起來這就是您所需要的。 檢查Menu 和 MenuItem 的默認 ControlTemplate 。 您可以復制/粘貼它們並根據需要進行修改。

<Window.Resources>
    <Style TargetType="{x:Type Menu}">
        <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type Menu}">
                <!-- your modified template here -->
            </ControlTemplate>
        </Setter>
    </Style>
    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <!-- your modified template here -->
            </ControlTemplate>
        </Setter>
    </Style>
</Window.Resources>