修改主題資源

---

立即下載DevExpress WPF

您可以自定義視覺元素的主題資源(筆刷、厚度、顏色、樣式、模板等)，如下所述。

如果您使用DevExpress WPF Controls NuGet包，則應(yīng)該在計(jì)算機(jī)上安裝DevExpress WPF Controls ，安裝包括DevExpress WPF主題源代碼。

使用WPF主題設(shè)計(jì)器

WPF主題設(shè)計(jì)器是一個(gè)獨(dú)立的工具，允許您基于內(nèi)置的DevExpress WPF應(yīng)用程序主題創(chuàng)建自定義主題。

要使用WPF主題設(shè)計(jì)器更改主題資源，請執(zhí)行以下步驟：

1. 從DevExpress WPF控件單獨(dú)。
2. 創(chuàng)建自定義主題。
3. 使用Inspect Element工具定位要更改其外觀的。
4. 。
5. 導(dǎo)出帶有自定義主題的程序集。
6. 在應(yīng)用程序中。

主題： 主題設(shè)計(jì)器 - 創(chuàng)建并應(yīng)用新的自定義主題。

優(yōu)點(diǎn)

• 可以將修改后的主題導(dǎo)出為程序集。
• 您可以使用Inspect Element工具來定位元素的屬性和XAML源代碼。
• 自定義主題升級工具允許將自定義主題更新到新版本的DevExpress WPF控件，并解決可能的更新沖突。
• 允許將自定義主題應(yīng)用于DevExpress WPF控件，并查看更改的預(yù)覽。

缺點(diǎn)

• 您應(yīng)該從DevExpress WPF控件中單獨(dú) 。

在應(yīng)用程序代碼中使用XAML資源

您可以從DevExpress WPF控件源代碼中復(fù)制主題資源[1]到應(yīng)用程序中，修改這些主題資源，并在項(xiàng)目中使用它們作為。

優(yōu)點(diǎn)

• 與使用WPF主題設(shè)計(jì)器相比，修改主題資源的步驟更少。
• 您可以在所有DevExpress WPF主題中使用修改過的主題資源。

部分：將修改后的主題資源應(yīng)用到應(yīng)用程序中。

缺點(diǎn)

• 您需要在應(yīng)用程序的可視化樹中找到一個(gè)控件元素，并確定應(yīng)該更改的主題資源[1]。
• 當(dāng)升級到較新版本的DevExpress WPF控件時(shí)，可能會遇到更新問題。

查找元素的主題資源

要訪問元素的主題資源[1]，請?jiān)趹?yīng)用程序的可視化樹中找到該元素。您可以使用Visual Studio的、Snoop(在本主題中使用)、WPF主題設(shè)計(jì)器檢查元素工具或其他分析可視化樹的工具。

這篇文章展示了如何搜索定義GridColumn過濾器圖標(biāo)外觀的模板：

1.在可視化樹中找到一個(gè)元素

使用將Snoop工具附加到應(yīng)用程序上。

按住Ctrl+Shift并將鼠標(biāo)指針懸停在網(wǎng)格列的過濾器圖標(biāo)上，這個(gè)圖標(biāo)由一個(gè)帶有四個(gè)路徑項(xiàng)的網(wǎng)格組成。

2.確定要更改的項(xiàng)目

使用項(xiàng)的唯一屬性標(biāo)識要更改的項(xiàng)：控件類型、名稱或?qū)傩裕@個(gè)示例使用了Path的Data屬性。

3.在主題源代碼中找到元素

在要更改其外觀的DevExpress WPF主題的源代碼中找到元素，您可以使用Visual Studio的內(nèi)置搜索工具(在本主題中使用)、WPF主題設(shè)計(jì)器的個(gè)人或其他可以搜索文件中的文本的工具。

按照下面的步驟在Office2016White主題的源代碼中找到GridColumn過濾器圖標(biāo)的模板。

• 打開Office2016White主題的項(xiàng)目，默認(rèn)文件夾路徑為C:\Program Files\DevExpress 23.1\Components\Sources\XPF\DevExpress.Xpf.Themes\Office2016White\Office2016White.csproj。
• 搜索Path的Data屬性值為F1 M 1296.5的元素。

如何修改主題資源的建議

當(dāng)修改主題資源時(shí)，您的修改可能會影響DevExpress WPF控件，并導(dǎo)致異常或不正確的操作等問題。為了避免這些問題，我們建議您遵循以下說明。

• 不要刪除名稱以PART_開頭的元素，也不要更改這些元素的名稱/類型，DevExpress WPF控件可以在代碼隱藏中使用它們。要hide these elements則將元素的Visibility屬性設(shè)置為collapse，這種方法在下一點(diǎn)中描述的場景中沒有效果。
• DevExpress WPF控件可能會改變PART_編輯器在代碼隱藏中的可見性，不要修改這些主題資源中的Visibility屬性[1]。要hide these elements則將它們的不透明度屬性值設(shè)置為0。
• 不要從復(fù)雜的筆刷中移除元素，動畫的DevExpress WPF控件使用這些元素。

