Develop Reference

Make element visible when Validation.HasError is true

I have the following xaml markup:
<GroupBox Margin="10" Padding="20" Header="Case 5 - Custom Error Object">
<GroupBox.DataContext>
<local:ViewModel4/>
</GroupBox.DataContext>
<StackPanel>
<Label Name="AdornerElement" Style="{StaticResource ResourceKey=AdornerElementStyle}"/>
<TextBox Text="{Binding Path=UserName, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}"
Margin="0 10"
Validation.ValidationAdornerSite="{Binding ElementName=AdornerElement}">
</TextBox>
</StackPanel>
</GroupBox>
and the following style:
<Style x:Key="AdornerElementStyle" TargetType="Label">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<StackPanel Orientation="Horizontal" Background="LightCoral">
<Image Source="/clipart.png" Width="24" Margin="10"/>
<ItemsControl ItemsSource="{Binding ElementName=AdornerElement, Path=(Validation.ValidationAdornerSiteFor).(Validation.Errors)}"
VerticalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=ErrorContent.ValidationMessage}"
Style="{StaticResource CustomErrorTypeStyle}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=AdornerElement, Path=Validation.HasError}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Everything works fine except Trigger.
If I set up the property "Visibility" to "Visible" initially, then I can see that error messages are shown correctly.
If I use style shown before, then the Label remains to be collapsed.
Please, help me to use triggers correctly to achieve the final result.

This is not how Validation.ValidationAdornerSite works. This attached property just defines the element that will be adorned with the validation error template. By default this is the element that is validating, the Binding.Target to be more precise.
When you set Validation.ValidationAdornerSite the binding engine will automatically set the attached Validation.ValidationAdornerSiteFor property to reference the element that Validation.ValidationAdornerSite was originally set on.
This means that Validation.HasError and other related attached properties are always set on the Binding.Target and not on the adorner site.
That's why your triggers don't work: they are triggering on the Label instead of the TextBox (where the validation/binding error is registered).
To fix it, the DataTrigger must get the Validation.HasErrors attached property value of the Validation.ValidationAdornerSiteFor attached property, which references the original Binding.Target (the TextBox).
<Style x:Key="AdornerElementStyle"
TargetType="Label">
<Setter Property="Visibility"
Value="Collapsed" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Label">
<StackPanel Orientation="Horizontal"
Background="LightCoral">
<Image Source="/clipart.png"
Width="24"
Margin="10" />
<ItemsControl ItemsSource="{Binding ElementName=AdornerElement, Path=(Validation.ValidationAdornerSiteFor).(Validation.Errors)}"
VerticalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent.ValidationMessage}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=AdornerElement, Path=(Validation.ValidationAdornerSiteFor).(Validation.HasError)}"
Value="True">
<Setter Property="Visibility"
Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Remarks
It's not clear why you are using a Label to display the error messages. You could simply define an error template, which is a ControlTemplate that is referenced by the attached Validation.ErrorTemplate property. This would simplify your code significantly.
The following example creates the exact same visual error feedback but without the hassle for an additional Label and associated triggers to manage the visibility of the error messages. All this is all handled by the WPF binding engine.
<Window>
<Window.Resources>
<!-- The Validation.Errors property is the DataContext of this template -->
<ControlTemplate x:Key="ErrorTemplate">
<StackPanel>
<Border BorderBrush="Red"
BorderThickness="1"
Background="LightCoral">
<StackPanel Orientation="Horizontal">
<Image Source="/clipart.png"
Width="24"
Margin="10" />
<ItemsControl ItemsSource="{Binding}"
VerticalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent.ValidationMessage}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
<Border BorderBrush="Transparent"
BorderThickness="1"
HorizontalAlignment="Left">
<!-- Placeholder for the Binding.Target -->
<AdornedElementPlaceholder x:Name="AdornedElement" />
</Border>
</StackPanel>
</ControlTemplate>
</Window.Resource>
<StackPanel>
<TextBox Text="{Binding Path=UserName, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}"
Validation.ErrorTemplate="{StaticResoucre ErrorTemplate}" />
</StackPanel>
</Window>

DataGridColumnHeader with StackPanel, bind content of TextBlock/Label to ColumnName, dynamic grid

