How to get Textblock with TextTrimming over an AdornedElementPlaceholder?

Question

I'm trying to get a ValidationRule to display text over an offending combobox, if the user has not specified a value yet. I can get it to display, but I can't seem to get the text to fit to the size of the combobox using TextTrimming="CharacterEllipsis". How can I get the TextBlock to fit the combobox, and also correct itself if the user resizes the window?

Here's my MainWindow.xaml:

<Window x:Class="PocAdornedElementPlaceholder.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:PocAdornedElementPlaceholder"
        Title="MainWindow" Height="200" Width="150">
    <Window.Resources>
        <ControlTemplate x:Key="ValidationTemplate">
            <Grid HorizontalAlignment="Center">
                <AdornedElementPlaceholder/>
                <TextBlock Foreground="Red" 
                           TextTrimming="CharacterEllipsis" 
                           Text="{Binding ErrorContent}" 
                           IsHitTestVisible="False" 
                           VerticalAlignment="Center" 
                           Margin="5,0,0,0"/>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <ComboBox Margin="10" 
                  Validation.ErrorTemplate="{StaticResource ValidationTemplate}"  
                  VerticalAlignment="Center"  
                  ItemsSource="{Binding Options}">
            <ComboBox.Text>
                <Binding Path="SelectedValue">
                    <Binding.ValidationRules>
                        <local:MyValidationRule ValidatesOnTargetUpdated="True" />
                    </Binding.ValidationRules>
                </Binding>
            </ComboBox.Text>
        </ComboBox>
    </Grid>
</Window>

Here's my MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Options = new List<string>() { "Value 1", "Value 2", "Value 3", "" };
        this.DataContext = this;
    }

    public string SelectedValue { get; set; }
    public List<string> Options { get; set; }
}

And here's my MyValidationRule.cs file:

public class MyValidationRule : ValidationRule
{
    public override ValidationResult Validate(object value, CultureInfo cultureInfo)
    {
        if (string.IsNullOrEmpty((string)value))
            return new ValidationResult(false, "Value cannot be empty!");
        return new ValidationResult(true, null);
    }
}

Any help would be much appreciated! Thanks, Tam

Answer 1

Try below, TextBlock should be the content of the adorner. I also had to change the margin of the textblock to count for the dropdown arrow button.

<ControlTemplate x:Key="ValidationTemplate">
    <Grid HorizontalAlignment="Center">
        <AdornedElementPlaceholder>
            <TextBlock Foreground="Red" TextTrimming="CharacterEllipsis" Text="{Binding ErrorContent}" IsHitTestVisible="False" VerticalAlignment="Center" Margin="5,0,20,0" />
        </AdornedElementPlaceholder>
    </Grid>
</ControlTemplate>