locked
Question about XAML RRS feed

  • 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

    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