I'd like to set a style on all my TextBox controls that does the following when it receives keyboard focus:
1) Change the background color
2) Call .SelectAll() to highlight all text
I have this so far:
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="#FFFFD1D9"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Is there a way to also call .SelectAll() ? Thanks.
You can do this using attached behaviours.
Example
public static class TextBoxBehaviour
{
public static bool GetSelectAll(TextBoxBase target)
{
return (bool)target.GetValue(SelectAllAttachedProperty);
}
public static void SetSelectAll(TextBoxBase target, bool value)
{
target.SetValue(SelectAllAttachedProperty, value);
}
public static readonly DependencyProperty SelectAllAttachedProperty = DependencyProperty.RegisterAttached("SelectAll", typeof(bool), typeof(TextBoxBehaviour), new UIPropertyMetadata(false, OnSelectAllAttachedPropertyChanged));
static void OnSelectAllAttachedPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
((TextBoxBase)o).SelectAll();
}
}
Usage
<Style TargetType="{x:Type TextBox}" xmlns:behaviours="clr-namespace:Controls.Behaviours">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Background" Value="#FFFFD1D9"/>
<Setter Property="behaviours:TextBoxBehaviour.SelectAll" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
References
Josh Smith on Attached Behaviours
NB: Wasn't able to test the above implementation, in theory though it should just workâ˘.
HTH,
Related
Chaps,
I have a datagrid and am colouring the rows as follows.
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridCell}" >
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Background" Value="White" />
</Trigger>
<DataTrigger Binding="{Binding ErrorType}" Value="TerminalError">
<Setter Property ="Foreground" Value="Purple"/>
</DataTrigger>
<DataTrigger Binding="{Binding ErrorType}" Value="CriticalError">
<Setter Property ="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
Currently the colours are hard-coded and I need to change this. I have a singleton class that holds colours for different states and colours may be accessed in the following way:
Color returnedColour = ColourSchemes.Instance.GetColour (CriticalError)
So in the xaml, where I have Value="Red" etc, I wish to source the name from the globally accessible ColourSchemes object instead. Would very much appreciate any words of wisdom.
At first, make sure to use Brush instead of Color what you assign a value to a property like Foreground or Background.
Then you may add an indexer property to your ColourSchemes class, which takes the enum value as key:
public enum ErrorType
{
TerminalError, CriticalError
}
public class ColourSchemes
{
private readonly Dictionary<ErrorType, Brush> brushes =
new Dictionary<ErrorType, Brush>
{
{ ErrorType.TerminalError, Brushes.Orange },
{ ErrorType.CriticalError, Brushes.Red }
};
public Brush this[ErrorType value]
{
get { return brushes[value]; }
}
public static ColourSchemes Instance { get; } = new ColourSchemes();
}
Now you may bind a property like this:
Background="{Binding Source={x:Static local:ColourSchemes.Instance}, Path=[CriticalError]}">
Or in a Setter:
<Setter Property="Background"
Value="{Binding Source={x:Static local:ColourSchemes.Instance}, Path=[CriticalError]}"/>
You may however want to take a look at Dynamic Resources.
<Button Margin="10,0,2,0" Width="90" Command="Open">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage}}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage1}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Source={StaticResource tstImage2}}"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I would like to create a button support hot image: When the mouse hover on the button, the image changes to another one.
I implement a button instance with above code. But actually I would like to create a template that every button can use this style. It is cumbersome to write the same style for every button.
I think it should like:
<Style TargetType="Button">
<Setter Property="Content" Value="{Binding Source= normalImage"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Source=hotImage"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Source=disableImage"/>
</Trigger>
</Style.Triggers>
</Style>
And then use the style like:
<Button command="Open" normalImage="icon1.png" hotImage="icon2.png" disableImage="icon3.png"/>
I am a fresher to WPF, I have tried many ways to do that but still stuck in this problem.
I would like to create a template or style that can apply to every button. The second and third snippet is what I want to achieve. But it not works. In the second snippet, the normalImage,hotImage and disableImage are dynamic paths that can be specified by buttons just as what I wrote in the third snippet.
Please help. Thanks.
I am trying to use attached-property, but I met another problem:
Style binding attached-property didn't show up anything
I solve it myself by using attached property. It may help others, so I post out my code.
Firstly, create the attached property:
class ImageAttached : DependencyObject
{
public static Image GetNormalImage(DependencyObject obj)
{
return (Image)obj.GetValue(NormalImageProperty);
}
public static void SetNormalImage(DependencyObject obj, Image value)
{
obj.SetValue(NormalImageProperty, value);
}
// Using a DependencyProperty as the backing store for NormalImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NormalImageProperty =
DependencyProperty.RegisterAttached("NormalImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
public static Image GetHotImage(DependencyObject obj)
{
return (Image)obj.GetValue(HotImageProperty);
}
public static void SetHotImage(DependencyObject obj, Image value)
{
obj.SetValue(HotImageProperty, value);
}
// Using a DependencyProperty as the backing store for HotImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HotImageProperty =
DependencyProperty.RegisterAttached("HotImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
public static Image GetDisableImage(DependencyObject obj)
{
return (Image)obj.GetValue(DisableImageProperty);
}
public static void SetDisableImage(DependencyObject obj, Image value)
{
obj.SetValue(DisableImageProperty, value);
}
// Using a DependencyProperty as the backing store for DisableImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DisableImageProperty =
DependencyProperty.RegisterAttached("DisableImage", typeof(Image), typeof(ImageAttached), new PropertyMetadata((Image)null));
}
Secondly, create a style target to a button:
<Style x:Key="btnStyle" TargetType="{x:Type Button}">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.NormalImage), RelativeSource={RelativeSource Self}}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.HotImage), RelativeSource={RelativeSource Self}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Content" Value="{Binding Path=(local:ImageAttached.DisableImage), RelativeSource={RelativeSource Self}}"/>
</Trigger>
</Style.Triggers>
</Style>
Lastly, use it. e.g:
<Button x:Name="btn1" Click="Button_Click_1" Width="100" Height="48" Style="{DynamicResource btnStyle}"
local:ImageAttached.NormalImage="{StaticResource tstImage}"
local:ImageAttached.HotImage="{StaticResource tstImage2}"
local:ImageAttached.DisableImage="{StaticResource tstImage1}"/>
I have some XAML which sets the foreground color directly:
<Style x:Key="HomeHeaderText" TargetType="TextBlock">
<Setter Property="FontSize" Value="24" />
<Setter Property="FontFamily" Value="Segoe Light UI" />
<Setter Property="Foreground" Value="#FF606060" />
<Setter Property="Margin" Value="0,50,0,30" />
</Style>
I would like to detect in the style whether or not the system is in high contrast mode, and fall back to one of the system colors if so.
How can one do this using styles?
I tried setting this using a trigger, but this results in XamlParseException at runtime:
<Style x:Key="HomeHeaderText" TargetType="TextBlock">
<Setter Property="FontSize" Value="24" />
<Setter Property="FontFamily" Value="Segoe Light UI" />
<Setter Property="Foreground" Value="#FF606060" />
<Setter Property="Margin" Value="0,50,0,30" />
<Style.Triggers>
<DataTrigger Binding="{x:Static SystemParameters.HighContrast}" Value="True">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</DataTrigger>
</Style.Triggers>
</Style>
The problem with your attempt is that DataTrigger.Binding wants a binding, but you gave it a direct value. You can solve this by setting the binding source:
{Binding Source={x:Static SystemParameters.HighContrast}}
However, this will not be dynamic -- the style would not update if someone toggles high-contrast while the application is running. Ideally it would be nice to have something like this:
{Binding Source={x:Static SystemParameters}, Path=HighContrast}
But unfortunately that isn't possible since it's a static property. So, binding to the HighContrastKey resource is the better option. Instead of using Tag, you could bind this to an attached property. Come to think of it, Microsoft probably should have implemented SystemParameters as attached properties in the first place. Try something like this:
public static class SystemParameterProperties {
public static readonly DependencyProperty HighContrastProperty =
DependencyProperty.RegisterAttached("HighContrast", typeof(bool), typeof(SystemParameterProperties),
new FrameworkPropertyMetadata() {Inherits = true});
public static bool GetHighContrast(DependencyObject obj) {
return (bool)obj.GetValue(HighContrastProperty);
}
public static void SetHighContrast(DependencyObject obj, bool value) {
obj.SetValue(HighContrastProperty, value);
}
}
I used Inherits = true on the property so that we can just set it on the outermost container and let it be accessible everywhere, i.e.:
<Window ...
xmlns:attachedProperties="..."
attachedProperties:SystemParameterProperties.HighContrast="{DynamicResource ResourceKey={x:Static Member=SystemParameters.HighContrastKey}}">
...
</Window>
Finally, your trigger would be:
<Trigger Property="attachedProperties:SystemParameterProperties.HighContrast" Value="True">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</Trigger>
I'd have solved leveraging an helper:
public class HighContrastHelper
: DependencyObject
{
#region Singleton pattern
private HighContrastHelper()
{
SystemParameters.StaticPropertyChanged += SystemParameters_StaticPropertyChanged;
}
private static HighContrastHelper _instance;
public static HighContrastHelper Instance
{
get
{
if (_instance == null)
_instance = new HighContrastHelper();
return _instance;
}
}
#endregion
void SystemParameters_StaticPropertyChanged(object sender, PropertyChangedEventArgs e)
{
Console.WriteLine(e.PropertyName);
if (e.PropertyName == "HighContrast")
{
HighContrastHelper.Instance.IsHighContrast = SystemParameters.HighContrast;
}
}
#region DP IsHighContrast
public static readonly DependencyProperty IsHighContrastProperty = DependencyProperty.Register(
"IsHighContrast",
typeof(bool),
typeof(HighContrastHelper),
new PropertyMetadata(
false
));
public bool IsHighContrast
{
get { return (bool)GetValue(IsHighContrastProperty); }
private set { SetValue(IsHighContrastProperty, value); }
}
#endregion
}
Afterward, the usage in your code is straightforward:
<Style x:Key="HomeHeaderText" TargetType="TextBlock">
<Setter Property="FontSize" Value="24" />
<Setter Property="FontFamily" Value="Segoe Light UI" />
<Setter Property="Foreground" Value="#FF606060" />
<Setter Property="Margin" Value="0,50,0,30" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsHighContrast, Source={x:Static local:HighContrastHelper.Instance}}" Value="True">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</DataTrigger>
</Style.Triggers>
</Style>
Hope it helps.
You can bind it to Tag property of textblock and use that in DataTrigger like below:
<Style x:Key="MyTextBoxStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.HighContrastKey}}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag , RelativeSource= {x:Static RelativeSource.Self}}" Value="True">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</DataTrigger>
</Style.Triggers>
</Style>
I would like to cause a custom UserControl to grow by a multiplier when an "IsSelected" DP is set to true. My current XAML looks like this:
<ctrl:MyBaseControl x:Class="MyDemo.Controls.MyCustomControl"
...>
<ctrl:MyBaseControl.Resources>
<Style TargetType="{x:Type ctrl:MyCustomControl}">
<Setter Property="BorderBrush" Value="White" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Width" Value="340" />
<Setter Property="Height" Value="260" />
</Trigger>
</Style.Triggers>
</Style>
</ctrl:MyBaseControl.Resources>
<Border>
<StackPanel>
...
</StackPanel>
</Border>
In the above sample, "MyBaseControl" extends UserControl, and defines the IsSelected DP.
This code just plain isn't working at the moment, which is one of my issues. The other is that I would like to grow the Width/Height for a certain amount (for example: 0.10) instead of setting it to a hard number. This way I can set the size when I define the control at the source.
Thanks for any help!
ADDITION CODE:
MyBaseControl Code:
public abstract class MyBaseControl: UserControl
{
public static readonly DependencyProperty IsSelectedProperty =
DependencyProperty.Register(
"IsSelected",
typeof(Boolean),
typeof(MyBaseControl),
new PropertyMetadata(null));
public MyBaseControl() : base() { }
#region Properties
public Boolean IsSelected
{
get { return (Boolean)GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
#endregion Properties
}
MyCustomControl Code:
public partial class MyCustomControl: MyBaseControl
{
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register(
"Icon",
typeof(ImageSource),
typeof(MyCustomControl),
new PropertyMetadata(null));
public static readonly DependencyProperty BlurbProperty =
DependencyProperty.Register(
"Blurb",
typeof(String),
typeof(MyCustomControl),
new PropertyMetadata(null));
public MyCustomControl()
{
InitializeComponent();
}
#region Properties
public ImageSource Icon
{
get { return (ImageSource)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public String Blurb
{
get { return (String)GetValue(BlurbProperty); }
set { SetValue(BlurbProperty, value); }
}
#endregion Properties
}
Example of working trigger on internal elements:
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ctrl:MyCustomControl}}, Path=IsSelected}" Value="True">
<Setter Property="BorderThickness" Value="5" />
</DataTrigger>
</Style.Triggers>
</Style>
Try this
<ctrl:MyBaseControl.Resources>
<Style TargetType="{x:Type ctrl:MyCustomControl}">
<Setter Property="BorderBrush" Value="White" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="RenderTransform" >
<Setter.Value>
<ScaleTransform ScaleX="1.1" ScaleY="1.1" />
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
</Trigger>
</Style.Triggers>
</Style>
</ctrl:MyBaseControl.Resources>
<ToggleButton Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}" Template="{Utilities:BindableResource {Binding Path=TemplateResource}}">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Template" Value="{Utilities:BindableResource {Binding Path=SelectedTemplateResource}}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
The first bindable resource works for "TemplateResource" on the template property of togglebutton however "SelectedTemplateResource" does not work within the tiggers setter. This code is within a resourcedictionary where the actual resource is within a themed resourcedictionary.
I get an error saying key is null for xamlparseexception for the setter value. I've been stairing at this for hours but cannot figure out why it doesn't work... If I take out the style and replace the first binding with the second resource it does display proper however the binding within the style will not work.
Does anybody have any idea why?
EDIT
I just tried this but no luck.
<ToggleButton Command="{Binding Path=Command}" Content="{Binding Path=DisplayName}">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Template" Value="{Utilities:BindableResource {Binding Path=TemplateResource}}" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Template" Value="{Utilities:BindableResource {Binding Path=SelectedTemplateResource}}" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
After finding out this really is not possible to do in pure xaml I brought out the c# and create a custom control... this is very basic and can be improved on and I will have change a bit of it but ultimately a custom control solves the issue so that you can hit the click event from within the resource dictionary and change the template on the fly.
public class TabButton : Button
{
public static readonly DependencyProperty SelectedTemplateProperty =
DependencyProperty.Register("SelectedTemplate", typeof(ControlTemplate), typeof(TabButton));
public ControlTemplate SelectedTemplate
{
get { return base.GetValue(SelectedTemplateProperty) as ControlTemplate; }
set { base.SetValue(SelectedTemplateProperty, value); }
}
public TabButton()
{
this.Click += new RoutedEventHandler(TabButton_Click);
}
~TabButton()
{
}
public void TabButton_Click(object sender, RoutedEventArgs e)
{
ControlTemplate template = (ControlTemplate)this.FindResource("Environmental Template Selected");
(sender as TabButton).Template = template;
}
}
Cheers.