I have a dynamically generated DataGrid bound to a DataTable property in my ViewModel.
I have AutoGenerateColumnHeaders = true, and it's working fine. However, I'm using a DataTemplate to cover the Header with a StackPanel containing a Label and Button. I cannot seem to figure out how to bind the Label Content to the DataGridColumnHeader. I have tried with and without FindAncestor, but I believe the following is the closest to where I need to be...Question is on the Label Content="{}"
<local:UserControlViewBase.Resources>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Width="Auto" Orientation="Horizontal">
<Label Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:UserControlViewBase}},Path=DataContext.TestList.ColumnName}" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button Content="Ok" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:UserControlViewBase.Resources>
//local:UserControlViewBase is just a UserControl with some extra bells and whistles added.
I'm fairly new to WPF and I'm assuming I'm just missing something with the binding - I'm still learning.
Thanks.

This is what I did to get it to work. I had to change the findancestor to look for the DataGridColumnHeader instead of the user control. I then was able to access the Column.Header property:
<local:UserControlViewBase.Resources>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Width="Auto" Orientation="Horizontal">
<Label Width="75" Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridColumnHeader}},Path=Column.Header}" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button Content="Ok" Padding="12,0,12,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:UserControlViewBase.Resources>

xaml button templates and button over button

I'm struggling with a problem while trying create a collection of buttons.
I have a button made in wpf and when I deploy to my application I want to be able to assign the image at instantiation.
Just now the button textblock is bound to {Binding Content} and I'm able to add the top buttons and an Image placeholder.
What I cant figure out is how to assign the click event handlers to the top two buttons, also when I click the top buttons.
The main button click event fires, I've tried changing the Canvas.ZIndex but that's not working.
I've included a very crude image of what I'm trying to achieve, I could create all the buttons separately but that's not the point, I want one template which will allow me to use over different things.
Is it just a control template I need or do I need a completely new usercontrol developed.
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="2" CornerRadius="10" Width="200" Height="130" Background="#FF5581A6" RenderTransformOrigin="0.5,0.5">
<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,5,5,0">
<Button Canvas.ZIndex="10">
<StackPanel Orientation="Horizontal">
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<ImageBrush ImageSource="Resources/Icons/appbar.information.circle.png"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</Button>
<Button x:Name="ClosePlugin" Canvas.ZIndex="10" Margin="5,0,0,0">
<StackPanel Orientation="Horizontal">
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<ImageBrush ImageSource="Resources/Icons/appbar.close.png"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</Button>
</StackPanel>
<Image x:Name="MainImage" Height="60" Width="80" Margin="0,-5,0,0" Source="{Binding}" Stretch="Fill"/>
<TextBlock FontFamily="Segoe UI" FontWeight="Thin" Margin="0,-5,0,0" FontSize="22" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="PluginNameTextBlock" Text="{Binding Content}"/>
</StackPanel>
</Border>
</ControlTemplate>

In my applications I use this solution.
I have defined attached property ImgSource in class ButtonBehavior:
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media;
namespace WpfStackOverflowSample
{
public static class ButtonBehavior
{
private static readonly DependencyProperty ImgSourceProperty = DependencyProperty.RegisterAttached(
"ImgSource",
typeof (ImageSource),
typeof (ButtonBehavior),
new PropertyMetadata(default(ImageSource)));
public static void SetImgSource(ButtonBase button, ImageSource value)
{
button.SetValue(ImgSourceProperty, value);
}
public static ImageSource GetImgSource(ButtonBase button)
{
return (ImageSource)button.GetValue(ImgSourceProperty);
}
}
}
Then I define ContentTemplate for "ImageButtons" and finally when I want to use this kind of buttons I just set attached property ImgSource a apply style with the ContentTemplate
<Window x:Class="WpfStackOverflowSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfStackOverflowSample"
Title="MainWindow" Height="480" Width="640">
<Window.Resources>
<Style TargetType="{x:Type ButtonBase}">
<Setter Property="Margin" Value="0,5" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style x:Key="ImgButtonStyle" TargetType="{x:Type ButtonBase}" BasedOn="{StaticResource {x:Type ButtonBase}}">
<Setter Property="local:ButtonBehavior.ImgSource" Value="/Images/unknown.png" />
<Setter Property="Padding" Value="2" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image
x:Name="img"
Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=(local:ButtonBehavior.ImgSource)}"
Stretch="UniformToFill"
Width="16" Height="16"
Margin="0,0,5,0" />
<TextBlock
x:Name="txt"
Text="{Binding}"
VerticalAlignment="Center" />
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="img" Property="Opacity" Value="0.3" />
<Setter TargetName="txt" Property="Foreground" Value="#ADADAD"></Setter>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type ButtonBase}}" />
</Window.Resources>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<Button local:ButtonBehavior.ImgSource="/Images/encrypt.png"
Style="{StaticResource ImgButtonStyle}"
Content="Encrypt" />
<Button local:ButtonBehavior.ImgSource="/Images/decrypt.png"
Style="{StaticResource ImgButtonStyle}"
Content="Decrypt"
IsEnabled="False" />
<Button Style="{StaticResource ImgButtonStyle}"
Content="No image" />
<Button Content="Classic" />
<Button Content="Classic"
IsEnabled="False" />
</StackPanel>
</Window>

