添加 MaterialDesign 扩展器

Question

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

<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>

Answer 1

HorizontalDividerBorder 和 HorizontalExpanderContentTextBlock 样式未随 Material Design 库一起提供，它们是 [=16] 中的本地样式=].

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

例子

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

<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>

添加 MaterialDesign 扩展器

Add a MaterialDesign Expander

wpf

xaml

expander

material-design

例子