Button click changes visibility of a DataGrid with a Trigger in WPF - wpf

Hi i am trying to find some way to when a button is clicked changes the visibility of other control, like a DataGrid with a Trigger in XAML.
The button only changes the visibility of the DataGrid to Visible, it does other things in Code Behind, but this is something that i think that can be done in a Style with a Trigger.
I tried to find a solution and it seems to be possible to do but i can't understand how.
Thanks in advance.

<Button Content="Button!">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.Target="{x:Reference dataGrid}"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
{x:Reference dataGrid} references a DataGrid with the name dataGrid, alternatively you could just use Storyboard.TargetName. You would normally use the Storyboard.Target property if you do binding or references to resources.

Just a suggestion, but how about, for something more understandable, having a Checkbox enabling/disabling the DataGrid display? This is what I usually do:
<DockPanel LastChildFill="True">
<CheckBox DockPanel.Dock="Right" VerticalAlignment="Center" x:Name="DisplayBox"
Content="Display grid" Margin="4" IsChecked="False"/>
<DataGrid Visibility="{Binding ElementName=DisplayBox, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}" />
</DockPanel>
And of course, you'll have to implement the appropriate converter

Related

WPF: Show and persist ToolTip for a Textbox based on the cursor

The purpose of this tooltip is to show, the format of the string which must be entered.
The features I would like to achieve are:
The tooltip should be shown when the user places the cursor in the textbox, i.e. when the user tabs into the control.
The tooltip should update based on user input into the textbox (this can be achieved by binding).
The tooltip must persist until the user tabs out of the control.
I wanted to know if the standard tooltip as provided has configuration settings, properties, that can be used to achieve this,... in my research thus far I haven't found any. If the existing tooltip is not up to the task, which is very likely, I'd like some pointers, sample code to achieve this...
Thanks
Hasanain
Using a combination of event triggers, bindings, and minimal code-behind I managed to implement a behavior which would update the ToolTip while the user types into textbox; when the keyboard focus is lost the tooltip disappears.
Here is the xaml for the textbox:
<TextBox Grid.Column="0" x:Name="txtBxQckTkt" Margin="5,5,0,0" Width="250" ToolTipService.IsEnabled="True"
Text="{Binding QuickTicketText}">
<TextBox.Triggers>
<EventTrigger RoutedEvent="TextBox.GotKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="txtBxQckTktToolTip"
Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="False"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.0001" Value="True" />
</BooleanAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txtBxQckTktToolTip"
Storyboard.TargetProperty="Placement">
<DiscreteObjectKeyFrame Value="{x:Static PlacementMode.Bottom}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="TextBox.LostKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="txtBxQckTktToolTip"
Storyboard.TargetProperty="IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.0001" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBox.Triggers>
<TextBox.ToolTip>
<ToolTip x:Name="txtBxQckTktToolTip" Placement="Bottom" Content="{Binding ToolTip}">
</ToolTip>
</TextBox.ToolTip>
</TextBox>
Here is the code-behind:
txtBxQckTktToolTip.PlacementTarget = txtBxQckTkt;
_handler = (s, e) =>
{
var viewModel = DataContext as SingleTradeEntryViewModel;
if (viewModel == null) return;
viewModel.OnKeyup.Execute(txtBxQckTkt.Text);
};
txtBxQckTkt.KeyUp -= _handler;
txtBxQckTkt.KeyUp += _handler;
When the command (OnKeyup) executes, it raises a change notification for the ToolTip property bound as seen in the xaml.
Thanks
Hasanain
You might have to implement your own using the Popup Control. Here is some sample XAML to get you started:
<Button Width="120" Height="30" Name="btn">
<Popup IsOpen="True" StaysOpen="True" PlacementTarget="{Binding ElementName=btn}" Placement="Bottom">
<Button Width="120" Height="30" Content="Button In ToolTip"/>
</Popup>
</Button>
And here is some example code to get you started:
http://social.msdn.microsoft.com/forums/en-US/wpf/thread/845ffad0-4abf-4830-b206-03f7fe53f74b
2. ToolTip="{Binding Text, ElementName=textBox1, UpdateSourceTrigger=PropertyChanged}"
Here textBox1 is your textbox name and I have changed UpdateSourceTrigger to PropertyChanged so it updates your tooltip as you type.
3. ToolTipService.ShowDuration="12000"
Give this property a random time which is long enough to suit your needs.
I don't fully understand your first point but I think you need the tooltip to show in your gotfocus eventhandler. This can be achieved by something like in the gotfocus event.
ToolTip toolTip = ToolTipService.GetToolTip(textBox1) as ToolTip;
toolTip.IsOpen = true;
You could create a trigger that sets the ToolTip based on if the control has focus or not

Animating text color

