I created ControlTemplate which is shown if there are validation error on my textbox. My controltemplate looks like that
<ControlTemplate x:Key="TextBoxErrorTemplate">
<TextBlock Foreground="Orange" FontSize="12pt">Field can't be empty</TextBlock>
</ControlTemplate>
However if validation errors occure textBlock appears on textBox - and the user can't enter proper value. Is there any way to set the position of TextBlock - the one which shows error info?
ErrorTemplates are for adorning the control and not for changing its internal properties, to do this you should use a style with the respective trigger:
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Foreground" Value="Orange"/>
<Setter Property="FontSize" Value="12"/>
</Trigger>
</Style.Triggers>
</Style>
If you want to display some text you could use a template like this:
<ControlTemplate x:Key="TextBoxErrorTemplate">
<StackPanel Orientation="Horizontal">
<AdornedElementPlaceholder/>
<TextBlock Foreground="Orange" FontSize="12pt">Field can't be empty</TextBlock>
</StackPanel>
</ControlTemplate>
The TextBlock will be displayed on the right of the TextBox.
If you just want to show error messages i'd suggest you set the tooltip of the TextBox and bind it to the validation errors.
Related
I have a view which is bound to a view model having a number of properties. Some of the properties are bound directly to controls like text boxes. For these I set a validation template which shows a red border with corner arrow which shows the errors for the property in a tool tip.
Other properties are set by forms which are opened in response to clicking buttons. For example I have button labeled "Click to edit duration" which pops up form to edit the StartDate and EndDate properties. The button is bound to a command in the view model which pops up the form.
The view model implements INotifyDataErrorInfo so for the controls which are bound directly to properties I can just attach error messages to the properties they are bound to and raise the ErrorsChanged event.
What I want is if the start and end dates are not properly set then a red border and tool tip is applied to the button. Attaching errors to StartDate and EndDate properties won't work because the button is not bound to these properties.
I had done the same thing in an application where there is an additional section of data that needs to be completed to continue. The way I was able to make the button have a validation error was by using a Tag like this:
<Button Grid.Column="1" Grid.Row="0" Content="{DynamicResource resEnterSecureInformation}" Width="200" Command="{Binding PrimaryApplicant.SecureInformation.OpenSecureInformationWindowCommand}" Tag="{Binding PrimaryApplicant.SecureInformationComplete, ValidatesOnDataErrors=True}"></Button>
I also had a style in my app.xaml to add the red outline and a tooltip when an error was set:
<Style TargetType="Button">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)/ErrorContent}"></Setter>
<Style.Triggers>
<Trigger Property="IsVisible" Value="True">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Red" BorderThickness="1" >
<AdornedElementPlaceholder/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<AdornedElementPlaceholder/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I did this to also not show the validation error when the button was disabled (no need showing the user something they can't go into and fix)
Hope this helps
I have the following style for validating input in my controls:
<Style x:Key="MyErrorTemplate" TargetType="Control">
<Style.Setters>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate x:Name="ControlErrorTemplate">
<StackPanel Orientation="Vertical" Height="Auto">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Red" FontSize="20">!</TextBlock>
<AdornedElementPlaceholder x:Name="Holder"/>
</StackPanel>
<Label Foreground="Red" Content="{Binding ElementName=Holder,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
If an error happens, the error message in the label appears under the control (e.g. textbox) and overlaps the control below. I made StackPanel's Height="Auto", but it didn't help. Each control is in a Grid cell, and the Grid's row Height is also Auto.
Could you please tell me what I am missing? I want the error message to push what is below down.
Thanks.
Validation.ErrorTemplate shows error feedback on an adorner layer. This means all controls in this template will not be considered when the layout system is measuring and arranging the controls on the adorned element layer.
I found this and thanks LPL, i did not know that about the adorner layer.
My solution was a margin "hack". I just used the trigger:
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Margin" Value="0,0,0,28"/>
</Trigger>
</Style.Triggers>
To increase the bottom margin of the adorned textbox. I set the margin large enough to make room for a single string textblock/label and then the content below was moved down
I've got a style for a TextBox to show a validation error message as follows:
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderBrush="{Binding Path=ErrorContent,
Converter={StaticResource ValidationErrorToBrushConverter}}" BorderThickness="2">
<AdornedElementPlaceholder />
</Border>
<Image Name="image1" Height="14" Width="14" Stretch="Fill" Margin="1,1,1,1"
Source="{Binding Path=ErrorContent,
Converter={StaticResource ValidationErrorToImageSourceConverter}}"
ToolTip="{Binding Path=ErrorContent}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The TextBox lives in an Expander. When I open the Expander, the TextBox allows for input, but will fail validation if the input is NullorEmpty, or contains special characters.
My problem is that when I trigger a validation error, the TextBox lights up in red and shows an icon with the message as a tooltip. All good so far. BUT when i close the Expander without passing validation, the red outline and icon with tooltip are still there! Even with the Expander shrunk down! Just floating there... This is not good behavior.
Any ideas on how to get the Validation stuff to hide along with all the other controls in the Expander? Also, the Style for validation is declared in the resources of the UserControl, not in the Expander itself.
I ended up simply clearing the TextBox upon closing the Expander. That way, the validation error goes away and the box is clear and ready for another input when the Expander is opened back up.
I had the same problem. I fixed it by putting an AdornerDecorator as the first child object of the expander. The AdornerDecorator is collapsed when the Expander is collapsed, so the Adorners should all disappear too.
I've resolved this same problem by setting the Validation.ErrorTemplate property to null when the TextBox is hidden
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsHitTestVisible" Value="False">
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
</Trigger>
</Style.Triggers>
</Style>
I have a simple user control with a TextBox. I want to change the color of user control when the TextBox gets the focus. This is what I have:
<UserControl x:Class="OutLookContactList.ContactSearchControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="root" MinHeight="30" Loaded="UserControl_Loaded">
<UserControl.Resources>
<Style x:Key="searchTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="root" Property="Background" Value="{StaticResource OnMouseOverColor}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
But I get the errot "TargetName property cannot be set on a style Setter". How can I Set the back ground color of user control when text box gets the focus?
Thanks a bunch
Will it work to wrap the contents of your UserControl inside a Border object? If so, you can simply style the Border like so:
<UserControl x:Class="Sample2.ContactSearchControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="75" Width="300">
<Border>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=txtSearch}" Value="true">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel>
<TextBox x:Name="txtSearch" Text="Search" />
<TextBox Text="Other" />
</StackPanel>
</Border>
</UserControl>
Update: (Answering Sheraz' Questions)
I'm not sure why ElementName doesn't work for accessing children within a UserControl. It might have something to do with the way the visual tree is constructed.
As for Trigger vs DataTrigger: Trigger is for dependency properties and DataTrigger is for databound properties (data or other controls). Since you are trying to style the Border, it makes more sense to place the DataTrigger there and have it watch the TextBox than to have the TextBox change the appearance of the Border.
As I understand it, the TargetName property of Setter is only applicable within a DataTemplate or ControlTemplate. (Info from Dr. WPF in this forum post)
If you were changing the background of the text box you need to remove the TargetName property:
<Style x:Key="searchTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="{StaticResource OnMouseOverColor}" />
</Trigger>
</Style.Triggers>
</Style>
and change the TextBox that wants this style to be:
<TextBox Style="{StaticResource searchTextBoxStyle}" .... />
However, as you want to change the value of the parent user control this won't give you want you want.
You could certainly do it in the code behind by adding a GotFocus event handler and putting the code to change the background colour in there.
Here's some XAML that works in Kaxaml:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Style>
<Style TargetType="Page">
<Setter Property="Background" Value="#CCCCD0" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=txtSearch, Path=IsFocused}"
Value="true">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Page.Style>
<TextBox x:Name="txtSearch" Width="100"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Page>
You would change the Page object with your UserControl. I find it much easier to test these sorts of things out in a rapid prototyping tool such as Kaxaml before coding up the UserControl in VS.
Note that you have to set the default colour (in this case #CCCCD0) via a property setter and not via an attribute on the Page itself. This is because the attribute would override the value set by the trigger (because it's a style trigger), so even though the trigger would fire, it would always be trumpted by the local attribute specification, meaning that it wouldn't change. I only point this out because it's a fairly common gotcha.
The XAML below does not work (the text does not change when mousing over):
<Window.Resources>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Text" Value="hover"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<TextBlock Text="original"/>
</Grid>
But, if the Text attribute is missing:
<Grid>
<TextBlock/>
</Grid>
The text does change on mouse over. Anybody knows the theory behind this?
It's a DependencyProperty precedence issue, when you actually set the property as in:
<TextBlock Text="original"/>
that takes precedence over the value set in the trigger.
see
http://msdn.microsoft.com/en-us/library/ms743230.aspx