The problem
I defined a reusable control, MyControl, that extends a TextBox.
I want to set a Trigger to one of its dependency properties.
So I added a style to it, with Triggers.
But if I set the TargetType of the Style to MyControl, I get a XAML warning that 'MyControl' TargetType does not match type of element 'TextBlock'.
And if I set it to TextBlock, I get a compilation error that The member "MyDependencyProperty" is not recognized or is not accessible..
How can I define this style with the triggers?
Sample
C# code-behind
namespace UserControls.Local
{
public partial class MyControl : TextBlock
{
#region Trogdor
public static readonly DependencyProperty TrogdorProperty = DependencyProperty.Register(
"Trogdor", typeof (bool), typeof (MyControl), new PropertyMetadata(default(bool)));
public bool Trogdor
{
get { return (bool) GetValue(TrogdorProperty); }
set { SetValue(TrogdorProperty, value); }
}
#endregion
public MyControl()
{
InitializeComponent();
}
}
}
XAML
<TextBlock
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:UserControls.Local"
mc:Ignorable="d"
Text="BOOP!"
x:Class="UserControls.Local.MyControl">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Blue"/>
<Style.Triggers>
<Trigger Property="Trogdor" Value="True">
<Setter Property="Foreground" Value="DeepPink"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
The solution I found was to "fully qualify" the dependency property on the binding:
<Trigger Property="local:MyControl.Trogdor" Value="True">
Not sure if you are still looking for a solution, but the answer in this thread worked for me, while yours didn't.
It uses a DataTrigger with a binding on the root element, instead of a Trigger:
<DataTrigger Binding="{Binding Path=Highlight, RelativeSource={RelativeSource AncestorType={x:Type Elements:DataElement}}}" Value="True">
<Setter Property="Control.Background" Value="{DynamicResource EntryBoxHighlightBackground}"/>
</DataTrigger>
With your solution, I press the button and the value of the variable changes but the style trigger doesn't apply the changes, like it was not informed of the change in the variable.
Related
I have the following user control which gets highlighted on mouse over:
<UserControl x:Class="P.WebEnt.Designer.CanvasControls.Container"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ig="http://schemas.infragistics.com/xaml"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Border.Style>
<Style>
<Setter Property="Border.Background" Value="White"/>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.Background" Value="Beige" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel Orientation="Vertical">
<ig:DragDropManager.DropTarget>
<ig:DropTarget IsDropTarget="True">
</ig:DropTarget>
</ig:DragDropManager.DropTarget>
<Label Content="" />
</StackPanel>
</Border>
At run-time, based on our scenario, same control could be added as a child to this control (nesting the same user control for 'n' number of levels).
The requirement is that if the same control is nested inside another, the mouseover on the child should highlight only child and not any of its ancestors. Currently, if I hover the mouse on inner-most control, it highlights all the ancestors.
Any help is appreciated.
here you go, use IsMouseDirectlyOver instead of IsMouseOver
<Trigger Property="Border.IsMouseDirectlyOver"
Value="True">
<Setter Property="Border.Background"
Value="Beige" />
</Trigger>
assuming that the concerned border is the only element nested inside other border, if there is other child elements in the inner most border it may not work as expected. in this case converters or attached behavior may help achieve the same.
EDIT
I attempted to solve the issue in a different way. as you have access to class itself, then we can perhaps do within the class
so change the trigger in style to DataTrigger
<Style>
<Setter Property="Border.Background"
Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsCurrent,RelativeSource={RelativeSource FindAncestor,AncestorType=UserControl}}"
Value="True">
<Setter Property="Border.Background"
Value="Beige" />
</DataTrigger>
</Style.Triggers>
</Style>
and add the following code in the code behind of Container class
protected override void OnMouseMove(MouseEventArgs e)
{
Debug.Print(e.Source.GetHashCode().ToString());
if (CurrentControl != e.Source)
CurrentControl = e.Source as Container;
e.Handled = true;
}
static Container _CurrentControl;
static Container CurrentControl
{
get
{
return _CurrentControl;
}
set
{
if (_CurrentControl != null)
_CurrentControl.IsCurrent = false;
if (value != null)
value.IsCurrent = true;
_CurrentControl = value;
}
}
public bool IsCurrent
{
get { return (bool)GetValue(IsCurrentProperty); }
set { SetValue(IsCurrentProperty, value); }
}
// Using a DependencyProperty as the backing store for IsCurrent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsCurrentProperty =
DependencyProperty.Register("IsCurrent", typeof(bool), typeof(Container), new PropertyMetadata(false));
give it a try and see if that is what you are looking for.
I have a very simple Button-based control that displays an ellipse with color taken from custom dependency control called "Brush".
The template displays ellipse with proper color, but the Setters in Trigger do not recognize the "Brush" property (errors highlighted in the XAML file below).
How to access the "Brush" property in the setter so I can change its value on MouseOver?
XAML:
<Button x:Class="WpfTest.EllipseButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfTest"
Style="{DynamicResource localStyle}"
Name="ellipseButton">
<Button.Resources>
<Style x:Key="localStyle"
TargetType="local:EllipseButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Ellipse Fill="{Binding ElementName=ellipseButton, Path=Brush}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<!-- ERROR HERE: The property "Brush" is not a dependency property. -->
<Setter Property="Brush"
Value="Blue" />
<!-- ERROR HERE: The "BrushProperty" is not recognized or is not accessible. -->
<Setter Property="BrushPropety"
Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Resources>
<Grid>
</Grid>
</Button>
code-behind:
public partial class EllipseButton : Button
{
public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
"Fill",
typeof(Brush),
typeof(EllipseButton),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Gray)));
public Brush Brush
{
get
{
return (Brush)GetValue(BrushProperty);
}
set
{
SetValue(BrushProperty, value);
}
}
public EllipseButton()
{
InitializeComponent();
}
}
Your property is called "Fill" not "Brush":
public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
"Fill", //Error is here
typeof(Brush),
typeof(EllipseButton),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Gray)));
Change that to:
public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
"Brush",
typeof(Brush),
typeof(EllipseButton),
new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Gray)));
Okay, several things needed to be done:
1) Rename dependency property name to "Brush" (it was wrongly named "Fill") - thanks to HighCore
2) When the control is used in code, remove setting the "Brush" property - the local value overriden the setters from style.
3) Move the style from custom control to higher level (e.g. under "Themes\Generic.xaml")
4) Remove x:Key attribute from the style and keep just the type name (still don't know why...)
5) Add default value of the "Brush" property to the style setter (again, not sure why...)
Fixed EllipseButton.xaml:
<Button x:Class="WpfTest.EllipseButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid/>
</Button>
fixed code-behind:
public partial class EllipseButton
{
public static readonly DependencyProperty BrushProperty = DependencyProperty.Register(
"Brush",
typeof(Brush),
typeof(EllipseButton),
new FrameworkPropertyMetadata(null));
public Brush Brush
{
get
{
return (Brush)GetValue(BrushProperty);
}
set
{
SetValue(BrushProperty, value);
}
}
public EllipseButton()
{
InitializeComponent();
}
}
fixed style (Generic.xaml):
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfTest">
<Style TargetType="local:EllipseButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Ellipse Fill="{Binding ElementName=ellipseButton, Path=Brush}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Brush" Value="Pink"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Brush" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
So I have some code similar to the following: (Forgive any typos-- I tried to simplify in the SO editor for the post)
<my:CustomContentControl>
<my:CustomContentControl.Style>
<Style TargetType="{x:Type my:CustomContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=CurrentView}" Value="MyCustomView">
<Setter Property="Content">
<Setter.Value>
<my:CustomView DataContext="{Binding DataContextForMyCustomView"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</m:CustomContentControl.Style>
</my:CustomContentControl>
The problem is that whenever the DataTrigger occurs, the setter does set the Content property to my:CustomView, but it does not bind DataContext. If I move the same code outside of the trigger the DataContext binding works just fine.
Any ideas? If this is a limitation of some sorts, is there any work around?
Update:
I received the following error in the output window:
System.Windows.Data Error: 3 : Cannot find element that provides DataContext. BindingExpression:Path=DataContextForMyCustomView; DataItem=null; target element is 'CustomView' (Name='customView'); target property is 'DataContext' (type 'Object')
The error you posted makes it sound like your custom control is in an object that doesn't have a DataContext, such as a DataGridColumn.Header.
To get around that, you can create a Freezeable object in your .Resources containing the binding you're looking for, then bind your my:CustomView.DataContext to that object
<my:CustomContentControl.Resources>
<local:BindingProxy x:Key="proxy"
Data="{Binding DataContextForMyCustomView, ElementName=MyControl}" />
</my:CustomContentControl.Resources>
...
<my:CustomView DataContext="{Binding Source={StaticResource proxy}}"/>
Here's the code for a sample Freezable object copied from here:
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
// Using a DependencyProperty as the backing store for Data.
// This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object),
typeof(BindingProxy), new UIPropertyMetadata(null));
}
Also, you really should use ContentTemplate instead of Content to avoid an exception if more than one object applies that style :)
I solved a similar problem by putting the UserControl into the resources and then changing the Content with that.
e.g. from my own code (different names, same concept)
<ContentControl Grid.Column="1"
Margin="7,0,7,0">
<ContentControl.Resources>
<mapping:Slide11x4MappingView x:Key="Slide11X4MappingView" DataContext="{Binding MappingViewModel}"/>
<mapping:MicrotubeMappingView x:Key="MicrotubeMappingView" DataContext="{Binding MappingViewModel}"/>
</ContentControl.Resources>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Acquirer.Sorter.TrayType}" Value="{x:Static mapping:TrayType.SLIDES11X4}">
<Setter Property="Content" Value="{StaticResource Slide11X4MappingView}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Acquirer.Sorter.TrayType}" Value="{x:Static mapping:TrayType.VIALS}">
<Setter Property="Content" Value="{StaticResource MicrotubeMappingView}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
I want to change the state of a dependency property (Mode) in a UserControl triggered off of a change change of a second dependency property (ViewType).
I tried defining a DataTrigger as follows, but for some reason it doesn't work:
<UserControl.Resources>
<Style TargetType="{x:Type UserControls:MyUserControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding ViewType}" Value="ViewType2">
<Setter Property="Mode" Value="Logon"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
To verify that my binding was working correctly I wrote the following test XAML in the same user control:
<Style x:Key="butstyle">
<Style.Triggers>
<DataTrigger Binding="{Binding ViewType}" Value="ViewType2">
<Setter Property="Control.Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
When I assigned this style to a button, I see the foreground color change to white at the right time, which proves my Binding to ViewType is working.
I seems I need to use a style under usercontrol.resources (like in the first block of code above), but the "Mode" property is never set.
Is this the right way to do this? I'd like to try to keep this in XAML if possible, but I'm not comfortable how triggers should work when they are not related directly to visual elements.
In case its relevant, the "ViewType" bound property is defined in a parent UserControl, and the "Mode" property is defined on MyUserControl.
Update:
I used a converter to find out that my trigger is being called, however my setter is not getting engaged for some reason. Here is the code for my DP which I am trying to set. Breakpoints on neitehr the set() nor the OnModeChanged() are called. Is there anything wrong with my Dependency Property?
public enum ModeStates { Logon, NextState }
public ModeStates Mode
{
get { return (ModeStates)GetValue(ModeProperty); }
set { SetValue(ModeProperty, value); }
}
protected static readonly DependencyProperty ModeProperty = DependencyProperty.Register(
"Mode", typeof(ModeStates), typeof(MyUserControl),
new FrameworkPropertyMetadata(new PropertyChangedCallback(OnModeChanged))
);
private static void OnModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// .......
}
Update:
I was able to use DependencyPropertyDescriptor.AddValueChanged() to solve my problem in a pretty clean fashion.
If the dependency properties in question are defined on the UserControl you need to set it's style property, not add a default style inside the resources.
to set the style inline in XAML
<UserControl.Style>
<Style TargetType="{x:Type UserControls:MyUserControl}">
<!-- Triggers -- >
</Style>
</UserControl.Style>
In addition to Adam's answer, are you setting the Mode property in the <UserControl> tag anywhere? If you do, it is overwriting the triggered value.
Also, on occasion I have had issues with a triggered value not getting set unless a default value is also defined in the style.
For example, sometimes this will not work
<UserControl.Style>
<Style TargetType="{x:Type UserControls:MyUserControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding ViewType}" Value="ViewType2">
<Setter Property="Mode" Value="Logon"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
while this does
<UserControl.Style>
<Style TargetType="{x:Type UserControls:MyUserControl}">
<Setter Property="Mode" Value="{x:Null}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewType}" Value="ViewType2">
<Setter Property="Mode" Value="Logon"/>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
MSDN says "Gets or sets an arbitrary object value that can be used to store custom information about this element." which means I can store anything I want in this property.
But if you bind to this property (with property of type String having a value say "XYZ") and use it in Trigger conditions it doesn't work!
<Trigger Property="Tag" Value="XYZ">
<Setter Property="Background" Value="Red" />
</Trigger>
It does not set the background red. You can try and assume myElement to be a TextBlock! Why is it like this?
Tag has no special functionality in WPF.
This works for me:
<TextBlock Tag="{Binding Data}"
x:Name="tb">
<TextBlock.Style>
<Style>
<Style.Triggers>
<Trigger Property="TextBlock.Tag"
Value="XYZ">
<Setter Property="TextBlock.Background"
Value="Lime" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
And setting the Data object property to "XYZ" in an event.
The Tag is a construct held over from Winforms days (and possibly there from before that!). It was used as a convenient place to associate an object with a UI element, such as a FileInfo with a Button, so in the Button's event handler you could simply take the event sender, cast it to a Button, then cast the Tag value to a FileInfo and you have everything you need about the file you want to open.
There is one situation, however, where I've found the Tag is useful in WPF. I've used it as a holding spot that can be accessed by a ContextMenu MenuItem, which can't use the normal RelativeSource bindings you'd use to traverse the visual tree.
<ListBox.ItemContainerStyle>
<Style
TargetType="ListBoxItem">
<Setter
Property="Tag"
Value="{Binding ElementName=TheUserControlRootElement}" />
<Setter
Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem
Header="_Remove"
ToolTip="Remove this from this list"
CommandParameter="{Binding DataContext, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
Command="{Binding PlacementTarget.Tag.Remove, RelativeSource={RelativeSource AncestorType=ContextMenu}}" />
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
From the ContextMenu, I cannot access the Remove command which is defined in the UserControl class where this snippet is defined. But I can bind the root to the Tag of the ListBoxItem, which I can access via the ContextMenu.PlacementTarget property. The same trick can be used when binding within a ToolTip, as the same limitations apply.
MainWindow.xaml:
<Window x:Class="wpftest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock x:Name="test" MouseDown="test_MouseDown"
Tag="{Binding TestProperty}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Tag" Value="XYZ">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Window>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new TestViewModel();
}
private void test_MouseDown(object sender, MouseButtonEventArgs e)
{
((TestViewModel)DataContext).TestProperty = "XYZ";
}
private sealed class TestViewModel : INotifyPropertyChanged
{
private string _testPropertyValue;
public string TestProperty
{
get { return _testPropertyValue; }
set
{
_testPropertyValue = value;
var handler = PropertyChanged;
if(handler != null)
handler(this, new PropertyChangedEventArgs("TestProperty"));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
Updated: Tag property now is bound to TestProperty.