Wpf rendering inconsistent when used with material design

Admin 1
Viewed 552

I have following XAML in my WPF Control:

App.Xaml

<Application x:Class="MyWPFApp"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:miscellaneous="clr-namespace:MyWPFApp.Miscellaneous"
         Startup="OnAppStart">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="#FF0080FF" SecondaryColor="White" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.Flipper.xaml" />
            <ResourceDictionary Source="Converters/Converters.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

This renders the text box without validation error below, when I run the application and type something in the text box:

XAML 1

<Grid>
    <TextBox 
        Style="{StaticResource MaterialDesignFloatingHintTextBox}"
        VerticalAlignment="Center"
        md:TextFieldAssist.HasClearButton="True"
        md:HintAssist.Hint="Email Address"
        md:HintAssist.HelperText="{Binding ErrorContent}">
        <TextBox.Text>
            <Binding
                UpdateSourceTrigger="PropertyChanged"
                ValidatesOnNotifyDataErrors="True">
                <Binding.Path>Email</Binding.Path>
            </Binding>
        </TextBox.Text>
    </TextBox>
</Grid>

TextBox with no error text below

But when I changed the XAML as follows (Grid enclosed in a MaterialDesign.DialogHost element):

XAML 2

<md:DialogHost>
    <Grid>
        <TextBox 
            Style="{StaticResource MaterialDesignFloatingHintTextBox}"
            VerticalAlignment="Center"
            md:TextFieldAssist.HasClearButton="True"
            md:HintAssist.Hint="Email Address"
            md:HintAssist.HelperText="{Binding ErrorContent}">
            <TextBox.Text>
                <Binding
                    UpdateSourceTrigger="PropertyChanged"
                    ValidatesOnNotifyDataErrors="True">
                    <Binding.Path>Email</Binding.Path>
                </Binding>
            </TextBox.Text>
        </TextBox>
    </Grid>
</md:DialogHost>

The rendering is exactly what I was expecting:

The TextBox with error below it

My question is, shouldn't be the rendering like in Figure. 2 with XAML 1?

material-design xaml wpf
1 Answers

Yes, it should provided that there is an AdornerDecorator somewhere above the Grid in the element tree.

Putting your sample markup in a default Window works just fine, i.e. the error message is display as expected.

This is all there is in App.xaml:

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme BaseTheme="Dark" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Using MaterialDesignThemes 3.1.3.

user_72521820
Related