'Cannot find governing FrameworkElement...' warning when binding inside DataTemplates - wpf

I'm getting this warning in Visual Studio output window when binding on a SolidColorBrush property inside a DataTemplate:
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=MyColor; DataItem=null; target element is 'SolidColorBrush' (HashCode=22943289); target property is 'Color' (type 'Color')
If I bind directly on the rectangle element, outside the DataTemplate, it all works well.
Can anyone explain why this difference in the two apparently similar usages from the sample code below:
My View:
<UserControl.Resources>
<vm:TestViewModel x:Key="_myTestVM"/>
<DataTemplate x:Key="testVMDataTemplate">
<Grid>
<Rectangle Height="30" Width="200" Margin="5">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=MyColor}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<StackPanel DataContext="{StaticResource _myTestVM}">
<!-- Binding *outside* the DataTemplate = works fine -->
<Rectangle Height="30" Width="200" Margin="5">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Path=MyColor}"/>
</Rectangle.Fill>
</Rectangle>
<!-- Binding *inside* the DataTemplate = output warning -->
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource testVMDataTemplate}"/>
</StackPanel>
</Grid>
My ViewModel (TestViewModel):
public class TestViewModel {
private Color _color = Colors.Green;
public Color MyColor {
get { return _color; }
}
public TestViewModel() {
}
}
Update:
It evidently has to do with binding the Color property for the SolidColorBrush. The same thing is happening if I bind the Angle property on a RotateTransform object.
Thanks in advance.

Binding with default data source as DataContext wont work for SolidColorBrush type as they are not framework elements. Plus they are freezable and you are not allowed to change their colors dynamically through data context based color binding.
Either you will have to bind the color to the background fill via a converter that converts the color into a solid color brush.
<TextBlock Background="{Binding MyColor,
Converter={StaticResource ColorToBrushConverter}}" />
Or use Color as DynamicResource and refer that in Solid Color Brush.
ControlTemplate Storyboard color animation problem

Related

Set ImageSource in UserControl doesnt work

I had a large controle (bunch of labels etc.) that I used that often I wanted to extract that as an UserControl.
Working Code Before:
<Image Source="/Images/MainWindow/Label.png" Width="20" Height="20" />
Code Now:
New User Control xaml:
<Image Source="{Binding ImageSource}" Width="20" Height="20" />
UserControl Property:
public ImageSource ImageSource { get; set; }
Call of UC:
<uc:TitleUC x:Name="TitleBar" ImageSource="/Images/MainWindow/Label.png" />
Sadly the image doesn't show and I can't find any information why not or how to debug it.
The Binding in the UserControl's XAML should use the UserControl instance as source object, not the current DataContext:
<Image Source="{Binding ImageSource,
RelativeSource={RelativeSource AncestorType=UserControl}}" .../>
You should also declare the ItemsSource property as dependency property, in order to make it bindable and to be able to set it by a Setter in a Style or a Trigger.

Binding ToolTip in UserControl

