We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to enable / disable animated selection behavior in SfAccordion control?

Platform: UWP |
Control: SfAccordion
Tags: general, uwp

SfAccordion is a Control that organizes its contents in a form of Expand / Collapsible sections. It provides animation selection behavior when its item is expanded/collapsed and this can be achieved by customizing its ItemContainerStyle.

 

The following Code sample demonstrates the same.

 

Xaml

<!-- accordion Style-->
<!-- to Disable animation-->
<VisualState x:Name="Collapsed">                                      
     <Storyboard>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:01" EnableDependentAnimation="True" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
        <SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:0.0" Value="0" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
     <Storyboard>
         <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:01" EnableDependentAnimation="True" Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
          <SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:0.0" Value="1" />
          </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
 
<!—accordion1 Style-->
<!-- Enable animation-->
 
<VisualState x:Name="Collapsed">
   <Storyboard>                                         
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Duration="00:00:10" EnableDependentAnimation="True" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
       <SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:10.0" Value="0" />
     </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </VisualState>
<VisualState x:Name="Expanded">
  <Storyboard>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:01" Duration="00:00:10" EnableDependentAnimation="True" Storyboard.TargetName="ExpandSite” Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
       <SplineDoubleKeyFrame KeySpline="0.2,0,0,1" KeyTime="00:00:10.0" Value="1" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
 </VisualState>
</VisualStateGroup>
 
<!--to set the ItemContainerStyle for SfAccordion-->
 
<!--SfAccordion Disable Animation -->
<navigation:SfAccordion x:Name="accordion"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" ItemContainerStyle="{StaticResource Style1}" Height="210">
<!--SfAccordion  Animation -->
<navigation:SfAccordion x:Name="accordion1"  HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" ItemContainerStyle="{StaticResource Style2}" Height="210">        

 

Screenshot

 

SfAccordion Animation.

Figure 1: SfAccordion Animation.

 

Sample Links

 

C#: SfAccordionAnimation

VB: SfAccordionAnimation

 

 

 

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile