web-dev-qa-db-ja.com

WPFメニューコントロールで前景色と背景色を設定するにはどうすればよいですか？

私はかなり長い間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>

これで、メニューがアクティブ化されたときにハイライト/オーバーレイの色が正しくなくなり、それらを設定するための明確なプロパティが表示されません。さらに、メニューポップアップには幅の広い白い境界線があり、色（またはサイズ）を変更する方法もわかりません。

何が足りないのですか？

wpfmenumenuitemstyling
13
RickNZ

WPF（実際にはXAML）のテンプレートとスタイルについて詳しく知りたいと思うでしょう。 XAMLでは、コントロールの外観と操作方法は2つのまったく異なるものです。あなたの例では、ForegroundプロパティとBackgroundプロパティがあるかもしれませんが、コントロールのstyle\templateは、コントロールの表示にこれらのプロパティを利用していません。

http://wpftutorial.net/Templates.html および http://wpftutorial.net/TemplatesStyles.html を読むと、概要がわかりやすく表示されます。詳細については、次をお読みください： http://msdn.Microsoft.com/en-us/library/ee230084.aspx

Visual Studio2012を使用してWPFUIを編集している場合は、メニューコントロールが使用しているstyle\templateのコピーを簡単に作成して、編集することができます。 Visual Studio 2010を使用している場合は、Expression Blendをダウンロードしてインストールし（無料の場合とそうでない場合があります）、XAMLUIを編集する必要があります。

ヒント：Visual Studio 2012を使用している場合は、ドキュメントのアウトラインウィンドウペインがすべて表示されていることを確認してください時間。これは、XAMLUIの編集に非常に便利です。鉱山はデフォルトでプログラムの左側で折りたたまれていました。このペインは、デフォルトでExpressionBlendに表示されます。

ドキュメントのアウトラインでMenuItemコントロールを見つけます。それを右クリックして、「テンプレートの編集」->「コピーの編集...」を選択します。

これにより、メニュー項目の既存のルックアンドフィールのコピーが作成され、編集できるようになります。これを行うと、そのテンプレートの編集モードになります。そのモードを「ポップアウト」するには、[ドキュメントのアウトライン]ウィンドウの左上にある小さなアイコンをクリックします。

Return Scope Button

テンプレートを編集すると、テンプレートのレイアウトとデザインを確認できます。メニュー項目がドロップダウン部分である場合、実際にはポップアップメニュー（右クリックメニュー）のように表示されます。そのテンプレートを見ると、すぐに私に飛び出すのは、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システムに戻るのは難しいです。

24
Thraka

何が足りないのですか？

コントロールは多かれ少なかれカスタマイズ可能であり、コントロールのカスタマイズには2つのレベルがあります。

  1. コントロールを配置するXAMLでForeground、Backgroundなどのプロパティを設定します。
  2. コントロールのTemplateにStyleを設定し、独自のControlTemplateを作成します。

2つ目はより複雑ですが、コントロールを希望どおりに表示するための柔軟性が大幅に向上します。この場合、それはあなたが必要とするもののように聞こえます。 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>
2
McGarnagle