I tried to bind a ToolTip text in a UserControl this way:
<Grid.ToolTip>
<TextBlock
Text="{
Binding Path=InfoTT,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type UserControl}
}
}" />
</Grid.ToolTip>
And it doesn't work, the Tooltip was empty and in logs, I saw:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.UserControl', AncestorLevel='1''. BindingExpression:Path=InfoTT; DataItem=null; target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')*
But when I did:
<Grid
ToolTip="{
Binding Path=InfoTT,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type UserControl}
}
}">
</Grid>
It worked. Can anyone explain why the first way doesn't work?
When Binding.RelativeSource doesn't resolve, you can always be sure that the Binding.Target is not part of the visual tree.
In your first example you are explicitly defining the tree structure of the ToolTip. You are explicitly creating the content e.g. by adding the TextBlock. The content of the ToolTip is not part of the visual tree and therefore the Binding.RelativeSource can't be resolved.
In your second example, you let the FrameworkElement implicitly create the ToolTip content.
Now FrameWorkElement will first resolve the Binding, which resolves, as the FrameworkElement is still part of the visual tree. The resolved value is taken, ToString invoked, a TextBlock created and the string value assigned to TextBlock.Text.
Solution
To solve the binding problem, when implementing the ToolTip explicitly, you can implement a Binding Proxy as suggested in a comment by #Mark Feldman which makes use of the StaticResource markup to provide a Binding.Source to elements that are not part of the visual tree.
It's basically a bindable ObjectDataProvider.
A similar solution to the binding proxy is to define the content as a resource of the Grid and then reference it via DynamicResource using a ContentPresnter:
<UserControl>
<Grid>
<Grid.Resources>
<!-- The proxy -->
<TextBlock x:Key="ToolTipText"
Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=InfoTT}" />
<Grid.ToolTip>
<ToolTip>
<ContentPresenter Content="{DynamicResource ToolTipText}" />
</ToolTip>
</Grid.ToolTip>
</Grid>
</UserControl>
But you could also make use of the fact that the DataContext is still inherited. Bindings to the DataContext will still resolve.
In your scenario, where you want to bind the content of the ToolTip to a property of the parent UserControl, you could bind this property to a property of the view model, which is the current DataContext of Grid (and therefore for its ToolTip). I only recommend this, when binding to business data and not layout data:
<UserControl InfoTT="{Binding ViewModelInfoTT}">
<UserControl.DataContext>
<ViewModel />
</UserControl.DataContext>
<Grid>
<Grid.ToolTip>
<ToolTip>
<TextBlock Text="{Binding ViewModelInfoTT}" />
</ToolTip>
</Grid.ToolTip>
</Grid>
</UserControl>
If you don't use view models and host the data directly in the control, you may like to set the DataContext to the control itself. This way you simplify all bindings and of course can now bind to the UserControl from within the ToolTip:
// Constructor
public MyUserControl()
{
InitializeComponent();
// Set the UserControl's DataContext to the control itself
this.DataContext = this;
}
<UserControl>
<Grid>
<Grid.ToolTip>
<ToolTip>
<TextBlock Text="{Binding InfoTT}" />
</ToolTip>
</Grid.ToolTip>
</Grid>
</UserControl>
Alternatively override the DataContext. Of course you'll lose access to the current context:
<UserControl>
<Grid DataContext="{Binding RelativeSource={RelativeSource AncestoType=UserControl}>
<Grid.ToolTip>
<ToolTip>
<TextBlock Text="{Binding InfoTT}" />
</ToolTip>
</Grid.ToolTip>
</Grid>
</UserControl>

Hiding validation adornment when hiding a control

