MainPage.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:Name="page"
      x:Class="PhotoLab.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:PhotoLab"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
      mc:Ignorable="d"
      NavigationCacheMode="Enabled"
      SizeChanged="{x:Bind DetermineItemSize}">
    <Page.Resources>

        <!-- Margins for grid items -->
        <x:Int32 x:Key="LargeItemMarginValue">8</x:Int32>
        <Thickness x:Key="LargeItemMargin">8</Thickness>
        <x:Int32 x:Key="SmallItemMarginValue">0</x:Int32>
        <Thickness x:Key="SmallItemMargin">0</Thickness>
        <x:Int32 x:Key="DefaultWindowSidePaddingValue">16</x:Int32>
        
        <Flyout x:Key="zoomFlyout">
            <StackPanel>
                <Slider x:Name="ZoomSlider"   
                        Minimum="180"
                        Maximum="540"
                        Value="270"
                        Margin="0,5,0,0"
                        TickFrequency="90"
                        SnapsTo="Ticks"
                        ValueChanged="{x:Bind DetermineItemSize}"
                        Header="Grid item size" />
                <ToggleSwitch x:Name="FitScreenToggle"
                              Header="Fit to screen"
                              Toggled="{x:Bind DetermineItemSize}"
                              ToolTipService.ToolTip="Resize images to use available space." />
            </StackPanel>
        </Flyout>

        <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
            <ItemsWrapGrid Orientation="Horizontal"
                           HorizontalAlignment="Center" />
        </ItemsPanelTemplate>

        <DataTemplate x:Key="ImageGridView_DefaultItemTemplate"
                      x:DataType="local:ImageFileInfo">
            <Grid Height="{Binding ItemSize, ElementName=page}"
                  Width="{Binding ItemSize, ElementName=page}"
                  Margin="{StaticResource LargeItemMargin}">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image x:Name="ItemImage"
                       Stretch="Uniform"
                       Opacity="0" />
                <StackPanel Orientation="Vertical"
                            Grid.Row="1">
                    <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource SubtitleTextBlockStyle}" />
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <TextBlock Text="{x:Bind ImageFileType}"
                                   HorizontalAlignment="Center"
                                   Style="{StaticResource CaptionTextBlockStyle}" />
                        <TextBlock Text="{x:Bind ImageDimensions}"
                                   HorizontalAlignment="Center"
                                   Style="{StaticResource CaptionTextBlockStyle}"
                                   Margin="8,0,0,0" />
                    </StackPanel>

                    <muxc:RatingControl Value="{x:Bind ImageRating, Mode=OneWay}"
                                        IsReadOnly="True"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <Style x:Key="ImageGridView_DefaultItemContainerStyle"
               TargetType="GridViewItem">
            <Setter Property="Background"
                    Value="Gray" />
            <Setter Property="Margin"
                    Value="{StaticResource LargeItemMargin}" />
        </Style>

        <DataTemplate x:Key="ImageGridView_SmallItemTemplate"
                      x:DataType="local:ImageFileInfo">
            <Grid Height="{Binding ItemSize, ElementName=page}"
                  Width="{Binding ItemSize, ElementName=page}">
                <Image x:Name="ItemImage"
                       Stretch="UniformToFill"
                       Opacity="0">
                    <ToolTipService.ToolTip>
                        <ToolTip x:Name="tooltip">
                            <StackPanel Orientation="Vertical"
                                        Grid.Row="1">
                                <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}"
                                           HorizontalAlignment="Center"
                                           Style="{StaticResource SubtitleTextBlockStyle}" />
                                <StackPanel Orientation="Horizontal"
                                            HorizontalAlignment="Center">
                                    <TextBlock Text="{x:Bind ImageFileType}"
                                               HorizontalAlignment="Center"
                                               Style="{StaticResource CaptionTextBlockStyle}" />
                                    <TextBlock Text="{x:Bind ImageDimensions}"
                                               HorizontalAlignment="Center"
                                               Style="{StaticResource CaptionTextBlockStyle}"
                                               Margin="8,0,0,0" />
                                </StackPanel>
                            </StackPanel>
                        </ToolTip>
                    </ToolTipService.ToolTip>
                </Image>
            </Grid>
        </DataTemplate>

        <Style x:Key="ImageGridView_SmallItemContainerStyle"
               TargetType="GridViewItem" />

    </Page.Resources>

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="TitleTextBlock"
                   Text="Collection"
                   Style="{StaticResource TitleTextBlockStyle}"
                   Margin="24,0,0,24" />

        <CommandBar x:Name="MainCommandBar"
                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                    RelativePanel.AlignRightWithPanel="True"
                    OverflowButtonVisibility="Collapsed"
                    DefaultLabelPosition="Right">
            <AppBarButton Icon="Zoom"
                          Label="Zoom"
                          Flyout="{StaticResource zoomFlyout}" />
        </CommandBar>

        <GridView x:Name="ImageGridView"
                  ContainerContentChanging="ImageGridView_ContainerContentChanging"
                  animations:ReorderGridAnimation.Duration="400"
                  Margin="0,0,0,8"
                  ItemClick="ImageGridView_ItemClick"
                  IsItemClickEnabled="True"
                  ItemsSource="{x:Bind Images, Mode=OneWay}"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel.Below="TitleTextBlock"
                  Loaded="{x:Bind StartConnectedAnimationForBackNavigation}"
                  ItemsPanel="{StaticResource ImageGridView_ItemsPanelTemplate}"
                  ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                  ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}">
        </GridView>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowBreakpoint}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowBreakpoint}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowBreakpoint}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ImageGridView.ItemTemplate"
                                Value="{StaticResource ImageGridView_SmallItemTemplate}" />
                        <Setter Target="ImageGridView.ItemContainerStyle"
                                Value="{StaticResource ImageGridView_SmallItemContainerStyle}" />

                        <Setter Target="ZoomSlider.Minimum"
                                Value="80" />
                        <Setter Target="ZoomSlider.Maximum"
                                Value="180" />
                        <Setter Target="ZoomSlider.TickFrequency"
                                Value="20" />
                        <Setter Target="ZoomSlider.Value"
                                Value="100" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </RelativePanel>
</Page>