wpfxamlmaterial-designexpander

Add a MaterialDesign Expander

I want to add an Expander to my project with MaterialDesign. While adding, I encounter the following errors. How can I access the style resources in 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>

Errors:

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

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

  • The HorizontalDividerBorder and HorizontalExpanderContentTextBlock styles are not shipped with the Material Design library, they are local styles in their WPF demo application.

    The styles are defined in MaterialDesignInXamlToolkit/MainDemo.Wpf/Expander.xaml. If you want to use them, just copy them over into a local resource dictionary in your project.

    Example

    1. Create a new resource dictionary MaterialDesignWpfDemoStyles.xaml directly in your project and copy over the styles from the link above. It should look like this:

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

    2. Add the resource dictionary after your other dictionaries in 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>