How, in WPF, do you hide the validation error template adornment (red box by default) when you hide a control? When I hide my controls (to facilitate switching between views) the error adornment sticks around.
Even more difficult, how do I do this using MVVM?
The default ControlTemplate for the Validation.ErrorTemplate has an AdornedElementPlaceholder which in turn has a reference to its AdornedElement. It looks like this
<ControlTemplate>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder />
</Border>
</ControlTemplate>
From here would could bind the Visibility of the Border to the Visibility of the AdornedElementPlaceholder.AdornedElement to link their Visibility. Then we make all the Control's that has this problem use this Validation.ErrorTemplate instead of the default one. Here's an example
Xaml
<Window.Resources>
<ControlTemplate x:Key="ValidationErrorTamplate">
<Border Visibility="{Binding ElementName=placeHolder,
Path=AdornedElement.Visibility}"
BorderBrush="Red"
BorderThickness="1">
<AdornedElementPlaceholder x:Name="placeHolder"/>
</Border>
</ControlTemplate>
</Window.Resources>
<TextBox ...
Validation.ErrorTemplate="{StaticResource ValidationErrorTamplate}">
Update
To reference the parent UserControl in the binding you can
1.For a specific control you can walk up the logical tree using the Parent Property
Example: If the TextBox is located in a StackPanel in the UserControl we can reference it with Parent.Parent
<UserControl ...>
<StackPanel>
<TextBox ...
Validation.ErrorTemplate="{StaticResource ValidationErrorTamplate2}">
<ControlTemplate x:Key="ValidationErrorTamplate2">
<Border Visibility="{Binding ElementName=placeHolder,
Path=AdornedElement.Parent.Parent.Visibility}"
BorderBrush="Red"
BorderThickness="1">
<AdornedElementPlaceholder x:Name="placeHolder"/>
</Border>
</ControlTemplate>
2.For a more dynamic approach you can use a ResourceDictionary with a code behind file where you make use of the Loaded event for the Border. In it, you walk up the visual tree to find the parent UserControl and use that as the source for the Binding
ValidationErrorTemplateDictionary.xaml
<ResourceDictionary x:Class="ValidationErrorVisibility.ValidationErrorTemplateDictionary"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTemplate x:Key="ValidationErrorTamplate3">
<Border BorderBrush="Red"
BorderThickness="1"
Loaded="ValidationAdorner_Loaded">
<AdornedElementPlaceholder/>
</Border>
</ControlTemplate>
</ResourceDictionary>
ValidationErrorTemplateDictionary.xaml.cs
public partial class ValidationErrorTemplateDictionary
{
private void ValidationAdorner_Loaded(object sender, RoutedEventArgs e)
{
Border adornedBorder = sender as Border;
Binding visibilityBinding = new Binding("Visibility");
UIElement adornedElement = ((AdornedElementPlaceholder)adornedBorder.Child).AdornedElement;
UserControl parentUserControl = GetVisualParent<UserControl>(adornedElement);
visibilityBinding.Source = parentUserControl;
adornedBorder.SetBinding(Border.VisibilityProperty, visibilityBinding);
}
public static T GetVisualParent<T>(object childObject) where T : Visual
{
DependencyObject child = childObject as DependencyObject;
while ((child != null) && !(child is T))
{
child = VisualTreeHelper.GetParent(child);
}
return child as T;
}
}
Your UserControl
<UserControl ...>
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ValidationErrorTemplateDictionary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel>
<TextBox ...
Validation.ErrorTemplate="{StaticResource ValidationErrorTamplate3}">
I've just had to solve this very problem, for visibility AND opacity.
I did it by creating an inherited attached property which I data bind the ErrorTemplate visibility and opacity to. On the parent element (the actual element that is fading in and out / being collapsed) I simply bind the new attached properties to visibility and opacity respectively.
This method uses WPF's logical tree and existing property value inheritance to solve the problem without code behind, or specific knowledge by your template of what the visibility-controlling parent will be.
In hindsight, I could have created a single attached property of type FrameWorkElement which I can then use to bind on any property on the parent element. This approach would involve less binding and less code to achieve while providing a little more flexibility. Perhaps an attached property already exists to let you do the same thing.
You can read all about attached properties right here: http://msdn.microsoft.com/en-us/library/ms749011.aspx
Alternatively, this is a good stack:
How exactly do Attached Properties work in WPF?

How to use template binding inside data template in custom control (Silverlight)

