I'm trying to set up different styling for a border around a textbox for both errors and warnings. Currently I am able to get the default error styling color to show but implementing warnings with DataTrigger doesn't seem to update the styling on the border. The DataTrigger is supposed to be bound to a bool value in an object in (Validation.Errors)[0].ErrorContext outside of Windows.Resources.
<Style x:Name="ErrTemplate" x:Key="ErrTemplate">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<AdornedElementPlaceholder x:Uid="ControlWithErrors" Name="ControlWithErrors>
<Border x:Name="MainBorder" BorderBrush="Red" BorderThickness="1"/>
</AdornedElementPlaceholder>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding (Validation.Errors)[0].ErrorContent.IsWarning, ElementName="ControlWithErrors}" Value="true">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
<Setter>
</Style>
And the element outside of Windows.Resources that has notification on validation errors whenever an invalid name is word is typed
<TextBox
x:Uid="EmailName"
x:Name="EmailName"
Text="{Binding EmailName, Mode="TwoWay", NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True, UpdateSourcetrigger=PropertyChanged}"
Style="{DynamicResource ErrTemplate}"/>
Is there a better way of doing this? Any help would be great.
I think the error is that you set BorderBrush="Red" as local value. Set it in a style and it should then work, if the binding is correct.
See Dependency property value precedence (WPF .NET)
<Style x:Name="ErrTemplate" x:Key="ErrTemplate">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<AdornedElementPlaceholder x:Uid="ControlWithErrors" Name="ControlWithErrors">
<Border x:Name="MainBorder" BorderThickness="1">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Red"/>
</Style>
</Border.Style>
</Border>
</AdornedElementPlaceholder>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding [0].ErrorContent.IsWarning}" Value="true">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
So I have a style for my TextBox as shown
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="20">
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<StackPanel>
<!-- ScrollViewer to restore the default textbox template that is gone because of
us now overriding it -->
<Border CornerRadius="2" Padding="2" Background="White" BorderBrush="Black" BorderThickness="1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Background="Gray" />
</Border>
<ItemsControl FontSize="10" ItemsSource="{TemplateBinding Validation.Errors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="Red" Text="{Binding Path=ErrorContent}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
When there is an error, I'd like the text box to show a red background, with the error messages appearing underneath it. I've set up a trigger to change the TextBox's background when there's an error, but it seems that since I override the TextBox's normal template so that I can show the error messages, the background of the textbox itself doesn't change (it stays gray). I realize that this is because I used a ScrollViewer to restore the textbox appearance, but now how can I somehow refer to this ScrollViewer from my trigger?
It's more for learning purposes.
You need to better use ControlTemplate.
Possible example:
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="20"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<StackPanel>
<!-- ScrollViewer to restore the default textbox template that is gone because of
us now overriding it -->
<Border x:Name="PART_Border" CornerRadius="2"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
<ItemsControl FontSize="10" ItemsSource="{TemplateBinding Validation.Errors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="Red" Text="{Binding Path=ErrorContent}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="Red"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
but now how can I somehow refer to this ScrollViewer from my trigger?
Move the trigger from the Style to the ControlTemplate and use the TargetName property of the Setter to refer to the ScrollViewer or the parent Border element inside the template, e.g.:
<ControlTemplate TargetType="TextBox">
<StackPanel>
<Border ...>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" Background="Gray" />
</Border>
<ItemsControl ... />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter TargetName="PART_ContentHost" Property="Background" Value="Red"/>
...
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
What I am trying to do is when my mouse got over a button inside a border that border background color must change.
<Border Name="HistoryBorder"
Grid.Column="0"
Height="30"
VerticalAlignment="Top"
Margin="0,0,326.8,0"
Background="#FF323030"
CornerRadius="0,0,15,0"
MouseDown="draging_bar">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="75"
Name="HistoryButton"
Height="30"
Margin="0"
FontFamily="/Fonts/#Minecraft"
Foreground="#FFB6B002" >
<Button.Content>
History
</Button.Content>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HistoryButton, Path=IsMouseOver}" Value="True">
<DataTrigger.Setters>
<Setter Property="Background" Value="Green" />
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>
As you can see border is parent and button is a child in it. When I try to use targetname it is not working. Is something like that even possible ?
As far as I understand, setting Style for Border to be bind with it's child's IsMouseOver can be one of the ways.
<Border Name="HistoryBorder"
Grid.Column="0"
Height="30"
VerticalAlignment="Top"
Margin="0,0,326.8,0"
CornerRadius="0,0,15,0"
>
<!-- You have to put Background color to Style. Or priority makes it cannot be overrided from the Setter of Style -->
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="#FF323030"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HistoryButton, Path=IsMouseOver}" Value="True">
<DataTrigger.Setters>
<Setter Property="Background" Value="Black"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
...
I have a ToggleButton with a red background. I need to set a green background when the toggle button is checked.
I've tried this:
<ToggleButton Content="Test 001" Name="btn03" Height="20">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Background" Value="#ff0000" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#00ff00" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
But instead a green color I get a light blue color (I think is the default color of my
system).
What I'm doing wrong and how to fix it?
WPF 4.0 doesen't allow this. Look here for a different approach:
<Grid>
<Grid.Resources>
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" Background="Red">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ToggleButton Content="ToggleButton" Style="{StaticResource ToggleButtonStyle}"/>
</Grid>
Everywhere I've looked, I've found the standard solution to attach a ToolTip to a control whose Binding has Validation.HasError == true but nowhere shows how you might completely override the ToolTip's template so that you could, for example, still have your own custom theme which overrides the style for all ToolTips but when a control has that specific condition you can specify a template which has a red border, red see-through background and red text, for example.
The standard solution is:
<Style x:Key="{x:Type FrameworkElement}" TargetType="FrameworkElement">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
Does anyone know how to expand this to set the ToolTip background, border and text colour without overriding the base ToolTip control style? Bear in mind I've already specified this to create my own "theme" so I don't want to change it if possible.
Yes, you can do it like this:
<Style x:Key="{x:Type FrameworkElement}" TargetType="FrameworkElement">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Content="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}" Style="{StaticResource MyInheritedStyleForValidation}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Where MyInheritedStyleForValidation should probably override your theme style.
Set the DataContext of the ToolTip to the parent control:
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Foreground="White"
Background="Black"
DataContext="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Self}}"
Content="{Binding Path=(Validation.Errors)[0].ErrorContent}"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
This fix the tooltip content.
<Style x:Key="{x:Type FrameworkElement}" TargetType="FrameworkElement">
<Setter Property="ToolTip" Value="{Binding GeneralTooltip}"/>
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource ValidationTemplate}"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip">
<Setter.Value>
<ToolTip Style="{StaticResource WarningTooltip}"/>
</Setter.Value>
</Setter>
<Setter Property="Tag" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</Style>
The tooltip template from his style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<!--Display the text-->
<Label Background="Transparent"
BorderThickness="0"
VerticalAlignment="Center"
Grid.Column="1"
Content="{Binding Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Control}, AncestorLevel=2}}"
BorderBrush="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
A few questions regarding ListBox here (3 actually)
1. ListBoxItem/Rectangle Margins
From the image, I think the margins are uneven, the left seems like it have more margin. And this is when my margins is already set to
<ListBox.ItemTemplate>
<DataTemplate>
<Rectangle Width="20" Height="20" Margin="1,2,2,2">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding}" />
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</ListBox.ItemTemplate>
2. How can I change the Selected Item Look?
I don't want that blue background, can I just have a border?
I tried the example from Change WPF DataTemplate for ListBox item if selected
with this code
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Rectangle Width="20" Height="20" Margin="1,2,3,2">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding}" />
</Rectangle.Fill>
</Rectangle>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border BorderBrush="DarkGray" BorderThickness="1">
<Rectangle Width="20" Height="20" Margin="1,2,3,2">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding}" />
</Rectangle.Fill>
</Rectangle>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
and got something like
3. Binding for Selected Item
I am trying to bind the selected color to a property of the view model. If the color in the view model does not exists in the list of colors provided, no color should be selected. Think of this as an alternative way to select color, I have selection of colors via RGB/HSB sliders. I tried
<ListBox ItemsSource="{Binding ThemeColors}" SelectedValue="{Binding Color}" SelectionChanged="ListBox_SelectionChanged" ...
then in C#
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listBox = (ListBox)sender;
if (listBox.SelectedValue != null)
Color = (Color)listBox.SelectedValue;
}
But after that, when I try to select colors with the sliders, I get some weird jerking and sometimes the color always snap back to the color selected from the list box. But sometimes it works fine, I am quite confused.
1.ListBoxItem comes with a default Padding of "2,0,0,0", that's why the Margin seems of. This can be changed in the ItemContainerStyle of the ListBox
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>
</ListBox.ItemContainerStyle>
(Although I seem to get the best result with a Padding of 1,0,0,0. Can't explain that..)
2.To remove the Background and only display the Border I think you'll have to retemplate the ListBoxItem and modify the Triggers to use BorderBrush instead of Background for the Border.
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
For 3. I'm not sure I understand what you want to do