<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:reader="using:Windows.Reader.Controls"
    xmlns:mreader="using:Reader.Controls"
    xmlns:vsm="using:Windows.UI.Xaml"
    xmlns:ui="using:Windows.Reader.UI"
    VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="MRUPane" x:Uid="Layout" RequestedTheme="Default" TabNavigation="Cycle">
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
          <!-- Default theme resources -->
          <Thickness x:Key="ReaderThumbnailBorderThickness">0</Thickness>
          <SolidColorBrush x:Key="ReaderControlForegroundBrush" Color="White"/>
          <SolidColorBrush x:Key="ReaderControlBackgroundBrush" Color="#FF111111"/>
          <SolidColorBrush x:Key="ReaderControlPointerOverBrush" Color="#3DFFFFFF"/>
          <SolidColorBrush x:Key="ReaderControlDisabledBrush" Color="#7CFFFFFF" />
          <SolidColorBrush x:Key="ReaderAccentBrush" Color="#FFD24726"/>
          <SolidColorBrush x:Key="ReaderCanvasGreyBackground" Color="#FF1D1D1D"/>
          <SolidColorBrush x:Key="ReaderDarkPrimaryTextColor" Color="White"/>
          <SolidColorBrush x:Key="ReaderDarkSecondaryTextColor" Color="#99FFFFFF"/>
          <SolidColorBrush x:Key="ReaderThumbnailAccentBrush" Color="#FFD24726"/>
          <SolidColorBrush x:Key="ReaderThumbnailBackgroundBrush" Color="#B3B6B6B6"/>
          <SolidColorBrush x:Key="ReaderThumbnailForegroundBrush" Color="#FF2A2A2A"/>
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
          <!-- High Contrast theme resources -->
          <Thickness x:Key="ReaderThumbnailBorderThickness">2</Thickness>
          <SolidColorBrush x:Key="ReaderControlForegroundBrush" Color="{StaticResource SystemColorButtonTextColor}"/>
          <SolidColorBrush x:Key="ReaderControlBackgroundBrush" Color="{StaticResource SystemColorButtonFaceColor}"/>
          <SolidColorBrush x:Key="ReaderControlPointerOverBrush" Color="{StaticResource SystemColorHighlightColor}"/>
          <SolidColorBrush x:Key="ReaderControlDisabledBrush" Color="{StaticResource SystemColorGrayTextColor}"/>
          <SolidColorBrush x:Key="ReaderAccentBrush" Color="{StaticResource SystemColorWindowColor}"/>
          <SolidColorBrush x:Key="ReaderCanvasGreyBackground" Color="{StaticResource SystemColorWindowColor}"/>
          <SolidColorBrush x:Key="ReaderDarkPrimaryTextColor" Color="{StaticResource SystemColorButtonTextColor}"/>
          <SolidColorBrush x:Key="ReaderDarkSecondaryTextColor" Color="{StaticResource SystemColorGrayTextColor}"/>
          <SolidColorBrush x:Key="ReaderThumbnailAccentBrush" Color="{StaticResource SystemColorWindowColor}"/>
          <SolidColorBrush x:Key="ReaderThumbnailBackgroundBrush" Color="{StaticResource SystemColorButtonFaceColor}"/>
          <SolidColorBrush x:Key="ReaderThumbnailForegroundBrush" Color="{StaticResource SystemColorButtonTextColor}"/>
        </ResourceDictionary>
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>

    <ui:InvertVisibilityConverter x:Key="InvertVisibilityConverter" />

    <!-- MRU Back button -->
    <Style TargetType="Button" x:Name="BackButtonStyle">
      <Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" />
      <Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
      <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" />
      <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
      <Setter Property="Padding" Value="12,4,12,4" />
      <Setter Property="MinWidth" Value="96" />
      <Setter Property="HorizontalAlignment" Value="Left" />
      <Setter Property="VerticalAlignment" Value="Center" />
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
      <Setter Property="FontWeight" Value="SemiBold" />
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid x:Name="RootGrid">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="PointerOver">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
																										 Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
																										 Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
																										 Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
																										 Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="RootGrid"
													Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
													Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                      <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
													Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused" />
                  <VisualState x:Name="PointerFocused" />
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border x:Name="Border"
											Background="{TemplateBinding Background}"
											BorderBrush="{TemplateBinding BorderBrush}"
											BorderThickness="{TemplateBinding BorderThickness}"
											Margin="3">
                <ContentPresenter x:Name="ContentPresenter"
																	Content="{TemplateBinding Content}"
																	ContentTransitions="{TemplateBinding ContentTransitions}"
																	ContentTemplate="{TemplateBinding ContentTemplate}"
																	Margin="{TemplateBinding Padding}"
																	HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
																	VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
																	AutomationProperties.AccessibilityView="Raw"/>
              </Border>
              <Rectangle x:Name="FocusVisualWhite"
												 IsHitTestVisible="False"
												 Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
												 StrokeEndLineCap="Square"
												 StrokeDashArray="1,1"
												 Opacity="0"
												 StrokeDashOffset="1.5" />
              <Rectangle x:Name="FocusVisualBlack"
												 IsHitTestVisible="False"
												 Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
												 StrokeEndLineCap="Square"
												 StrokeDashArray="1,1"
												 Opacity="0"
												 StrokeDashOffset="0.5" />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <!-- MRU Browse button style -->
    <Style TargetType="AppBarButton" x:Name="BrowseButtonStyle">
      <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
      <Setter Property="VerticalAlignment" Value="Top"/>
      <Setter Property="HorizontalAlignment" Value="Left"/>
      <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
      <Setter Property="FontSize" Value="26.667"/>
      <Setter Property="FontWeight" Value="Light"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="AppBarButton">
            <Grid x:Name="RootGrid" Background="Transparent">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ApplicationViewStates">
                  <!-- FullSize is used when we are in landscape or filled mode -->
                  <VisualState x:Name="FullSize"/>
                  <!-- Compact is used when we are in portrait or snapped mode -->
                  <VisualState x:Name="Compact"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="PointerOver">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse" Storyboard.TargetProperty="Fill">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverBackgroundThemeBrush}"/>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPointerOverForegroundThemeBrush}"/>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Pressed">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OutlineEllipse" Storyboard.TargetProperty="Stroke">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse" Storyboard.TargetProperty="Fill">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemForegroundThemeBrush}"/>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarItemPressedForegroundThemeBrush}"/>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Disabled"/>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <DoubleAnimation
															Storyboard.TargetName="FocusVisualWhite"
															Storyboard.TargetProperty="Opacity"
															To="1"
															Duration="0"/>
                      <DoubleAnimation
															Storyboard.TargetName="FocusVisualBlack"
															Storyboard.TargetProperty="Opacity"
															To="1"
															Duration="0"/>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused" />
                  <VisualState x:Name="PointerFocused" />
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>

              <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="5,5,10,0">
                <Grid Width="40" Height="40" Margin="0,0,8,5" HorizontalAlignment="Center">
                  <Ellipse
											x:Name="BackgroundEllipse"
											UseLayoutRounding="False"
											Width="40"
											Height="40"
											Fill="{ThemeResource AppBarItemBackgroundThemeBrush}"/>
                  <Ellipse
											x:Name="OutlineEllipse"
											UseLayoutRounding="False"
											Width="40"
											Height="40"
											Stroke="{ThemeResource AppBarItemForegroundThemeBrush}"
											StrokeThickness="2.25" />
                  <TextBlock
										x:Name="Content"
										Text="&#xE1C1;"
										Foreground="{ThemeResource AppBarItemForegroundThemeBrush}"
										FontSize="20"
										FontFamily="{ThemeResource SymbolThemeFontFamily}"
										TextAlignment="Center"
										VerticalAlignment="Center"
										HorizontalAlignment="Center"/>
                </Grid>
                <ContentPresenter
										x:Name="TextLabel"
										Content="{TemplateBinding Content}"
										Foreground="{TemplateBinding Foreground}"
										VerticalAlignment="Top"
										AutomationProperties.AccessibilityView="Raw"/>
              </StackPanel>
              <Rectangle
									x:Name="FocusVisualWhite"
									IsHitTestVisible="False"
									Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
									StrokeEndLineCap="Square"
									StrokeDashArray="1,1"
									Opacity="0"
									StrokeDashOffset="1.5"/>
              <Rectangle
									x:Name="FocusVisualBlack"
									IsHitTestVisible="False"
									Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
									StrokeEndLineCap="Square"
									StrokeDashArray="1,1"
									Opacity="0"
									StrokeDashOffset="0.5"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>


    <Storyboard x:Name="MRUPaneShowAnimation">
      <PopInThemeAnimation Storyboard.TargetName="MRUItemsGrid" FromVerticalOffset="50" FromHorizontalOffset ="0"/>
    </Storyboard>
    <Storyboard x:Name="MRUPaneHideAnimation">
      <PopOutThemeAnimation Storyboard.TargetName="MRUItemsGrid"/>
    </Storyboard>
  </UserControl.Resources>
  <Grid x:Name="MRUItemsGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{StaticResource ReaderCanvasGreyBackground}">
    <TextBlock x:Uid="RecentFilesHeader" x:Name="RecentFilesHeader" Visibility="{Binding Visibility, ElementName=TextNoItemsInMRU, Mode=OneWay, Converter={StaticResource InvertVisibilityConverter}}" Margin="119,164,76,0" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontSize="14.667"/>
    <TextBlock x:Uid="TextNoItemsInMRU" x:Name="TextNoItemsInMRU" MaxWidth="450" HorizontalAlignment="Left" Margin="118,151,20,0" TextWrapping="Wrap" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="Light" FontSize="26.667" LineStackingStrategy="BaselineToBaseline" LineHeight="32"/>
    <TextBlock Visibility="Collapsed" Margin="115,49,0,0" x:Uid="ReaderTitle" x:Name="ReaderTitle" Foreground="{StaticResource ReaderDarkPrimaryTextColor}" VerticalAlignment="Top" HorizontalAlignment="Left" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="Light" FontSize="56"/>
    <AppBarButton Visibility="Collapsed" x:Uid="BrowseButton" x:Name="BrowseCommandStaticSnap" Style="{StaticResource BrowseButtonStyle}" Margin="115,66,76,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <AppBarButton x:Uid="BrowseButton" x:Name="BrowseCommand" Style="{StaticResource BrowseButtonStyle}" Margin="115,66,76,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <mreader:ReaderAccGridView x:Name="MRUButtonPanel" TabNavigation="Local" SelectionMode="Extended" IsItemClickEnabled="True" Height="Auto" Width="Auto" Margin="0,150,0,88" Padding="0,46,0,2">
      <mreader:ReaderAccGridView.ItemTemplate>
        <DataTemplate x:Key="MRUThumbnailTemplate">
          <StackPanel Orientation="Horizontal" Width="280">
            <Grid FlowDirection="LeftToRight" x:Name="MRUThumbnailGrid" Width="100" Height="140"
										AutomationProperties.AutomationId="{Binding AutomationId}"
										AutomationProperties.Name="{Binding AutomationId}"
										ToolTipService.ToolTip="{Binding MRUToolTip}">
              <Border Visibility="{Binding IsPasswordProtected}" Margin="0" Background="{StaticResource ReaderThumbnailBackgroundBrush}" BorderThickness="0">
                <TextBlock Text="&#xE131;" Foreground="{StaticResource ReaderThumbnailForegroundBrush}" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="42" VerticalAlignment="Center" HorizontalAlignment="Center"/>
              </Border>
              <Viewbox Width="100" Height="160" VerticalAlignment="Top">
                <Grid Width="{Binding ThumbnailWidth}" Height="{Binding ThumbnailHeight}" Background="{Binding Thumbnail}" VerticalAlignment="Top">
                </Grid>
              </Viewbox>
              <Border x:Name="MRUThumbnailHContrastBorder" Margin="0" Background="Transparent" BorderBrush="{StaticResource ReaderControlForegroundBrush}" BorderThickness="{StaticResource ReaderThumbnailBorderThickness}"/>
            </Grid>
            <StackPanel Orientation="Vertical" Margin="0" Width="180">
              <TextBlock Margin="14,5,10,0" x:Name="FileName" Text="{Binding FileName}" Foreground="{StaticResource ReaderDarkPrimaryTextColor}" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="SemiLight" FontSize="14.667" TextAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="20" MaxHeight="40"/>
              <TextBlock Margin="14,4,10,0" x:Name="FileRecentShortDate" Text="{Binding FileTime}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="SemiLight" FontSize="12" TextAlignment="Left"/>
              <TextBlock Margin="14,4,10,0" x:Name="FileType" Text="{Binding FileType}" Foreground="{ThemeResource ApplicationSecondaryForegroundThemeBrush}" FontFamily="{StaticResource ContentControlThemeFontFamily}" FontWeight="SemiLight" FontSize="12" TextAlignment="Left"/>
            </StackPanel>
          </StackPanel>
        </DataTemplate>
      </mreader:ReaderAccGridView.ItemTemplate>
      <mreader:ReaderAccGridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
          <Setter Property="Margin" Value="0,0,12,12"/>
        </Style>
      </mreader:ReaderAccGridView.ItemContainerStyle>
      <mreader:ReaderAccGridView.Header>
        <Grid Width="116"/>
      </mreader:ReaderAccGridView.Header>
      <mreader:ReaderAccGridView.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapGrid Orientation="Vertical" />
        </ItemsPanelTemplate>
      </mreader:ReaderAccGridView.ItemsPanel>
    </mreader:ReaderAccGridView>
    <Button x:Uid="BackButton" x:Name="BackButton" Style="{StaticResource BackButtonStyle}" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,63,33"/>
  </Grid>
</UserControl>