XamDataGrid – Office2013 テーマを拡張して社内標準カラーを適用する

XamDataGrid の行のホバー・選択・ゼブラ（交互行）や列見出しの色を、既存の Office2013 テーマの見た目を保ったまま社内標準カラーに変えたい場合は、Office2013Theme を継承したテーマクラスを作ります。そのクラスで ConfigureControlMappings をオーバーライドし、XamDataGrid のリソースディクショナリだけを独自のものに差し替えます。

XamDataGrid の設定

拡張したテーマ BrandOffice2013Theme は、ig:ThemeManager.Theme 添付プロパティで XamDataGrid を含む領域に適用します。ゼブラの色を確認できるよう、HighlightAlternateRecords を True にしています。アプリケーション全体に適用する場合は、App.OnStartup で ThemeManager.ApplicationTheme = new BrandOffice2013Theme(); と記述します。

<Window ...
        xmlns:ig="http://schemas.infragistics.com/xaml"
        xmlns:igDP="http://infragistics.com/DataPresenter"
        xmlns:local="clr-namespace:XamDataGrid_ExtendTheme">
    <Grid>
        <ig:ThemeManager.Theme>
            <local:BrandOffice2013Theme />
        </ig:ThemeManager.Theme>

        <igDP:XamDataGrid DataSource="{Binding Orders}">
            <igDP:XamDataGrid.FieldLayoutSettings>
                <igDP:FieldLayoutSettings HighlightAlternateRecords="True" ... />
            </igDP:XamDataGrid.FieldLayoutSettings>
            ...
        </igDP:XamDataGrid>
    </Grid>
</Window>

ConfigureControlMappings の使用

Office2013Theme を継承したクラスで ConfigureControlMappings をオーバーライドします。先に base.ConfigureControlMappings() を呼んで全コントロール分の既定マッピングを設定し、そのあと Mappings[ControlMappingKeys.XamDataGrid] だけを独自のリソースディクショナリに差し替えます。ディクショナリの場所は ThemeBase.BuildLocationString で、アセンブリ名とパスから作ります。XamDataGrid 以外のコントロールには、基底の Office2013 テーマがそのまま適用されます。

using Infragistics.Themes;

namespace XamDataGrid_ExtendTheme;

public class BrandOffice2013Theme : Office2013Theme
{
    protected override void ConfigureControlMappings()
    {
        base.ConfigureControlMappings();

        var assemblyFullName = typeof(BrandOffice2013Theme).Assembly.FullName;
        Mappings[ControlMappingKeys.XamDataGrid] =
            ThemeBase.BuildLocationString(assemblyFullName, @"/BrandOffice2013Theme.xaml");
    }
}

差し替え先の BrandOffice2013Theme.xaml では、まず Office2013 テーマの XamDataPresenter 用ディクショナリをマージします。そのうえで、DataRecordCellArea（行）、CellValuePresenter（セル）、LabelPresenter（列見出し）の暗黙スタイルを BasedOn で引き継ぎます。上書きするのは BackgroundHover、BackgroundSelected、BackgroundAlternate、LabelHighlight などの色のプロパティだけです。これらは、既定のテンプレートがマウスオーバー時や選択時などの状態で使うブラシとして公開されています。そのため、テンプレートを書き直さなくても色だけを変えられます。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:igDP="http://infragistics.com/DataPresenter">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/Infragistics.WPF.Themes.Office2013;component/Themes/Office2013.XamDataPresenter.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <SolidColorBrush x:Key="BrandAccentBrush" Color="#FF0C6659" />
    <SolidColorBrush x:Key="BrandRowAlternateBrush" Color="#FFEAF4F2" />
    <SolidColorBrush x:Key="BrandRowHoverBrush" Color="#FFCCE6E1" />
    <SolidColorBrush x:Key="BrandRowActiveBrush" Color="#FFBFDFD8" />
    <SolidColorBrush x:Key="BrandRowSelectedBrush" Color="#FFA6D3CA" />
    <SolidColorBrush x:Key="BrandHeaderBackgroundBrush" Color="#FFD3E7E3" />
    <SolidColorBrush x:Key="BrandHeaderForegroundBrush" Color="#FF083F38" />
    <SolidColorBrush x:Key="BrandHeaderHoverBrush" Color="#FFB9DDD5" />
    ...

    <Style TargetType="{x:Type igDP:DataRecordCellArea}"
           BasedOn="{StaticResource {x:Type igDP:DataRecordCellArea}}">
        <Setter Property="BackgroundAlternate" Value="{StaticResource BrandRowAlternateBrush}" />
        <Setter Property="BackgroundHover" Value="{StaticResource BrandRowHoverBrush}" />
        <Setter Property="BackgroundActive" Value="{StaticResource BrandRowActiveBrush}" />
        <Setter Property="BackgroundSelected" Value="{StaticResource BrandRowSelectedBrush}" />
        <Setter Property="BorderSelectedBrush" Value="{StaticResource BrandAccentBrush}" />
        ...
    </Style>

    <Style TargetType="{x:Type igDP:CellValuePresenter}"
           BasedOn="{StaticResource {x:Type igDP:CellValuePresenter}}">
        <Setter Property="BackgroundActive" Value="{StaticResource BrandRowActiveBrush}" />
        <Setter Property="BackgroundSelected" Value="{StaticResource BrandRowSelectedBrush}" />
        ...
    </Style>

    <Style TargetType="{x:Type igDP:LabelPresenter}"
           BasedOn="{StaticResource {x:Type igDP:LabelPresenter}}">
        <Setter Property="Background" Value="{StaticResource BrandHeaderBackgroundBrush}" />
        <Setter Property="Foreground" Value="{StaticResource BrandHeaderForegroundBrush}" />
        <Setter Property="LabelHighlight" Value="{StaticResource BrandHeaderHoverBrush}" />
        ...
    </Style>
</ResourceDictionary>

実行結果

左は標準の Office2013 テーマ、右は Office2013 テーマを拡張した BrandOffice2013Theme を適用した XamDataGrid です。行にマウスを載せたとき、行を選択したとき、列見出しにマウスを載せたときの色や、ゼブラの色が社内標準カラー（ティール系）に変わっています。