TheXamlGuy/App/WeddingBooth/Views/CameraView.xaml

<UserControl
    x:Class="WeddingBooth.Views.CameraView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:camera="clr-namespace:TheXamlGuy.Framework.Camera;assembly=Camera"
    xmlns:markup="clr-namespace:WeddingBooth.Markups"
    x:Name="Camera"
    VisualStateExtension.IsStateTriggersAttached="True">
    <UserControl.Resources>
        <BindingProxy x:Key="BindingProxy" DataContext="{Binding}" />
        <BindingProxy x:Key="CountdownProxy" DataContext="{Binding ElementName=Countdown}" />
        <BindingProxy x:Key="CameraProxy" DataContext="{Binding ElementName=Camera}" />
        <BindingProxy x:Key="ImageProxy" DataContext="{Binding ElementName=Image}" />
    </UserControl.Resources>
    <Grid>
        <CameraPreview x:Name="CameraPreview">
            <CameraPreview.LayoutTransform>
                <RotateTransform Angle="90" />
            </CameraPreview.LayoutTransform>
        </CameraPreview>
        <ProgressRing
            x:Name="ProgressRing"
            Width="500"
            Height="500"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            IsActive="True"
            IsIndeterminate="True"
            Opacity="0"
            Thickness="12" />
        <Countdown
            x:Name="Countdown"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Completed="{Composite {State {Binding Source={StaticResource CameraProxy}, Path=DataContext},
                                         Completed},
                                  {ChangeProperty {Binding},
                                                  CanCapture,
                                                  false},
                                  {Invoke Capture}}"
            CountdownIdentifier="FiveSecond"
            FontFamily="{StaticResource ContentControlFontFamily}"
            FontSize="300"
            Foreground="White"
            TextBlock.FontWeight="Thin" />
        <Image
            x:Name="Image"
            Opacity="0"
            Stretch="Fill">
            <Image.LayoutTransform>
                <RotateTransform Angle="90" />
            </Image.LayoutTransform>
        </Image>
        <Border
            x:Name="FlashOverlay"
            Background="White"
            Opacity="0"
            RenderTransformOrigin="0.5,0.5">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                FontFamily="{StaticResource AccentFontFamily}"
                FontSize="288"
                Text="Smile!" />
            <Border.RenderTransform>
                <ScaleTransform x:Name="ScaleTransform" />
            </Border.RenderTransform>
        </Border>
    </Grid>
    <Interaction.XamlEventAggregator>
        <XamlEventAggregator EventAggregator="{Binding Source={StaticResource BindingProxy}, Path=DataContext.EventAggregator}">
            <EventSubscriber Invoked="{Composite {ChangeProperty {Binding Source={StaticResource ImageProxy}, Path=DataContext}, Source, {EventParameter Invoked, {markup:CapturedConverter}}}, {State {Binding Source={StaticResource CameraProxy}, Path=DataContext}, Captured}, {ChangeProperty {Binding}, CanCapture, true}}" Type="{x:Type camera:Captured}" />
        </XamlEventAggregator>
    </Interaction.XamlEventAggregator>
    <Interaction.InteractiveFrame>
        <InteractiveFrame EventAggregator="{Binding Source={StaticResource BindingProxy}, Path=DataContext.EventAggregator}">
            <InteractiveFrameButton Invoked="{Composite {Condition {Binding CanCapture}, {Invoke Start, BindingTarget={Binding Source={StaticResource CountdownProxy}, Path=DataContext}}, {State {Binding Source={StaticResource CameraProxy}, Path=DataContext}, Started}}}" Placement="Top" />
        </InteractiveFrame>
    </Interaction.InteractiveFrame>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PhotoStates">
            <VisualState x:Name="Started">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ProgressRing" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Completed">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="2.05" />
                        <SplineDoubleKeyFrame
                            KeySpline="0,0,0,1"
                            KeyTime="00:00:00.250"
                            Value="1.0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="2.05" />
                        <SplineDoubleKeyFrame
                            KeySpline="0,0,0,1"
                            KeyTime="00:00:00.250"
                            Value="1.0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FlashOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
                        <LinearDoubleKeyFrame KeyTime="00:00:00.167" Value="1.0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ProgressRing" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Captured">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Image" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1" />
                        <SplineDoubleKeyFrame KeyTime="00:00:04.168" Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                        <SplineDoubleKeyFrame
                            KeySpline="0,0,0,1"
                            KeyTime="00:00:00.167"
                            Value="1.05" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                        <SplineDoubleKeyFrame
                            KeySpline="0,0,0,1"
                            KeyTime="00:00:00.167"
                            Value="1.05" />
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FlashOverlay" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
                        <LinearDoubleKeyFrame KeyTime="00:00:00.083" Value="0.0" />
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</UserControl>