DetailPage.xaml

<!--  
//  Copyright (c) Microsoft Corporation.  All rights reserved.
// 
//  The MIT License (MIT)
// 
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
// 
//  The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
// 
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE. 
-->

<Page x:Class="PhotoLab.DetailPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:PhotoLab"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      RequestedTheme="Dark">

    <Page.Resources>
        <Flyout x:Key="zoomFlyout">
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Setter Property="HorizontalAlignment"
                                Value="Stretch" />
                        <Setter Property="Margin"
                                Value="0,2" />
                    </Style>
                </StackPanel.Resources>
                <Slider x:Name="ZoomSlider"
                        Width="100"
                        Minimum="0.1"
                        Maximum="5"
                        Value="1"
                        Margin="0,5,0,0"
                        StepFrequency="0.1"
                        ValueChanged="ZoomSlider_ValueChanged" />
                <Button Content="Fit to screen"
                        Click="{x:Bind FitToScreen}" />
                <Button Content="Show actual size"
                        Click="{x:Bind ShowActualSize}" />
            </StackPanel>
        </Flyout>

        <ControlTemplate TargetType="Slider" x:Key="FancySliderControlTemplate"
                         xmlns:contract6Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,6)"
                         xmlns:contract6NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,6)"
                         xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)"
                         xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)">
            <Grid Margin="{TemplateBinding Padding}">
                <Grid.Resources>
                    <Style TargetType="Thumb" x:Key="SliderThumbStyle">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Thumb">
                                    <Border
                                                Background="{TemplateBinding Background}"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"
                                                CornerRadius="{ThemeResource SliderThumbCornerRadius}" />
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Grid.Resources>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />

                        <VisualState x:Name="Pressed">

                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPressed}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>

                        <VisualState x:Name="Disabled">

                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>

                        <VisualState x:Name="PointerOver">

                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>

                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusEngagementStates">
                        <VisualState x:Name="FocusDisengaged" />
                        <VisualState x:Name="FocusEngagedHorizontal">

                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="FocusEngagedVertical">

                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <ContentPresenter x:Name="HeaderContentPresenter"
                            Grid.Row="0"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                            Foreground="{ThemeResource SliderHeaderForeground}"
                            Margin="{ThemeResource SliderTopHeaderMargin}"
                            TextWrapping="Wrap"
                            Visibility="Collapsed"
                            x:DeferLoadStrategy="Lazy"/>
                <Grid x:Name="SliderContainer"
                            Grid.Row="1"
                            Background="{ThemeResource SliderContainerBackground}"
                            Control.IsTemplateFocusTarget="True">
                    <Grid x:Name="HorizontalTemplate" MinHeight="{ThemeResource SliderHorizontalHeight}">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
                        </Grid.RowDefinitions>

                        <Polygon Grid.Row="0"
                                 Grid.RowSpan="3"
                                 Grid.ColumnSpan="3"
                                 Stretch="Fill"
                                 Points="0,20 200,20 200,0"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
                                 Height="20"
                                 Fill="{TemplateBinding Background}">
                        </Polygon>

                        <Rectangle x:Name="HorizontalTrackRect"
                                    
                                    Height="{ThemeResource SliderTrackThemeHeight}"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="3"
                                    contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                        <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1"
                                    contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                        <TickBar x:Name="TopTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderTickBarFill}"
                                    Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                    VerticalAlignment="Bottom"
                                    Margin="0,0,0,4"
                                    Grid.ColumnSpan="3" />
                        <TickBar x:Name="HorizontalInlineTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderInlineTickBarFill}"
                                    Height="{ThemeResource SliderTrackThemeHeight}"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="3" />
                        <TickBar x:Name="BottomTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderTickBarFill}"
                                    Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                    VerticalAlignment="Top"
                                    Margin="0,4,0,0"
                                    Grid.Row="2"
                                    Grid.ColumnSpan="3" />
                        <Thumb x:Name="HorizontalThumb"
                                    Style="{StaticResource SliderThumbStyle}"
                                    DataContext="{TemplateBinding Value}"
                                    Height="{ThemeResource SliderHorizontalThumbHeight}"
                                    Width="{ThemeResource SliderHorizontalThumbWidth}"
                                    Grid.Row="0"
                                    Grid.RowSpan="3"
                                    Grid.Column="1"
                                    FocusVisualMargin="-14,-6,-14,-6"
                                    AutomationProperties.AccessibilityView="Raw" />
                    </Grid>
                    <Grid x:Name="VerticalTemplate" MinWidth="{ThemeResource SliderVerticalWidth}" Visibility="Collapsed">

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{ThemeResource SliderPreContentMargin}" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="{ThemeResource SliderPostContentMargin}" />
                        </Grid.ColumnDefinitions>

                        <Rectangle x:Name="VerticalTrackRect"
                                    Fill="{TemplateBinding Background}"
                                    Width="{ThemeResource SliderTrackThemeHeight}"
                                    Grid.Column="1"
                                    Grid.RowSpan="3"
                                    contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                        <Rectangle x:Name="VerticalDecreaseRect"
                                    Fill="{TemplateBinding Foreground}"
                                    Grid.Column="1"
                                    Grid.Row="2"
                                    contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
                                    contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
                        <TickBar x:Name="LeftTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderTickBarFill}"
                                    Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                    HorizontalAlignment="Right"
                                    Margin="0,0,4,0"
                                    Grid.RowSpan="3" />
                        <TickBar x:Name="VerticalInlineTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderInlineTickBarFill}"
                                    Width="{ThemeResource SliderTrackThemeHeight}"
                                    Grid.Column="1"
                                    Grid.RowSpan="3" />
                        <TickBar x:Name="RightTickBar"
                                    Visibility="Collapsed"
                                    Fill="{ThemeResource SliderTickBarFill}"
                                    Width="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                    HorizontalAlignment="Left"
                                    Margin="4,0,0,0"
                                    Grid.Column="2"
                                    Grid.RowSpan="3" />
                        <Thumb x:Name="VerticalThumb"
                                    Style="{StaticResource SliderThumbStyle}"
                                    DataContext="{TemplateBinding Value}"
                                    Width="{ThemeResource SliderVerticalThumbWidth}"
                                    Height="{ThemeResource SliderVerticalThumbHeight}"
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    FocusVisualMargin="-6,-14,-6,-14"
                                    AutomationProperties.AccessibilityView="Raw" />
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>

    </Page.Resources>

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="TitlePanel" Orientation="Horizontal">
            <TextBlock x:Name="TitleTextBlock"
                       Text="{x:Bind item.ImageTitle, Mode=OneWay}"
                       Style="{StaticResource TitleTextBlockStyle}"
                       Margin="24,0,0,24" />
            <TextBlock Text="*"
                       Style="{StaticResource TitleTextBlockStyle}"
                       Visibility="{x:Bind item.NeedsSaved, Mode=OneWay}" />
        </StackPanel>
        <CommandBar x:Name="MainCommandBar"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    RelativePanel.AlignRightWithPanel="True"
                    RelativePanel.AlignTopWithPanel="True"
                    OverflowButtonVisibility="Collapsed"
                    DefaultLabelPosition="Right">
            <AppBarButton x:Name="ZoomButton"
                          Icon="Zoom"
                          Label="Zoom"
                          Flyout="{StaticResource zoomFlyout}" />
            <AppBarToggleButton x:Name="EditButton"
                                Icon="Edit"
                                Label="Edit"
                                Click="{x:Bind ToggleEditState}" />
        </CommandBar>

        <SplitView x:Name="MainSplitView"
                   DisplayMode="Inline"
                   PanePlacement="Right"
                   RelativePanel.Below="MainCommandBar"
                   RelativePanel.AlignLeftWithPanel="True"
                   RelativePanel.AlignRightWithPanel="True"
                   RelativePanel.AlignBottomWithPanel="True">

            <Grid>
                <Image x:Name="targetImage"
                       Stretch="None" />
                <ScrollViewer x:Name="MainImageScroller"
                              ZoomMode="Enabled"
                              HorizontalScrollMode="Auto"
                              HorizontalScrollBarVisibility="Auto"
                              ViewChanged="MainImageScroller_ViewChanged"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch">
                    <Rectangle x:Name="imgRect"
                               x:Load="True"
                               Width="{x:Bind item.ImageProperties.Width, Mode=OneWay}"
                               Height="{x:Bind item.ImageProperties.Height, Mode=OneWay}">
                        <Rectangle.Fill>
                            <local:LoadedImageBrush x:Name="ImageEffectsBrush" 
                                                BlurAmount="{x:Bind item.Blur, Mode=OneWay}"
                                                SaturationAmount="{x:Bind item.Saturation, Mode=OneWay}"
                                                ContrastAmount="{x:Bind item.Contrast, Mode=OneWay}"
                                                ExposureAmount="{x:Bind item.Exposure, Mode=OneWay}"
                                                TintAmount="{x:Bind item.Tint, Mode=OneWay}"
                                                TemperatureAmount="{x:Bind item.Temperature, Mode=OneWay}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                </ScrollViewer>
            </Grid>

            <SplitView.Pane>

                <ScrollViewer>
                    <Grid x:Name="EditControlsGrid" x:Load="{x:Bind MainSplitView.IsPaneOpen, Mode=OneWay}"
                          HorizontalAlignment="Stretch"
                          Margin="24,48,24,24">
                        <Grid.Resources>
                            <x:Double x:Key="SliderTrackThemeHeight">4</x:Double>
                            <Style TargetType="Slider" BasedOn="{StaticResource DefaultSliderStyle}">
                                <Setter Property="Margin"
                                        Value="0,0,0,0" />
                                <Setter Property="Padding"
                                        Value="0" />
                                <Setter Property="MinWidth"
                                        Value="100" />
                                <Setter Property="StepFrequency"
                                        Value="0.1" />
                                <Setter Property="TickFrequency"
                                        Value="0.1" />
                                <Setter Property="Grid.ColumnSpan"
                                        Value="2" />
                            </Style>
                            <Style TargetType="TextBlock"
                                   x:Key="ValueTextBlock">
                                <Setter Property="HorizontalAlignment"
                                        Value="Right" />
                                <Setter Property="Grid.Column"
                                        Value="1" />
                            </Style>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="144" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBox x:Name="TitleEditBox"
                                 Header="Title"
                                 Height="80"
                                 Text="{x:Bind item.ImageTitle, Mode=TwoWay}"
                                 Padding="12"
                                 Grid.ColumnSpan="2" />
                        <muxc:RatingControl Value="{x:Bind item.ImageRating, Mode=TwoWay}"
                                                Padding="12"
                                                Grid.Row="1"
                                                Grid.ColumnSpan="2"
                                                Margin="0,0,0,16">
                        </muxc:RatingControl>


                        <Slider Header="Exposure"
                                Grid.Row="2"
                                Foreground="Transparent"
                                Value="{x:Bind item.Exposure, Mode=TwoWay}"
                                Minimum="-2"
                                Maximum="2"
                                Template="{StaticResource FancySliderControlTemplate}">
                            <Slider.Background>
                                <LinearGradientBrush StartPoint="0,0.5"
                                                     EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0"
                                                      Color="Black" />
                                        <GradientStop Offset="1"
                                                      Color="White" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Slider.Background>
                        </Slider>
                        <TextBlock Grid.Row="2"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Exposure.ToString('N', culture), Mode=OneWay}" />


                        <Slider Header="Temperature"
                                Grid.Row="3"
                                Foreground="Transparent"
                                Value="{x:Bind item.Temperature, Mode=TwoWay}"
                                Minimum="-1"
                                Maximum="1"
                                Template="{StaticResource FancySliderControlTemplate}">
                            <Slider.Background>
                                <LinearGradientBrush StartPoint="0,0.5"
                                                     EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0"
                                                      Color="Blue" />
                                        <GradientStop Offset="1"
                                                      Color="Yellow" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Slider.Background>
                        </Slider>
                        <TextBlock Grid.Row="3"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Temperature.ToString('N', culture), Mode=OneWay}" />

                        <Slider Header="Tint"
                                Grid.Row="4"
                                Foreground="Transparent"
                                Value="{x:Bind item.Tint, Mode=TwoWay}"
                                Minimum="-1"
                                Maximum="1"
                                Template="{StaticResource FancySliderControlTemplate}">
                            <Slider.Background>
                                <LinearGradientBrush StartPoint="0,0.5"
                                                     EndPoint="1,0.5">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStop Offset="0"
                                                      Color="Red" />
                                        <GradientStop Offset="1"
                                                      Color="Green" />
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Slider.Background>
                        </Slider>
                        <TextBlock Grid.Row="4"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Tint.ToString('N', culture), Mode=OneWay}" />

                        <Slider Header="Contrast"
                                Grid.Row="5"
                                Foreground="Transparent"
                                Value="{x:Bind item.Contrast, Mode=TwoWay}"
                                Minimum="-1"
                                Maximum="1" />
                        <TextBlock Grid.Row="5"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Contrast.ToString('N', culture), Mode=OneWay}" />

                        <Slider Header="Saturation"
                                Grid.Row="6"
                                Minimum="0"
                                Maximum="1"
                                Value="{x:Bind item.Saturation, Mode=TwoWay}" />
                        <TextBlock Grid.Row="6"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Saturation.ToString('N', culture), Mode=OneWay}" />

                        <Slider Header="Blur"
                                Grid.Row="7"
                                Value="{x:Bind item.Blur, Mode=TwoWay}"
                                Minimum="0"
                                Maximum="5"/>
                        <TextBlock Grid.Row="7"
                                   Style="{StaticResource ValueTextBlock}"
                                   Text="{x:Bind item.Blur.ToString('N', culture), Mode=OneWay}" />

                        <Image x:Name="SmallImage" Width="300" Height="200" Grid.Row="8" Grid.ColumnSpan="2"
                               Loaded="SmallImage_Loaded"/>



                        <Grid Grid.Row="9"
                              Grid.ColumnSpan="2"
                              VerticalAlignment="Bottom">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Button Content="Reset"
                                    Margin="0,0,2,0"
                                    HorizontalAlignment="Stretch"
                                    Click="{x:Bind ResetEffects}" />
                            <Button Content="Save..."
                                    Grid.Column="1"
                                    Margin="2,0,0,0"
                                    HorizontalAlignment="Stretch"
                                    Click="{x:Bind ExportImage}" />
                        </Grid>
                    </Grid>
                </ScrollViewer>
            </SplitView.Pane>
        </SplitView>
    </RelativePanel>
</Page>