14

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

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

私は何が欠けていますか?

4

2 に答える 2

29

WPF (実際には XAML) のテンプレートとスタイルについて詳しく学びたいと思うでしょう。XAML では、コントロールの外観とコントロールの動作はまったく別のものです。あなたの例では、Foreground プロパティと Background プロパティがあるかもしれませんが、コントロールのスタイル \ テンプレートは、コントロールの表示にこれらのプロパティを利用しない場合があります。

http://wpftutorial.net/Templates.htmlhttp://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 システムに戻るのは難しいです。

于 2012-12-09T02:03:20.980 に答える
4

私は何が欠けていますか?

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

  1. コントロールを配置する XAML で 、 などのForegroundプロパティを設定します。Background
  2. コントロールに を設定しTemplateStyle独自の を作成します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>
于 2012-12-09T02:04:34.283 に答える