UWP community fade animation not changing the opacity at all

Question

await VolumeRing.Fade(value: 1f, duration: 20, delay: 0).StartAsync();

My problem is very simple. I am using UWP community toolkit to animate the fade animation of a xaml element but I've even checked with breakpoints; the above code does bring its opacity from 0 to 1, instead opacity remains at 0 (which is the default I've set for the element).

Update

public CompactNowPlayingPage()
{
    InitializeComponent();
    ElementCompositionPreview.GetElementVisual(VolumeRing).Opacity = 0;           

}
private async void VolumeFadeIn()
{
    await VolumeRing.Fade(value: 1f, duration: 20, delay: 0).StartAsync();
}
private async void VolumeFadeOut()
{
    await VolumeRing.Fade(value: 0f, duration: 1500, delay: 3000).StartAsync();
}

//invoked by KeyboardShortCuts
private void ChangeVolume(bool increase)
{
    if (IsControlPressed)
    {
        VolumeFadeIn();
        if (increase&&Media.Volume<100)
            Media.Volume += 5;
        else if(!increase&&Media.Volume>0)
            Media.Volume -= 5;
        VolumeRing.Value = Media.Volume;
        VolumeFadeOut();
    }
}

XAML

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <vlc:MediaElement AreTransportControlsEnabled="True"
                          Name="Media"                     
                          HardwareAcceleration="True"
                          AutoPlay="True">
        </vlc:MediaElement>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,32,0,0">
            <notification:SfProgressBar Name="VolumeRing"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Top"
                                        Margin="0,16,48,0"
                                        FontSize="24"
                                        Width="Auto"
                                        Value="{x:Bind Media.Volume, Mode=OneWay}"
                                        Height="Auto"
                                        FillColor="{ThemeResource SystemAccentColor}"
                                        BackRimStrokeThickness="12"
                                        StrokeThickness="12"
                                        ProgressType="SolidCircular"
                                        >
                <notification:SfProgressBar.Foreground>
                    <SolidColorBrush Color="WhiteSmoke" Opacity="0.7"/>
                </notification:SfProgressBar.Foreground>
            </notification:SfProgressBar>
        </Grid>
    </Grid>

Justin XL · Accepted Answer · 2017-06-13T20:38:02.720

3

Looks like by default the Toolkit is using the Visual.Opacity for the Fade animation, and if you are setting the Opacity to 0 in your xaml code, it's not going to work as the Visual.Opacity is not in sync with UIElement.Opacity.

So you can either remove the Opacity="0" xaml code and then set the Opacity of your VolumeRing's Visual to 0 in your constructor, like this -

ElementCompositionPreview.GetElementVisual(VolumeRing).Opacity = 0;

Or, keep the Opacity="0" xaml code but set AnimationSet.UseComposition to false before calling the Fade method -

AnimationSet.UseComposition = false;

Update

OK, just had a look at the source code and I was wrong, the Toolkit is not using Composition API by default. Kind of surprising but anyway... You should remove the Visual.Opacity setting in your constructor and put back the Opacity setting in your xaml code.

By the way you are calling them, I guess you want to wait for the element to show first and then hide it. So you will need to change the hide and show methods from async void to async Task.

edited Jun 13 '17 at 20:38

answered Jun 13 '17 at 12:10

Justin XL

38,763
7
88
133

your 1st option works fine but only for the first time, as soon as I fadeout the VolumeRing and again its opacity is faded out to 0, so next time I try again to fade in, then it wont work – Muhammad Touseef Jun 13 '17 at 19:45
@touseef option 2? I'd also like to see how exactly you fade in and out... – Justin XL Jun 13 '17 at 19:48
option 2 doesn't work at all. and see the update for more details :) – Muhammad Touseef Jun 13 '17 at 20:06
Please see the update version of question now. I accidently updated your answer before, so dont approve that :P – Muhammad Touseef Jun 13 '17 at 20:12
No worries. Just to confirm, you removed the `Opacity` setting in xaml right? – Justin XL Jun 13 '17 at 20:13
Yes I have not set any Opacity property on VolumeRing in the xaml – Muhammad Touseef Jun 13 '17 at 20:16
I have updated the question now to add the xaml code as well – Muhammad Touseef Jun 13 '17 at 20:21
ok and then I should await these 2 methods while calling right? when I do that , then I would need to make method ChangeVolume "async" as well right? so changeVolume would be fine with "async void"? – Muhammad Touseef Jun 13 '17 at 20:31
It depends on if you want your animation to finish before conituning to the next one. – Justin XL Jun 13 '17 at 20:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146573/discussion-between-justin-xl-and-touseef). – Justin XL Jun 13 '17 at 20:38

UWP community fade animation not changing the opacity at all

Update

1 Answers1

Update