Validated Textbox in a UserControl

Question

Hi

I have created a UserControl - a Labeled TextBox which is working pretty well, except for the validation template. When there's an error the validation control template shows up but it fills the whole space including the Label. I only want it to be as big as the TextBox. How to fix this?

Here's the xaml:

<UserControl x:Class="Infrastructure.CustomControls.LabelTextBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Name="LTB">
    
    <Grid HorizontalAlignment="{Binding}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <TextBlock x:Name="tbl" FontFamily="{Binding}" FontSize="{Binding}" Text="{Binding ElementName=LTB, Path=LabelText}" Height="{Binding ElementName=LTB, Path=LabelHeight}" 
				   Width="{Binding ElementName=LTB, Path=LabelWidth}" VerticalAlignment="Center"/>
        <TextBox x:Name="tbx" Grid.Column="1" FontFamily="{Binding}" FontSize="{Binding}" IsReadOnly="{Binding ElementName=LTB, Path=IsReadOnly}" MaxLength="{Binding ElementName=LTB, Path=TextMaxLength}" 
				 Text="{Binding ElementName=LTB, Path=Text}" Height="{Binding ElementName=LTB, Path=TextHeight}" Width="{Binding ElementName=LTB, Path=TextWidth}" VerticalAlignment="Center">
            <Validation.ErrorTemplate>
                <ControlTemplate>
                    <DockPanel LastChildFill="True" ToolTip="{Binding ElementName=aep, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                        <TextBlock DockPanel.Dock="Right" Foreground="Red" FontSize="14pt" Text="*" Margin="-15,0,0,0" FontWeight="Bold"/>
                        <Border BorderBrush="Red" BorderThickness="1">
                            <AdornedElementPlaceholder Name="aep"/>
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Validation.ErrorTemplate>
        </TextBox>
    </Grid>
</UserControl>

Answer 1

you can set width and height property for errortemplate or limit adorner size

---

Stay hungry, stay foolish

Answer 2

I've tried setting that for the dock panel and adorned element but it didn't work.

Answer 3

you'd better share a full sample.

---

Stay hungry, stay foolish

Answer 4

Hi Syslock,

Please see the below code snippet for ur issue.

UserControl:

<UserControl x:Class="SandBox.UserControl12"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="LTB">
    <Grid HorizontalAlignment="{Binding}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="tbl" Text="Label" Height="25" 
				   Width="100" VerticalAlignment="Center"/>
        <TextBox x:Name="tbx" Grid.Column="1" IsReadOnly="False" MaxLength="50" 
				 Text="TextBox" Height="25" Width="100" VerticalAlignment="Center">
            <Validation.ErrorTemplate>
                <ControlTemplate x:Name="myerrortemplate">
                    <DockPanel LastChildFill="True" ToolTip="{Binding ElementName=aep, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                        <TextBlock DockPanel.Dock="Right" Foreground="Red" FontSize="14pt" Text="*" Margin="-15,0,0,0" FontWeight="Bold"/>
                        <Border BorderBrush="Red" BorderThickness="1">
                            <AdornedElementPlaceholder Name="aep"/>
                        </Border>
                    </DockPanel>
                </ControlTemplate>
            </Validation.ErrorTemplate>
        </TextBox>
    </Grid>

</UserControl>


Window:

<Window x:Class="SandBox.Window82"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SandBox"
    Title="Window82" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <local:UserControl12 x:Name="uc" Grid.Row="0"></local:UserControl12>
        <Button x:Name="btnErrorTemplate" Content="Show Error Template" Height="25" Width="200" Grid.Row="1" Click="btnErrorTemplate_Click"></Button>
        <Button x:Name="btnNormalTemplate" Content="Show Normal Template" Height="25" Width="200" Grid.Row="2" Click="btnNormalTemplate_Click"></Button>
    </Grid>
</Window>


Window CodeBehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace SandBox
{
    /// <summary>
    /// Interaction logic for Window82.xaml
    /// </summary>
    public partial class Window82 : Window
    {
        public ControlTemplate NormalTemplate { get; set; }
        public ControlTemplate ErrorTemplate { get; set; }
        public Window82()
        {
            InitializeComponent();
            NormalTemplate = uc.tbx.Template;
            ErrorTemplate = (ControlTemplate)uc.FindName("myerrortemplate");
        }

        private void btnErrorTemplate_Click(object sender, RoutedEventArgs e)
        {
            uc.tbx.Template = ErrorTemplate;
        }

        private void btnNormalTemplate_Click(object sender, RoutedEventArgs e)
        {
            uc.tbx.Template = NormalTemplate;
        }
    }
}

Here, from ur UserControl I have replaced all the binding with the hard coded values since, I don't know how do you change the values of ur binding.

And I dont receive any issue. It works as per ur expectation.

Since, the only change I have made is removal of ur binding I would like u to have a look at ur bindings which are applied in the UserControl.

Please have a look at the window which consist if UserControl. U can click on "Show Error Template" to show error template and "Show Normal Template" to display normal template.

Hope it helps!

Please mark it as an answer if it resolves ur issue.

---

Regards, Parth Shah

Answer 5

Hi syslock,

Any updates over this?

If ur issue is resolved please close the post and mark it as an answer.

---

Regards, Parth Shah

Answer 6

Hi syslock,

If u have any concerns feel free to ask.

If ur issue is resolved please close the post and mark it as an answer.

---

Regards, Parth Shah