Asked by:
Question about XAML

Question
-
Hello all
I have a question about XAML. I looked at a lot of examples trying to figure something out without any success... What I am trying to achieve is this: I created a style for some buttons I will be using. I would like those buttons to fade into view when I set their property to Visible, and fade out when I set the property to Collapsed. Everything works perfectly for the Fade In but not at all for the Fade Out. Could somebody point me in the right direction please?
Here is the XAML code:
<Style x:Key = "RegularBtnWithFadeStyle" TargetType = "{x:Type Button}"> <Setter Property = "BorderBrush" Value = "White"/> <Setter Property = "BorderThickness" Value = "2"/> <Setter Property = "Margin" Value = "0, 1, 0, 1"/> <Setter Property = "IsCancel" Value = "False"/> <Setter Property = "Visibility" Value = "Collapsed" /> <Setter Property = "Template"> <Setter.Value> <ControlTemplate TargetType = "Button"> <Grid Width = "{TemplateBinding Width}" Height = "{TemplateBinding Height}" ClipToBounds = "True"> <Rectangle x:Name = "outerRectangle" HorizontalAlignment = "Stretch" VerticalAlignment = "Stretch" Stroke = "{StaticResource SS_BtnForegroundColorWhenIdle}" RadiusX = "5" RadiusY = "5" StrokeThickness = "1" Fill = "{StaticResource SS_BtnBackgroundColorWhenIdle}"/> <DockPanel Name = "myContentPresenterDockPanel"> <ContentPresenter x:Name = "myContentPresenter" Content = "{TemplateBinding Content}" HorizontalAlignment = "Center" VerticalAlignment = "Center" TextBlock.FontFamily = "Segoe UI" TextBlock.FontWeight = "SemiBold" TextBlock.Foreground = "{StaticResource SS_BtnForegroundColorWhenIdle}" Margin = "{TemplateBinding Padding}"/> </DockPanel> </Grid> <ControlTemplate.Triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter TargetName = "outerRectangle" Property = "Fill" Value = "{StaticResource SS_BtnBackgroundColorWhenMouseOver}"/> <Setter Property = "TextBlock.Foreground" TargetName = "myContentPresenter" Value = "{StaticResource SS_BtnForegroundColorWhenMouseOver}"/> </Trigger> <Trigger Property = "IsPressed" Value = "True"> <Setter TargetName = "outerRectangle" Property = "Fill" Value = "{StaticResource SS_BtnBackgroundColorWhenPressed}"/> <Setter Property = "TextBlock.Foreground" TargetName = "myContentPresenter" Value = "{StaticResource SS_BtnForegroundColorWhenPressed}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Resources> <Storyboard x:Key = "FadeIn"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.Opacity)" Storyboard.TargetName = "{x:Null}" BeginTime = "0:0:0"> <EasingDoubleKeyFrame KeyTime = "0:0:0" Value = "0"/> <EasingDoubleKeyFrame KeyTime = "0:0:0.5" Value = "0"/> <EasingDoubleKeyFrame KeyTime = "0:0:1" Value = "1"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.Visibility)" Storyboard.TargetName = "{x:Null}" BeginTime = "0:0:0"> <DiscreteObjectKeyFrame KeyTime = "0:0:0.0" Value = "{x:Static Visibility.Visible}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key = "FadeOut"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.Opacity)" Storyboard.TargetName = "{x:Null}" BeginTime = "0:0:0"> <EasingDoubleKeyFrame KeyTime = "0:0:0" Value = "1"/> <EasingDoubleKeyFrame KeyTime = "0:0:0.5" Value = "1"/> <EasingDoubleKeyFrame KeyTime = "0:0:3" Value = "0"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty = "(UIElement.Visibility)" Storyboard.TargetName = "{x:Null}" BeginTime = "0:0:0"> <DiscreteObjectKeyFrame KeyTime = "0:0:3" Value = "{x:Static Visibility.Collapsed}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </Style.Resources> <Style.Triggers> <Trigger Property = "IsVisible" Value = "True"> <Trigger.EnterActions> <BeginStoryboard Storyboard = "{StaticResource FadeIn}"/> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard = "{StaticResource FadeOut}"/> </Trigger.ExitActions> </Trigger> </Style.Triggers> </Style>
I have set the duration of the fade to 3 seconds just for now, in order to really see the animation. Here is the code for the button itself:
<Button x:Name = "EnglishLanguageBtn" Click = "EnglishLanguageBtn_Click" Content = "English" FontFamily = "Segoe UI" FontSize = "16" FontWeight = "Semibold" Grid.Column = "0" Grid.Row = "1" Height = "30" HorizontalAlignment = "Left" IsCancel = "False" IsTabStop = "False" Margin = "435, 185, 0, 0" Padding = "0, 0, 0, 3" Style = "{DynamicResource RegularBtnWithFadeStyle}" VerticalAlignment = "Top" Visibility = "Collapsed" Width = "105"/>
Like I said at the beginning of the post, I was thinking of simply calling Visible or Collapsed to start the animation. What am I missing?
Many thanks
Rick
- Moved by Jack J JunMicrosoft contingent staff Tuesday, June 23, 2020 6:21 AM
Tuesday, June 23, 2020 1:38 AM
All replies
-
Hi RickHille,
Thank you for posting here.
I'm not sure whether your project is WPF or UWP, but no matter what kind of project, you can get more professional help in Microsoft Q&A.
The Visual C# forum discusses and asks questions about the C# programming language, IDE, libraries, samples, and tools.
Best Regards,
Timon
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.Tuesday, June 23, 2020 6:18 AM