CODEWITHSUNDEEP
uwpuwp-xaml
novice_coder
novice_coder

Reputation: 159

How to change storyboard animation when user toggles a switch on the UI for UWP Apps?

I am working on a UWP App where I have 2 images and a toggle switch. When the toggle switch is in the default(off state), I would want one image to show and when the user toggles the switch, I want the second image to show. My understanding is that I should be using a grid with 2 images stacked one upon the other and based on the toggle switch position, I should use storyboarding and move the images. Is there a better way to do this example using visual states property of storyboard? Can I use the VisualManager of storyboards to animate the same property i.e transition of the 2 images in my UI?I would learn to learn better ways to achieve this animation using MVVM and Prism.

Upvotes: 0

Views: 203

Answers (1)

YanGu
YanGu

Reputation: 3032

If you want to switch pictures when the status of the ToggleSwitch control changes by using the visual states property of storyboard, you can add two visual states to change the Opacity of Image control in the Grid, for example:

<Grid x:Name="grid">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="state1">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

            <VisualState x:Name="state2">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>

            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    
    <Image Grid.Row="0" x:Name="image1" Source="Assets/11.png" Opacity="100"/>
    <Image Grid.Row="0" x:Name="image2" Source="Assets/22.png" Opacity="0"/>

    <ToggleSwitch x:Name="toggleSwitch" IsOn="False" Grid.Row="1" Toggled="toggleSwitch_Toggled">
        
    </ToggleSwitch>
</Grid>

Call the VisualStateManager.GoToState() to switch the state when the status of ToggleSwitch control changes, like this:

private void toggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    if(toggleSwitch.IsOn==true)
    {
        VisualStateManager.GoToState(this, "state1", false);
    }
    else
    {
        VisualStateManager.GoToState(this, "state2", false);
    }
}

Upvotes: 1

Related Questions