I need to animate the text color of a custom control between two colors, which are read from two Brush properties of the custom control. My resources look like this:
<SolidColorBrush x:Key="TextBrush">{TemplateBinding Foreground}</SolidColorBrush>
<SolidColorBrush x:Key="AltTextBrush">{TemplateBinding ForegroundAlt}</SolidColorBrush>
Right now, I am trying to animate using a ColorAnimation:
<ColorAnimation Storyboard.TargetName="MyControlText" Storyboard.TargetProperty="Foreground" To="{StaticResource AltTextBrush}" Duration="00:00:00.3000000" />
The ColorAnimation seems to want a Color object, rather than the Brush I am trying to pass. I think I can write an IValueConverter to get the color from the brush, but before I do that, I want to see if there is a simpler way to do the job. Here are my questions:
-- Is there a simple way to animate between two brush resources, or do I need to extract the color for animation?
-- If I need to extract the colors, is an IValueConverter best practice?
-- And finally, amI headed down the right road, or is there a simpler solution to this problem?
Thanks for your help.
Tried with using a Binding and it seems to be working like this
To="{Binding Source={StaticResource TextBrush}, Path=Color}"
Here's a xaml example
<Window.Resources>
<SolidColorBrush x:Key="TextBrush">Black</SolidColorBrush>
<Storyboard x:Key="blinkAnimation" Duration="0:0:5" >
<ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="TitleTextBlock"
To="{Binding Source={StaticResource TextBrush}, Path=Color}"
AutoReverse="True"
Duration="0:0:2"/>
</Storyboard>
</Window.Resources>
<Grid Background="Black" Name="grid">
<TextBlock x:Name="TitleTextBlock"
Background="Black"
Text="My Text"
FontSize="32"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Foreground="White">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<StaticResource ResourceKey="blinkAnimation"/>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>

WPF: Animating a StaticResource updates other controls that use that resource

I have two TextBoxes that use the same StaticResource for their foreground colour.
When I apply an animation that changes the colour of the first TextBox, the colour on the second TextBox is also changed.
This does not happen if I don't use a StaticResource, so I am guessing that the animation is changing the colour of the brush defined in the resource, rather than the foreground colour on the first TextBox.
Here is the code I am using;
<Page.Resources>
<SolidColorBrush x:Key="TextBrush"
Color="Black" />
<Storyboard x:Key="Glow"
TargetProperty="Foreground.Color"
Storyboard.TargetName="txt1">
<ColorAnimation To="Blue"
Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="Normal"
TargetProperty="Foreground.Color"
Storyboard.TargetName="txt1">
<ColorAnimation To="Yellow"
Duration="0:0:0.1" />
</Storyboard>
</Page.Resources>
<StackPanel>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource Glow}" />
</EventTrigger>
<EventTrigger RoutedEvent="StackPanel.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource Normal}" />
</EventTrigger>
</StackPanel.Triggers>
<TextBlock Name="txt1"
Foreground="{StaticResource TextBrush}">Text One</TextBlock>
<TextBlock Name="txt2"
Foreground="{StaticResource TextBrush}">Text Two</TextBlock>
</StackPanel>
Is there anyway around this?
Matt
By using a single StaticResource in the binding, changing the Foreground in your animation will change the resource itself. This behavior is by design, as anything else would require full copies of resources, which would very much reduce the usefulness and benefits of using StaticResource in the first place.
The easy workaround, of course, is to not use a StaticResource here, or to use a separate resource per TextBox.

WPF - Animation to make an error message disappear

I have the following xaml in my window:
<Border Height="100" BorderBrush="Black" BorderThickness="2" CornerRadius="10" Background="PaleVioletRed" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Margin="10" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="17" FontWeight="Bold">Error Message Here</TextBlock>
</Border>
Which basically displays this:
alt text http://xs.to/thumb-4CB2_4B69F8E6.jpg
I plan to bind it's Visibility to an error state variable so it shows when an error occurs.
But I don't want to show it for a long time. I would like it to disappear/fade after 2 seconds. Is there a way to do this via XAML? Or a nice WPF way?
Something like this psudo code logic:
when (ErrorMessage.Visibility == Visible )
{
Wait(2000); // Wait 2 seconds
ErrorMessage.Visibility == Collapsed;
}
but preferable done with XAML.
My instincts tell me there is a way to do this with an animation, but I am not an animation expert and could use some help.
The other option is to try and setup a timer and control it with that.
use something like this....
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard BeginTime="0:0:1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
change the routed event to match your needs, set the BeginTime on the storyboard to 2 mins ( or whatever ), set the targetname to your border element.

Animate WPF Datatemplate when item added to Listbox?

In my project I have a WPF Listbox bound to an ObservableCollection. Every time I add a new item to the Collection the same item is added to the Listbox automaticly.
To display the items in the Listbox I use a XAML Datatemplate.
What I want to do is animate an item once when it is added to the Collection/Listbox.
Can this be done?
As animation in the datatemplate maybe? I guess I need a trigger somehow to start this animate but what trigger is fired when a new item/datatemplate is added?
I think an event trigger for the FrameworkElement.Loaded routed event could work. For example:
<DataTemplate DataType="{x:Type l:Foo}">
<Button x:Name="Button" Content="{Binding Path=Bar}">
<Button.Background>
<SolidColorBrush x:Name="ButtonBrush" Color="Tan" />
</Button.Background>
</Button>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="Button">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="ButtonBrush" Storyboard.TargetProperty="Color" To="Red" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Resources