WPF (実際には XAML) のテンプレートとスタイルについて詳しく学びたいと思うでしょう。XAML では、コントロールの外観とコントロールの動作はまったく別のものです。あなたの例では、Foreground プロパティと Background プロパティがあるかもしれませんが、コントロールのスタイル \ テンプレートは、コントロールの表示にこれらのプロパティを利用しない場合があります。
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 を使用している場合は、XAML UI を編集するために Expression Blend をダウンロードしてインストールする必要があります (無料の場合とそうでない場合があります)。
ヒント: 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 システムに戻るのは難しいです。