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>

Answer 1

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.