添加 MaterialDesign 扩展器

Posted 2023-02-22

【中文标题】添加 MaterialDesign 扩展器

【英文标题】：Add a MaterialDesign Expander

【发布时间】：2021-04-26 17:26:05

【问题描述】：

我想使用 MaterialDesign 将Expander 添加到我的项目中。添加时，我遇到以下错误。 如何访问TextBlocks 中的样式资源？

<Grid>
    <materialDesign:Card>
        <StackPanel>
            <Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
                <StackPanel Orientation="Vertical" TextBlock.Foreground="DynamicResource MaterialDesignBody" Margin="24,8,24,16">
                    <TextBlock Text="Your Content" />
                    <TextBlock Style="StaticResource HorizontalExpanderContentTextBlock" />
                </StackPanel>
            </Expander>
            <Border Style="StaticResource HorizontalDividerBorder" />
            <Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
                <StackPanel Orientation="Vertical" TextBlock.Foreground="DynamicResource MaterialDesignBody" Margin="24,8,24,16">
                    <TextBlock Text="Your Content" />
                    <TextBlock Style="StaticResource HorizontalExpanderContentTextBlock" />
                </StackPanel>
            </Expander>
            <Border Style="StaticResource HorizontalDividerBorder" />
            <Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
                <StackPanel Orientation="Vertical" TextBlock.Foreground="DynamicResource MaterialDesignBody" Margin="24,8,24,16">
                    <TextBlock Text="Your Content" />
                    <TextBlock Style="StaticResource HorizontalExpanderContentTextBlock" />
                </StackPanel>
            </Expander>
        </StackPanel>
    </materialDesign:Card>
</Grid>

错误：

Error       The resource "HorizontalDividerBorder" could not be resolved.
Error       The resource "HorizontalExpanderContentTextBlock" could not be resolved.
Error       The resource "HorizontalDividerBorder" could not be resolved.
Error       The resource "HorizontalExpanderContentTextBlock" could not be resolved.
Error       The resource "HorizontalExpanderContentTextBlock" could not be resolved.

App.xaml代码：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

【参考方案1】：

HorizontalDividerBorder 和 HorizontalExpanderContentTextBlock 样式未随 Material Design 库提供，它们是 WPF demo application 中的本地样式。

样式在MaterialDesignInXamlToolkit/MainDemo.Wpf/Expander.xaml 中定义。如果您想使用它们，只需将它们复制到项目中的本地资源字典中即可。

示例

直接在您的项目中创建一个新的资源字典MaterialDesignWpfDemoStyles.xaml 并复制上面链接中的样式。它应该是这样的：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfApp1">
   <Style TargetType="x:Type TextBlock" x:Key="HorizontalExpanderContentTextBlock">
      <Setter Property="Opacity" Value=".68"/>
      <Setter Property="Text" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
      <Setter Property="TextWrapping" Value="Wrap"/>
   </Style>
   <Style TargetType="x:Type Border" x:Key="HorizontalDividerBorder">
      <Setter Property="Background" Value="DynamicResource MaterialDesignDivider"/>
      <Setter Property="UseLayoutRounding" Value="True"/>
      <Setter Property="HorizontalAlignment" Value="Stretch"/>
      <Setter Property="Height" Value="1"/>
   </Style>
</ResourceDictionary>

在App.xaml中的其他字典之后添加资源字典：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            <ResourceDictionary Source="MaterialDesignWpfDemoStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

【讨论】：

您好，如何将thatguy 链接中的代码添加到字典中。因为我是新人，请您参考一下吗？

@saklanmaz 我添加了一个示例。

一个很好的解释性表达，谢谢。