I have a Grid which should be collapsed by default it is in A xaml file.
Another Button in Grid in another xaml file.When clcik button Grid should be enabled.
How to achieve this I have Tried this can you please help
<Grid Visibility={Binding Visibilityproperty}/>
<Button Content="A" Command={Binding VisibilityCommand"}/>
In button command i have written the logic to enable the visibilityproperty to visible
But grid is not at all visible if i do like this
Better solution in MVVM pattern is welcomed
<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>
{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.
Related
We have a UserControl that mainly includes a XamTileManager (the actual control shouldn't matter) which is bound to a list of items. When the binding changes, we want to animate the transition between the old and new data with an arbitrary animation. Is that generally possible in WPF?
The alternative would of course be to have two UserControls and animate the change between them, but we want to avoid that if possible.
You can put a trigger inside the item with a storyboard. When the data changes the trigger will fire and launch the storyboard animation. I found this example which does it for a data binded textblock:
<TextBlock x:Name="tbMessage" Text="{Binding Path=StatusBarText, NotifyOnTargetUpdated=True}">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0" To="1.0" />
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="1.0" To="0.0" BeginTime="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
(source)
If that isnt quite what you want you can write your own animation by using the Binding.TargetUpdated event.
I am building some WPF controls using .Net 4.0. One of these controls, called LoadingPane, is a custom control derived from ContentControl.
The only job of this LoadingPane control is to show a semi-transparent layer over it's contained content when it's IsLoading property is set to true.
I use some animations to do fade-in, fade-out when the IsLoading value changes.
When the overlay is shown an animation rotates a circle of elipses.
So far, so good. This all works very nicely. But here's my problem: when i set the Loading property to true the animation isn't shown directly. It takes about half a second. In this time the fade-in animation has already run, so the opacity effectively goes from 0 to 1 in one step.
Here's my animation code:
<ControlTemplate.Triggers>
<Trigger Property="IsLoading"
Value="True">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="EndAnimateLoadingCanvas" />
<BeginStoryboard Name="AnimateLoadingCanvas">
<Storyboard FillBehavior="Stop">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:02"
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
From="360"
To="0"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="AnimateLoadingCanvas" />
<BeginStoryboard Name="EndAnimateLoadingCanvas">
<Storyboard FillBehavior="Stop">
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Opacity"
To="0" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
The strange thing is, when i use this control in a test window and i click the Loading checkbox repeatedly (and before the animation has finished) then the fade-in/fade-out animation does work as i expect it to work.
Can anyone help? Thanx in advance!
It's hard to see exactly what the problem is without seeing the rest of the code but my guess is that it has to do with the start values of the animated properties.
I implemented a custom control in WPF with a rectangle inside a viewbox and used the triggers + storyboards from the question to see the effect. Indeed, my first attempt did not fade in nor fade out.
What I did to solve it was by specifying From values in the animations so that they work regardless of what the original value of the DP's were:
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
Notice From="0" in the above animation. The end storyboard was modified the same way, to go from 1 to 0.
For completeness I set the opacity to 0 on the definition of the viewbox element inside the ControlTemplate as well.
Here is the complete source code for the relevant parts. The control is a standard WPF custom control inheriting from Control. It has a single dependency property called IsLoading (bool) which defaults to false:
public bool IsLoading
{
get { return (bool)GetValue(IsLoadingProperty); }
set { SetValue(IsLoadingProperty, value); }
}
// Using a DependencyProperty as the backing store for IsLoading. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsLoadingProperty =
DependencyProperty.Register("IsLoading", typeof(bool), typeof(LoadingControl), new UIPropertyMetadata(false));
ControlTemplate - Defined in generic.xaml in the style for {x:Type local:LoadingControl}
<ControlTemplate TargetType="{x:Type local:LoadingControl}">
<ControlTemplate.Triggers>
<Trigger Property="IsLoading" Value="True">
<Trigger.EnterActions>
<RemoveStoryboard BeginStoryboardName="EndAnimateLoadingCanvas" />
<BeginStoryboard Name="AnimateLoadingCanvas">
<Storyboard FillBehavior="Stop">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:02"
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
From="360"
To="0"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="AnimateLoadingCanvas" />
<BeginStoryboard Name="EndAnimateLoadingCanvas">
<Storyboard FillBehavior="Stop">
<DoubleAnimation BeginTime="00:00:00"
Duration="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Opacity"
From="1"
To="0" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00.5"
Storyboard.TargetName="MyViewBoxje"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Viewbox x:Name="MyViewBoxje" Opacity="0">
<!-- BG with 0x50 alpha so that it's translucent event at 100% visibility -->
<Grid Width="100" Height="100" Background="#50000000">
<Rectangle Width="70" Height="20" Fill="Green" Stroke="Black" StrokeThickness="2" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<RotateTransform Angle="360" x:Name="AnimatedRotateTransform" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Viewbox>
</Border>
</ControlTemplate>
I used in my main window like so:
<Grid x:Name="LayoutRoot">
<!-- All other stuff here ... -->
<my:LoadingControl IsLoading="{Binding IsLoading}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
And to test it I had a ViewModel with a property IsLoading that is set as DataContext for the main window. And in the constructor of the ViewModel I set IsLoading to true and then start a timer that toggles the value of the property every 5 seconds:
public MainWindowViewModel()
{
IsLoading = true;
DispatcherTimer t = new DispatcherTimer();
t.Interval = TimeSpan.FromSeconds(5);
t.Tick += (s, e) => IsLoading = !IsLoading;
t.Start();
}
I finally figured it out after reading Isak's answer.
Sorry to say that his answer did not help in my case but he got me going in the right direction.
The reason that the first fade-in did not seem to work was because my containing viewbox had it's visibility set to collapsed the whole time the fade-in animation was performed.
This was caused by the ObjectAnimationUsingKeyFrames:
DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
There was no duration specified and the single key frame specified was animated too late.
Adding
Duration="00:00:00"
solved my problem.
Thanks to you all helping!
I have created a HeaderTemplate for my accordions where I want to display a text block on one side of the header and a hyperlink on the right side. The display is working correctly, but the click event is not called when the user clicks, I'm guessing b/c the header itself is trapping the click for expand/contract.
<layoutToolkit:Accordion>
<layoutToolkit:AccordionItem IsSelected="True">
<layoutToolkit:AccordionItem.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="20">
<TextBlock Margin="0,0,700,0">Cancel Postcards</TextBlock>
<HyperlinkButton Content="Next Call" Foreground="Blue" Click="NextCancel_Click" />
</StackPanel>
</DataTemplate>
</layoutToolkit:AccordionItem.HeaderTemplate>
..... more code ....
Is there a way to get the hyperlink to respond to events without practically creating a new control?
Update: It looks like the header sets all child controls to disabled when expanded which is why the link doesnt work. It will work when you collapse that accordionitem. So, the question now is, how do i prevent the hyperlink from being disabled?
Hey Charlie, I just happened to answer this same question for Epic720. You have to change the Locked VisualState.
Interactive items in Silverlight Accordion Header
Here is the LockedStates VisualStateGroup of the AccordionItem which you should alter. I can post the whole style if you need, though it's quite verbose.
<VisualStateGroup x:Name="LockedStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Locked">
<Storyboard>
<!--
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
-->
</Storyboard>
</VisualState>
<VisualState x:Name="Unlocked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
I'm creating a drag and drop behavior, and the goal is to drag an item onto my grid, where a set of adorned elements representing the available actions will be available for the user to drop the element on. My problem is once I add the adorned element(s) to the AdornerLayer, I don't receive any Drag events. I need to get those events to both change UI and set some underlying properties. I've set AllowDrop=true on the AdornerLayer, the adorned element, my button inside the DataTemplate inside the ContentPresenter, and on the ContentPresenter itself, but still don't get any events.
<DataTemplate x:Key="promoMediaTemplate" DataType="{x:Type media:PromoMediaSearchResult}">
<Button Content="{Binding Path=Description}" Name="item" AllowDrop="True" Background="Red" /
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Button.PreviewDragEnter">
<BeginStoryboard x:Name="TextBeginStoryBoard">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="item"
Storyboard.TargetProperty="Background"
Duration="0:0:1.0"
From="Red" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewDragLeave">
<StopStoryboard BeginStoryboardName="TextBeginStoryBoard" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewDrop">
<StopStoryboard BeginStoryboardName="TextBeginStoryBoard" />
</EventTrigger>
</DataTemplate.Triggers>
See this post: http://blogs.telerik.com/StefanDobrev/Posts/08-04-16/WPF_Series_Adorners_Commands_and_Logical_Tree.aspx
I can't capture/trigger OnMouseEnter or OnMouseLeave events through C# code for list items. To be clear, I don't need an OnSelectedItem event.
What I want to do is to be able to handle the OnMouseEnter and OnMouseLeave events for ListBoxItem which will start the DoubleAnimation for that ListBoxItem - I want to enlarge its font on MouseEnter and restore to original size on MouseLeave.
Any ideas? Thanks.
Something like this (as part of the ListBox's DataTemplate):
<DataTemplate.Triggers>
<EventTrigger
SourceName="BorderControl"
RoutedEvent="TextBlock.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderControl"
Storyboard.TargetProperty="Background.Color"
To="DarkRed" Duration="00:00:00.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger
SourceName="BorderControl"
RoutedEvent="TextBlock.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderControl"
Storyboard.TargetProperty="Background.Color"
To="WhiteSmoke" Duration="00:00:00.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
via http://www.dotnet-blog.com/index.php/2009/01/29/how-to-style-and-animate-a-wpf-listbox/