Material Design and IntegerUpDown Tooltip to Display Error

Question

I'm using MaterialDesign and the Xceed IntegerUpDown control in a WPF project. I'm trying to display errors associated with the updown control as a tooltip when the mouse hovers over the control.

I've gotten this to work with TextBoxes and TextBlocks by using the following global style:

<Style TargetType="{x:Type TextBox}" 
       BasedOn="{StaticResource CustomizedMaterialDesignTextBox}" >
    <Setter Property="Margin" Value="5"/>
    <Setter Property="VerticalAlignment" Value="Center"/>

    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="ToolTip">
                <Setter.Value>
                    <ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
                             Background="{DynamicResource ValidationErrorBrush}">
                        <ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
                                      DisplayMemberPath="ErrorContent"/>
                    </ToolTip>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

But when I tried to adapt this to the updown control as follows, no tooltip is displayed:

<Style TargetType="{x:Type xctk:IntegerUpDown}">
    <Setter Property="Margin" Value="5"/>

    <Style.Triggers>
        <Trigger Property="Validation.HasError" Value="True">
            <Setter Property="ToolTip">
                <Setter.Value>
                    <ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
                             Background="{DynamicResource ValidationErrorBrush}">
                        <ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
                                      DisplayMemberPath="ErrorContent"/>
                    </ToolTip>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

No error message about a failed binding or whatnot is displayed in the output window when the app is run in the VS 2017 debugger and an error condition is triggered.

Interestingly, a red border appears around the control when an error condition exists, even without the custom updown style.

Answer 1

You didn't show how exactly you're binding it but remember to 1) specify UpdateSourceTrigger and 2) actually hover over it ! Here's a MCVE showing that it actually works with no problem.

XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
    xmlns:local="clr-namespace:WpfApp5"
    x:Class="WpfApp5.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>

    <Style TargetType="{x:Type xctk:IntegerUpDown}">
        <Setter Property="Margin" Value="5"/>

        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="ToolTip">
                    <Setter.Value>
                        <ToolTip DataContext="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget}"
                         Background="{DynamicResource ValidationErrorBrush}">
                            <ItemsControl ItemsSource="{Binding Path=(Validation.Errors)}"
                                  DisplayMemberPath="ErrorContent"/>
                        </ToolTip>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

</Window.Resources>

<Window.DataContext>
    <local:SampleViewModel/>
</Window.DataContext>

<Grid>
    <xctk:IntegerUpDown Text="{Binding MyInteger, UpdateSourceTrigger=PropertyChanged}"
                        FontSize="24"
                        Width="125"
                        Height="50"/>
</Grid>