下面的代碼片段包含了一個(gè)帶有GradientStop元素的復(fù)雜LinearGradientBrush的例子：

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD1E4FC" Offset="0" />
<GradientStop Color="#FFAED1F6" Offset="1" />
<GradientStop Color="#FFB5D0F1" Offset="0.5" />
<GradientStop Color="#FFA4C5ED" Offset="0.5" />
</LinearGradientBrush>

• DevExpress WPF控件可能包含cs：Name屬性，您應(yīng)該從自定義主題資源中刪除它，或者指定以下XML名稱空間來忽略它：

<Window ...
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:cs="colorscheme_ignorable_uri"
mc:Ignorable="cs">
<Window.Resources>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ControlTemplate}"
TargetType="{x:Type dxg:GridColumnHeaderBase}">
<Grid>
<!-- ... -->
<Border ...
cs:Name="Border_0001"/>
</Grid>
</ControlTemplate>
</Window.Resources>
</Window>

將修改后的主題資源應(yīng)用到應(yīng)用程序中

將修改后的主題[1]粘貼到目標(biāo)元素(控件、窗口或應(yīng)用程序)的資源中，并選擇以下選項(xiàng)之一：

• 要將修改后的資源應(yīng)用于所有DevExpress WPF主題，請將資源的IsThemeIndependent屬性設(shè)置為true。下面的代碼示例修改了所有DevExpress WPF主題中窗口內(nèi)所有GridColumnHeaderBase元素的資源：

<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey = ColumnFilterTemplate, IsThemeIndependent = true}">
<!-- ... -->
</ControlTemplate>
</Window.Resources>
</Window>

• 要修改specific theme，請指定資源的ThemeName屬性，您可以在主題中找到可用的ThemeName屬性值列表(請參閱主題名稱列)。下面的代碼示例只修改Office2019Colorful主題中的資源：

<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,ThemeName=Office2019Colorful}" TargetType="{x:Type ToggleButton}">
<!-- ... -->
</ControlTemplate>
</Window.Resources>
</Window>

如果您沒有指定資源的IsThemeIndependent或ThemeName屬性，則該資源僅在DeepBlue主題中應(yīng)用。

修改主題資源要求

修改后的主題資源[1]應(yīng)滿足以下要求：

1.確保主題資源對其目標(biāo)元素可見。

主題：。

2.引用程序集并復(fù)制主題資源使用的名稱空間。

3.將彈出窗口和消息框中使用的主題資源放在App.xaml資源中。

4.如果主題資源使用靜態(tài)資源(brush、Converters等)，也應(yīng)該將它們復(fù)制到應(yīng)用程序中。

使用不同主題的不同主題資源

1. 為使用的每個(gè)主題創(chuàng)建主題資源[1]。
2. 為每個(gè)創(chuàng)建的主題資源指定ThemeName屬性。

您可以在主題列表主題中找到可用的ThemeName屬性值列表(請參閱主題名稱列)。

下面的代碼示例使用和應(yīng)用程序主題的不同模板：

<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,ThemeName=Office2013}" TargetType="{x:Type ToggleButton}">
<!-- ... -->
</ControlTemplate>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,ThemeName=MetropolisDark}" TargetType="{x:Type ToggleButton}">
<!-- ... -->
</ControlTemplate>
</Window.Resources>
</Window>

使用主題的動態(tài)資源

原始主題資源可以使用主題的動態(tài)資源：

<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate ...>
<Grid>
<Border BorderBrush="{DynamicResource {dxgt:TableViewThemeKey ResourceKey=ColumnChooserBorderBrush}}">
</Grid>
</ControlTemplate>
<Window.Resources>
</Window>

如果您指定修改后的資源的IsThemeIndependent屬性，它仍然使用默認(rèn)主題(DeepBlue)的資源，要使用應(yīng)用主題中的資源，請執(zhí)行以下步驟：

1. 引用dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal" XAML命名空間。
2. 將修改后的主題資源的DynamicResource更改為dxi：ThemeResource。themerresource標(biāo)記擴(kuò)展動態(tài)地將其目標(biāo)屬性設(shè)置為目標(biāo)元素應(yīng)用的主題中的資源，目標(biāo)元素必須位于應(yīng)用程序的可視化樹中。

<TargetElement TargetProperty="{dxi:ThemeResource {ThemeKey}}" />

下面的代碼示例將Border的(TargetElement) BorderBrush (TargetProperty)屬性值設(shè)置為目標(biāo)元素應(yīng)用的主題中的一個(gè)資源(ThemeKey)：

<Window ...
xmlns:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate ...>
<Grid>
<Border BorderBrush="{dxi:ThemeResource {dxgt:TableViewThemeKey ResourceKey=ColumnChooserBorderBrush}}">
</Grid>
</ControlTemplate>
<Window.Resources>
</Window>

查看示例：