ContentControl Wrapping Issue

I am trying to create a Custom tooltip Control. This control is inherited from ToolTip class. My Custom Tooltip will have a header and a content area. Content could be normal text or any other content (Image, richtextbox etc). Following is the Template Style that custom tooltip control.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type customControls:FlyoutHelp}">
<Border BorderThickness="0" Margin="15" Width="300">
<Border.Effect>
<DropShadowEffect Opacity="0.7" />
</Border.Effect>
<StackPanel TextBlock.FontFamily="Trebuchet MS" TextBlock.FontSize='12'>
<TextBlock Background="{StaticResource DellBlue}" Height="23" Foreground="#FFFFFF" Padding="0,4,0,0" TextAlignment="Center" Text="{Binding HeaderText, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border Background="{StaticResource DellLightGrey}" TextBlock.Foreground="{StaticResource DarkestGrey}" Padding="8">
<ContentControl Content="{Binding HelpContent, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Border>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Now as you can see in my template that I am using ContentControl for showing the content of the tooltip. The problem is when my HelpContent is just plain String, it doesn't wrap that text. I can't replace ContentControl with TextBlock because HelpContent could be some other type too (image, richtextbox etc). Can anyone please provide me what is the best way to fix this problem? I will be really very thankful.

Replace ContentControl tag with:
<ContentPresenter Content="{TemplateBinding HelpContent}">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
[Note: you can leave it as a ContentControl, but ContentPresenter is lighter and follows conventions]

Change StackPanel to Grid since it doesn't know the width for it to wrap.
<Grid TextBlock.FontFamily="Trebuchet MS" TextBlock.FontSize='12'>
<Grid.RowDefinitions>
<RowDefinitions/>
<RowDefinitions/>
<Grid.RowDefinitions/>
<TextBlock Grid.Row="0" Background="{StaticResource DellBlue}" Height="23" Foreground="#FFFFFF" Padding="0,4,0,0" TextAlignment="Center" Text="{Binding HeaderText, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<Border Grid.Row="1" Background="{StaticResource DellLightGrey}" TextBlock.Foreground="{StaticResource DarkestGrey}" Padding="8">
<ContentControl Content="{Binding HelpContent, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Border>
</Grid>

When the Image is null, set another default image?

Can you see this tag:
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
But below? What I'm trying to do is, when the Image is null, set another default image. Is this possible?
<!-- Grid-appropriate 250 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="320" Height="240">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
<TextBlock Text="{Binding ShortTitle}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" Height="48" Margin="15,0,15,0"/>
</StackPanel>
</Grid>
</DataTemplate>

Add a Style with a DataTrigger. e.g. something like
<Image Stretch="UniformToFill">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="{Binding Image}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Image}" Value="{x:Null}">
<Setter Property="Source" Value="Images/Default.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Watch out for precedence of local values.

I'm not sure that you need a trigger I typically use a fallback value like below when I need to specifiy a value when the bound value will not convert.
<Image Source="{Binding Path=ImageURI, FallbackValue='SomeImageURI'}" />
Microsoft FallbackValue Property