What is the simplest way to get a WPF resource from code?
I need to disable a text box in a WPF form if a checkbox in the same window is checked. I have wired the checkbox to an event handler in code-behind. The event handler disables the checkbox and changes its background to a light gray, to indicate that the control is disabled:
private void OnCheckBoxChecked(object sender, RoutedEventArgs e)
{
MyTextBox.IsEnabled = false;
MyTextBox.Background = (Brush)FindResource("DisabledControlBackgroundBrush");
}
The disabled control background color is defined as a resource in a resource dictionary that is imported into the WPF window. I tested the resource by setting the textbox background in XAML, and the resource works fine.
I also know the event handler is working, because it disables the text box when the checkbox is clicked.
My problem is that the event handler isn't changing the Background property as it should. I suspect that there is a problem with my call to FindResource, but I am not getting an exception, and the Output window has nothing on it.
So, how do I get this resource from code and apply it to my text box? Thanks for your help.
David. I've put together a sample window that does this using triggers on the TextBox.Style:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Window.Resources>
<SolidColorBrush x:Key="IsCheckedColor" Color="DarkGray" />
</Window.Resources>
<StackPanel>
<TextBox x:Name="textbox" Margin="36" Height="24" >
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=checkbox}" Value="True" >
<Setter Property="Background" Value="{StaticResource IsCheckedColor}" />
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<CheckBox x:Name="checkbox" Content="Click Me" Height="24" Margin="36"/>
</StackPanel>
</Window>
You can't use a Trigger to change another control's properties, but you can use them to change a control's properties based on something else, like a DataContext or another control.
Each control can have a Triggers collection, but this can only contain EventTriggers. In a Style you can use plain Trigger which can be used to control animation, as well as DataTrigger, which I've used in this sample to control the TextBox settings based on the properties of the CheckBox.
Notice that I've also used a Setter outside of the Triggers collection to set the default value, and I don't need a second Setter for when the CheckBox is not checked -- it just goes back to the "default" state.
edit - how to change background of disabled TextBox
I do this in Blend, but if you don't have Blend you can of course put the XAML in directly. This has to do with controls states. As the TextBox transitions among Normal, MouseOver, and Disabled, you can animate changes to the appearance. In this case we use an animation of virtually zero duration, so the change is immediate.
Add the following to the StackPanel:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textbox" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="{StaticResource IsCheckedColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
this kind of approach is form Windows Forms which is a bad pattern for WPF. All what you want to do is can be done by triggers and styles
Patten:
<Style x:Key="BackGroundCheckBoxStyle"> < !--apply the style to checkbox -->
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="{Binding ElementName=m_txtBox, Path=IsEnabled, Mode=TwoWay}" Value="false}" />
<!-- bind your resource here with a setter as well -->
</Trigger>
</Style.Triggers>
</Style>
Background store in the Aplication.Resources scope or Window. Triggers are Freezable object so GUI will refresh itself (no repaint() needed)
Try to get some overview, since it is a new way to develop apps :)
Related
I have four buttons and four text boxes where each button is linked to one of the textblocks. When the mouse is over the button I want the corresponding textblock to fade in (and out on mouse leave). There are plenty of examples of this showing a single button and textblock where you can simply bind a datatrigger to the button name in the textblock style.
Here's what I've got so far (all of this is in a textblock style):
<DataTrigger Binding="{Binding ElementName=UpdateButton, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty ="Opacity" Duration="00:00:01">
<DoubleAnimation From="0" To="1" Duration="00:00:01"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetProperty ="Opacity" Duration="00:00:01">
<DoubleAnimation From="1" To="0" Duration="00:00:01"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
As of right now, when I mouse over the Update Button, all of the textblocks show instead of just the one associated with the Update Button.
To fix this I could create styles for each textblock by their name and bind to the appropriate button, but this is a huge amount of repetition. I could likely used "BasedOn" to separate the button binding, but then we're still duplicating all of the code for the Storyboards and whatnot. But does anyone know a better way?
It would seem like there should be a way create this all in a single style using a single generic binding but link the specific buttons to their textblocks, so the button only triggers the Storyboard for it's linked textblock. Anyone know how to do this, or a better way?
A good way to handle this is to create a custom inherited TextBlock that can store reference to a button.
Example
using System.Windows;
using System.Windows.Controls;
//Custom TextBlock
public class SpecialTextBlock : TextBlock
{
//This will be the button reference
public Button BoundButton { get; set; }
//Register the BoundButton as a dependency to allow binding
public static readonly DependencyProperty ButtonProperty = DependencyProperty.Register
(
"BoundButton",
typeof(Button),
typeof(SpecialTextBlock),
new FrameworkPropertyMetadata(default(Button))
);
}
Now that your new SpecialTextBlock is set up, you can create a new style for it. Use your original style, but apply it to TargetType="local:SpecialTextBlock" instead of TargetType="TextBlock".
Then update your DataTrigger from your example within the style so that the trigger binds to itself (the SpecialTextBlock), and then looks at the referenced Button path.
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=BoundButton.IsMouseOver}" Value="True">
...
Now you are set up and can create your TextBlocks like so without having to restyle.
//Set your BoundButton binding to specify which button triggers the animation.
<local:SpecialTextBlock BoundButton="{Binding ElementName=UpdateButton}" />
<StackPanel>
<Button x:Name="MouseTarget"
Content="Mouse Over This"
/>
<Button Content="This one changes...">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MouseTarget, Path=IsMouseOver}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
I wish to attach a time delay to a mouseover event on a WPF expander I have on my form (xaml supported by VB.NET code behind). This mouseover event essentially triggers the expansion as oppose to clicking - but I'd like a short wait before the content is expanded. So far I have not managed to find anything to solve this via the wider internet.
The current xaml code to enable the trigger is:
<Style x:Key="HoverExpander" TargetType="{x:Type Expander}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="IsExpanded" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
This style is then applied to:
<Expander Style="{StaticResource HoverExpander}"
HorizontalAlignment="Right"
ExpandDirection="Left"
Height="Auto"
Width="Auto">
<!-- Content here -->
</Expander>
Note that I've stripped out other aesthetics (such as borders, gridrefs etc for readability).
I think there should be some way to set a delay on the MouseOver Trigger but haven't had much luck finding it. This could either be set in xaml or perhaps as an event in the code behind.
I'm working on this currently, so when I find a solution I shall post it here. Grateful for any ideas meantime. Thanks!
Use an EventTrigger on the MouseOver event and a Storyboard with a BooleanAnimationUsingKeyFrames instead. In the Timeline of the Storyboard, you could have KeyFrames, so that the animation waits for some time before it affects the properties you want to change.
This was the code I settled on - based on the ideas already given:
<Style x:Key="HoverExpander" TargetType="{x:Type Expander}">
<Style.Setters>
<Setter Property="IsExpanded" Value="False"/><!-- Initially collapsed -->
</Style.Setters>
<Style.Triggers>
<!-- Impose a short delay (500ms) before expanding control -->
<EventTrigger RoutedEvent="Expander.MouseEnter">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetProperty="IsExpanded"
Duration="0:0:0.5">
<DiscreteBooleanKeyFrame Value="True" KeyTime="100%"/><!-- I.E. after 500ms -->
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- Collapse when mouse leaves control-->
<EventTrigger RoutedEvent="Expander.MouseLeave">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetProperty="IsExpanded"
Duration="0:0:0.1">
<DiscreteBooleanKeyFrame Value="False" KeyTime="0%"/><!-- I.E. Immediately -->
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
Then apply as before. This was tested and works in .NET 4.0. Other neat tricks could be applied if you do so wish, I found the following to be quite helpful in getting ideas:
Animation Overview (MSDN)
Storyboards Overview (MSDN)
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Select ListBoxItem if TextBox in ItemTemplate gets focus
I have a ListView bound to an ObservableCollection (Listview.ItemsSource). The listview presents several textboxes that are bound to properties of the objects in the observable collection.
I would like to have the following functionality: when a user focusses a textbox the corresponding item in the listview should get selected.
I have tried things with ContainerFromElement, ContainerFromItem, etc. but can't get this "simple" functionality to work.
Any ideas...
The trick here is to use the IsKeyboardFocusWithin property on the ItemContainerStyle:
<ListView ItemsSource="{Binding}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=YourPropertyValue}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In this example we are simply stating that IsSelected should be set to true whenever a control within that item contains the keyboard focus.
Note: this does not work in the opposite direction; selecting a particular item in the list will not automatically give focus to the contained TextBox
Edit in response to comments
As Joep pointed out, this will mean that losing keyboard focus (which will happen when a control besides the TextBox gains focus) will cause the IsSelected property to be reset to false. You can work around this by replacing the Style setter with an trigger enter action, which prevents the change from being undone when the trigger is no longer valid.
For this to work in the same way as the previous example you will need to explicitly set the SelectionMode for the ListView to Single; otherwise, multiple items can become selected at once.
<ListView ItemsSource="{Binding}" SelectionMode="Single">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetProperty="IsSelected">
<DiscreteBooleanKeyFrame KeyTime="0:0:0"
Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<!-- ... -->
</ListView>
The MVVM way would add extra properties to the ViewModel representing the properties that are focussed.
E.g., if the ViewModel has a property Name add a property IsNameFocussed, if it has a property Address, add a property IsAddressFocussed.
Then bind the appropriate control in the DataTemplate to the Is...Focussed property to highlight it.
All that is left is setting the Is...Focussed property in the GotFocus and LostFocus events of the textboxes. (I'd rather bind to a Focussed Property but it's not there...)
I am trying to animate 'Style' property using ObjectAnimationUsingKeyFrames. When I run the sample below, I just see empty window and there are no any exceptions.
Almost the same sample works in Silverlight. In WPF it works too, if I assign 'Style' property of the control directly. Does anyone know if it is possible to animate 'Style' property in WPF?
Many thanks.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:this="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525"
>
<Window.Resources>
<ResourceDictionary>
<Style x:Key="TestStyle" TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Canvas x:Name="Rectangle">
<Rectangle Width="200" Height="150" Fill="Red"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Target" Storyboard.TargetProperty="Style" >
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{StaticResource ResourceKey=TestStyle}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Canvas.Children>
<ContentControl x:Name="Target"/>
</Canvas.Children>
</Canvas>
When ObjectAnimationUsingKeyFrames tries to animate to a value that is derived from DependencyObject, it attempts to freeze the object first. If the object can't be frozen, it throws an exception and the animation does not run.
If you are animating a value of a custom type that you wrote, it appears you need to either derive from Freezable or NOT derive from DependencyObject.
For properties that already exist that derive from DependencyObject and not Freezable, you can't animate them (StyleProperty or TemplateProperty are cases in point). Try using a property setter inside of a style:
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Template" Value="{StaticResource TestTemplate}"/>
</Trigger>
</Style.Triggers>
Build all of the transition logic into the style instead of switching between different styles. A challenge that you may have with this is that the target property has to be a dependency property so you can't use IsLoaded.
I hope you find this useful.
One final thought: It is possible to define custom animations, although I have not done this myself. There's an outside chance that you could write your own custom "ObjectAnimation" that would not be restricted to Freezable or non-DependencyObject classes.
I have following problem.
I created Style for ContentControl that enables moving/dragging of specific item.
This is created with help of MoveControl (: Control) that controls mouse down/move/up events. In this class DependencyProperty IsDragging property is defined, that i want to use to fade in/out item when it changes state.
Xaml file for my syle looks something like this.
<Style x:Key="ItemStyle" TargetType="ContentControl">
<!-- ... -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl" x:Name="ctrl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}">
<s:MoveControl Cursor="SizeAll" Template="{StaticResource MoveThumbTemplate}" x:Name="moveThumb"/>
</Grid>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
<!-- ... -->
</Setter>
</Style>
So, i want to create animation that will be done on the ContentControl styled with ItemStyle when MoveControl.IsDragging will be set to true/false.
Thank you for help.
I figured out.
The solution was to use SourceName property and link it to object of which dependency property is used. The problem was that by default 'this' object references element's DataContext value.
If you set SourceName property to a non-null value, then the data binding operation will treat that value as the place where data is pushed to and pulled from
<ControlTemplate.Triggers>
<Trigger SourceName="moveThumb" Property="IsDragging" Value="true" >
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="1.0" To="0.3" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>