I am trying to create control which will take ItemsSource and InnerTemplate and will show all the items wrapped in CheckBoxes.
The control has 2 dependency properties:
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(CheckBoxWrapperList), null);
public static readonly DependencyProperty InnerTemplateProperty = DependencyProperty.Register("InnerTemplate", typeof(DataTemplate), typeof(CheckBoxWrapperList), null);
and here is the template:
<ControlTemplate TargetType="local:CheckBoxWrapperList">
<Grid>
<Grid.Resources>
<DataTemplate x:Key="wrapper">
<CheckBox>
<ContentPresenter ContentTemplate="{TemplateBinding InnerTemplate}" Content="{Binding}" />
</CheckBox>
</DataTemplate>
</Grid.Resources>
<ItemsControl ItemTemplate="{StaticResource wrapper}" ItemsSource="{TemplateBinding ItemsSource}" />
</Grid>
</ControlTemplate>
However, this approach does not work.
Binding in the ControlPresenter.ContentTemplate using TemplateBinding does not work.
However, when I don't use template binding and reference the template as static resource, then it works as expected.
Why cannot I use the template binding inside the content presenter in datatemplate?
What am I missing here? Any special markup required?
Is there a way to achieve the expected behavior?
Thanks in advance.
Silverlight and WPF
You can get around this with a relative source binding:
Instead of:
{TemplateBinding InnerTemplate}
You would use:
{Binding RelativeSource={RelativeSource AncestorType=local:CheckBoxWrapperList}, Path=InnerTemplate}
It's a bit messier but it works.
WinRT
WinRT doesn't have AncestorType. I've got something that works but it's kind of horrifying.
You can use an attached property to store a TemplateBinding value and then access it using ElementName...
<ControlTemplate TargetType="local:CheckBoxWrapperList">
<Grid x:Name="TemplateGrid" magic:Magic.MagicAttachedProperty="{TemplateBinding InnerTemplate}">
<Grid.Resources>
<DataTemplate x:Key="wrapper">
<CheckBox>
<ContentPresenter ContentTemplate="{Binding ElementName=TemplateGrid, Path=(magic:Magic.MagicAttachedProperty)}" Content="{Binding}" />
</CheckBox>
</DataTemplate>
</Grid.Resources>
<ItemsControl ItemTemplate="{StaticResource wrapper}" ItemsSource="{TemplateBinding ItemsSource}" />
</Grid>
</ControlTemplate>
I don't know if there's a better way for WinRT.
TemplateBinding can only be used within a ControlTemplate, you're using it within a DataTemplate. (The fact that the DataTemplate is within a ControlTemplate doesn't matter)

Silverlight MVVM binding a ListBox

Using Silverlight 4 / MVVM.
I am trying to bind a ViewModel to a listbox with a custom template but the data is not displaying. I have managed to get raw data to display if I set the DisplayMemberPath property. If I remove this property and try and bind to the textblocks, nothing displays. Here is the XAML
<ListBox Height='200'
HorizontalAlignment='Left'
Margin='10,10,0,0'
Name='lstForumTopics'
VerticalAlignment='Top'
Width='200'
DataContext='{Binding Path=ForumTopics,Source={StaticResource ForumViewModel}}'
ItemsSource='{Binding Path=ForumTopics,Source={StaticResource ForumViewModel}}'>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation='Vertical'>
<TextBlock Text='{Binding ForumTopicText,Source={StaticResource ForumViewModel}}'></TextBlock>
<TextBlock Text='{Binding PostCount,Source={StaticResource ForumViewModel}}'></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Background>
<LinearGradientBrush EndPoint='0.5,1'
StartPoint='0.5,0'>
<GradientStop Color='#FFDCE2E5'
Offset='1' />
<GradientStop Color='White'
Offset='0' />
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
I believe you are confusing the Binding engine. If you are going to use a StaticResource try...
DataContext="{Binding Source={StaticResource ForumViewModel}}"
ItemsSource="{Binding Path=ForumTopics}"
<TextBlock Text="{Binding Path=ForumTopicText}" />
<TextBlock Text="{Binding Path=PostCount}" />
A control has a DataContext which holds the object that the other properties will bind to. The ItemsSource just needs to know the property name of the DataContext object to bind to. Finally, the DataTemplate has a DataContext set to each of the objects within your item source, so they only need to be bound to the property name of the object within your ItemsSource.
I think you need to binding the ItemsSource of the ListBox to an ObservableCollection or IEnumerable of ForumViewModels, not just a single one.

Resources