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
