<UserControl
    x:Class="AmbientSounds.Controls.Screensaver"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:AmbientSounds.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    d:DesignHeight="300"
    d:DesignWidth="400"
    Loaded="{x:Bind ViewModel.LoadAsync}"
    Unloaded="{x:Bind ViewModel.Unload}"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style x:Key="ScreensaverImage" TargetType="Image" />
        <Storyboard x:Name="ImageSb1">
            <DoubleAnimation
                Storyboard.TargetName="image"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                To="-100"
                Duration="00:00:35" />
        </Storyboard>
        <Storyboard x:Name="ImageSb2">
            <DoubleAnimation
                Storyboard.TargetName="image2"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                To="-100"
                Duration="00:00:35" />
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <muxc:ProgressRing
            Width="40"
            Height="40"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
            IsActive="True"
            Visibility="{x:Bind ViewModel.Loading, Mode=OneWay}">
            <animations:Implicit.ShowAnimations>
                <animations:OpacityAnimation
                    From="0"
                    To="1.0"
                    Duration="0:0:1" />
            </animations:Implicit.ShowAnimations>
            <animations:Implicit.HideAnimations>
                <animations:OpacityAnimation
                    From="1.0"
                    To="0"
                    Duration="0:0:1" />
            </animations:Implicit.HideAnimations>
        </muxc:ProgressRing>

        <Canvas>
            <Image
                x:Name="image"
                d:Source="ms-appx:///Assets/Images/wind.png"
                Style="{StaticResource ScreensaverImage}"
                Visibility="{x:Bind ViewModel.ImageVisible1, Mode=OneWay}">
                <Image.RenderTransform>
                    <CompositeTransform />
                </Image.RenderTransform>
                <Image.Source>
                    <BitmapImage UriSource="{x:Bind ViewModel.ImageSource1, Mode=OneWay}" />
                </Image.Source>
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1.0"
                        Duration="0:0:3" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1.0"
                        To="0"
                        Duration="0:0:3" />
                </animations:Implicit.HideAnimations>
            </Image>
            <Image
                x:Name="image2"
                d:Source="ms-appx:///Assets/Images/beach.png"
                Style="{StaticResource ScreensaverImage}"
                Visibility="{x:Bind ViewModel.ImageVisible2, Mode=OneWay}">
                <Image.RenderTransform>
                    <CompositeTransform />
                </Image.RenderTransform>

                <Image.Source>
                    <BitmapImage UriSource="{x:Bind ViewModel.ImageSource2, Mode=OneWay}" />
                </Image.Source>
                <animations:Implicit.ShowAnimations>
                    <animations:OpacityAnimation
                        From="0"
                        To="1.0"
                        Duration="0:0:3" />
                </animations:Implicit.ShowAnimations>
                <animations:Implicit.HideAnimations>
                    <animations:OpacityAnimation
                        From="1.0"
                        To="0"
                        Duration="0:0:3" />
                </animations:Implicit.HideAnimations>
            </Image>
        </Canvas>
    </Grid>
</UserControl>
