<!--
    Copyright (C) Microsoft Corporation. All rights reserved.
-->

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:OnlineMediaComponent">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <AcrylicBrush x:Key="Picker3DIconBackgroundBrush" TintColor="{ThemeResource SystemChromeBlackHighColor}" Opacity="0.6" FallbackColor="{ThemeResource SystemChromeBlackHighColor}"/>
            <SolidColorBrush x:Key="Picker3DIconForegroundBrush" Color="{ThemeResource SystemChromeWhiteColor}"/>
            <SolidColorBrush x:Key="Picker3DCaptionBackgroundBrush" Color="{ThemeResource SystemChromeMediumColor}"/>
            <SolidColorBrush x:Key="Picker3DCaptionForegroundBrush" Color="{ThemeResource SystemBaseHighColor}"/>
            <SolidColorBrush x:Key="Picker3DSearchBoxBorder" Color="#FF949494"/>
            <SolidColorBrush x:Key="Picker3DItemBorderBrush" Color="{ThemeResource SystemControlHighlightTransparentBrush}"/>
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
            <SolidColorBrush x:Key="Picker3DIconBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
            <SolidColorBrush x:Key="Picker3DIconForegroundBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
            <SolidColorBrush x:Key="Picker3DCaptionBackgroundBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
            <SolidColorBrush x:Key="Picker3DCaptionForegroundBrush" Color="{ThemeResource SystemColorButtonTextColor}"/>
            <SolidColorBrush x:Key="Picker3DSearchBoxBorder" Color="{ThemeResource SystemBaseHighColor}"/>
            <SolidColorBrush x:Key="Picker3DItemBorderBrush" Color="{ThemeResource SystemBaseHighColor}"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <!--Extracted from "Beihai MDL2 Assets -->
    <x:String x:Key="Picker3DAnimationIconGeometry">M 16,7.5 Q 16,7.8125 15.882813,8.0859375 15.765625,8.359375 15.5625,8.5625 15.359375,8.765625 15.085938,8.8828125 14.8125,9 14.5,9 h -2 Q 12.296875,9 12.148438,8.8515625 L 11,7.7109375 10.203125,8.5 11.851563,10.148438 Q 12,10.296875 12,10.5 v 3 q 0,0.3125 -0.117187,0.585938 Q 11.765625,14.359375 11.5625,14.5625 11.359375,14.765625 11.085938,14.882813 10.8125,15 10.5,15 10.1875,15 9.9140625,14.882813 9.640625,14.765625 9.4375,14.5625 9.234375,14.359375 9.1171875,14.085938 9,13.8125 9,13.5 v -1.789062 l -1,-1 -1.1484375,1.140625 Q 6.703125,12 6.5,12 h -3 Q 3.1875,12 2.9140625,11.882813 2.640625,11.765625 2.4375,11.5625 2.234375,11.359375 2.1171875,11.085938 2,10.8125 2,10.5 2,10.1875 2.1171875,9.9140625 2.234375,9.640625 2.4375,9.4375 2.640625,9.234375 2.9140625,9.1171875 3.1875,9 3.5,9 h 1.7890625 l 0.625,-0.6171875 Q 5.5,8.203125 5.25,7.828125 5,7.453125 5,7 V 4 Q 5,3.7890625 5.078125,3.609375 5.15625,3.4296875 5.2890625,3.296875 5.4296875,3.15625 5.609375,3.078125 5.7890625,3 6,3 h 4 Q 10,2.5859375 10.15625,2.2265625 10.3125,1.859375 10.585938,1.5859375 10.859375,1.3125 11.21875,1.15625 11.585938,1 12,1 12.414063,1 12.773438,1.15625 13.140625,1.3125 13.414063,1.5859375 13.6875,1.859375 13.84375,2.2265625 14,2.5859375 14,3 q 0,0.328125 -0.101562,0.6328125 -0.101563,0.296875 -0.289063,0.546875 -0.179687,0.25 -0.4375,0.4375 -0.25,0.1875 -0.5625,0.2890625 L 13.710938,6 H 14.5 Q 14.8125,6 15.085938,6.1171875 15.359375,6.234375 15.5625,6.4375 15.765625,6.640625 15.882813,6.9140625 16,7.1875 16,7.5 Z M 12,2 Q 11.789063,2 11.609375,2.078125 11.429688,2.15625 11.289063,2.296875 11.15625,2.4296875 11.078125,2.609375 11,2.7890625 11,3 11,3.2109375 11.07813,3.390625 11.15626,3.5703125 11.289068,3.7109375 11.429688,3.84375 11.609375,3.921875 11.789063,4 12,4 12.1875,4 12.367188,3.9296875 12.546875,3.8515625 12.6875,3.7265625 12.828125,3.59375 12.914063,3.4296875 13,3.2578125 13,3.0625 13,2.84375 12.929688,2.6484375 12.859375,2.453125 12.726563,2.3125 12.601563,2.1640625 12.414063,2.0859375 12.226563,2 12,2 Z m 2.5,6 Q 14.703125,8 14.851563,7.8515625 15,7.703125 15,7.5 15,7.296875 14.851563,7.1484375 14.703125,7 14.5,7 h -1 Q 13.296875,7 13.148438,6.8515625 L 10.289063,4 H 6 V 7 Q 6,7.203125 6.1484375,7.3515625 6.296875,7.5 6.5,7.5 6.7890625,7.5 6.890625,7.3203125 7,7.1328125 7.015625,6.8515625 7.03125,6.5703125 7,6.25 6.96875,5.9296875 6.984375,5.6484375 7,5.3671875 7.1015625,5.1875 7.2109375,5 7.5,5 H 9 Q 9.203125,5 9.3515625,5.1484375 9.5,5.296875 9.5,5.5 9.5,5.703125 9.3515625,5.8515625 9.203125,6 9,6 H 8 V 7.5 Q 8,7.703125 7.8515625,7.8515625 l -2,2 Q 5.703125,10 5.5,10 h -2 Q 3.296875,10 3.1484375,10.148438 3,10.296875 3,10.5 3,10.703125 3.1484375,10.851563 3.296875,11 3.5,11 H 6.2890625 L 7.6484375,9.6484375 Q 7.796875,9.5 8,9.5 q 0.203125,0 0.3515625,0.1484375 l 1.5,1.5000005 Q 10,11.296875 10,11.5 v 2 q 0,0.203125 0.148438,0.351563 Q 10.296875,14 10.5,14 10.703125,14 10.851563,13.851563 11,13.703125 11,13.5 V 10.710938 L 9.1484375,8.8515625 Q 9,8.703125 9,8.5 9,8.296875 9.1484375,8.1484375 l 1.5000005,-1.5 Q 10.796875,6.5 11,6.5 q 0.203125,0 0.351563,0.1484375 L 12.710938,8 Z M 4,3.5 Q 4,3.703125 3.8515625,3.8515625 3.703125,4 3.5,4 h -3 Q 0.296875,4 0.1484375,3.8515625 0,3.703125 0,3.5 0,3.296875 0.1484375,3.1484375 0.296875,3 0.5,3 h 3 Q 3.703125,3 3.8515625,3.1484375 4,3.296875 4,3.5 Z m 0,2 Q 4,5.703125 3.8515625,5.8515625 3.703125,6 3.5,6 h -2 Q 1.296875,6 1.1484375,5.8515625 1,5.703125 1,5.5 1,5.296875 1.1484375,5.1484375 1.296875,5 1.5,5 h 2 Q 3.703125,5 3.8515625,5.1484375 4,5.296875 4,5.5 Z M 3.5,7 Q 3.703125,7 3.8515625,7.1484375 4,7.296875 4,7.5 4,7.703125 3.8515625,7.8515625 3.703125,8 3.5,8 h -1 Q 2.296875,8 2.1484375,7.8515625 2,7.703125 2,7.5 2,7.296875 2.1484375,7.1484375 2.296875,7 2.5,7 Z</x:String>
    <x:String x:Key="Picker3DCollectionIconGeometry">M 15.773438,9.46875 Q 15.882813,9.6875 15.9375,9.921875 16,10.15625 16,10.398438 q 0,0.296875 -0.101562,0.578125 -0.09375,0.28125 -0.265625,0.53125 -0.28125,0.40625 -0.710938,0.6875 Q 14.492188,12.476563 14,12.65625 13.507813,12.835938 12.984375,12.921875 12.46875,13 12,13 11.625,13 11.210938,12.953125 10.796875,12.898438 10.390625,12.789063 9.984375,12.671875 9.6015625,12.5 9.2265625,12.328125 8.9375,12.085938 L 4.5,14.3125 0,12.0625 V 6.4453125 l 4.4296875,-2.21875 q 0.2578125,-0.515625 0.625,-0.921875 0.375,-0.4140625 0.8359375,-0.703125 0.46875,-0.2890625 1,-0.4453125 Q 7.421875,2 8,2 q 0.46875,0 0.9140625,0.109375 0.453125,0.1015625 0.859375,0.3046875 0.4140625,0.203125 0.7656255,0.5 0.359375,0.2890625 0.640625,0.6640625 L 12,1.9296875 Z M 8,3 Q 7.578125,3 7.1875,3.1171875 6.796875,3.2265625 6.453125,3.4375 6.109375,3.6484375 5.828125,3.953125 5.546875,4.25 5.3515625,4.6171875 L 9,6.4453125 v 1.484375 L 10.65625,4.609375 Q 10.460938,4.2421875 10.179688,3.9453125 9.8984375,3.6484375 9.5546875,3.4375 9.2109375,3.2265625 8.8125,3.1171875 8.421875,3 8,3 Z M 7.3828125,6.75 4.5,5.3125 1.6171875,6.75 4.5,8.1875 Z M 1,11.445313 4,12.9375 V 9.0625 L 1,7.5546875 Z M 8,7.5546875 5,9.0625 v 3.875 L 8,11.445313 Z M 12,12 q 0.570313,0 1.148438,-0.125 0.578125,-0.125 1.070312,-0.421875 0.140625,-0.08594 0.28125,-0.195312 0.140625,-0.109375 0.25,-0.242188 0.109375,-0.132812 0.179688,-0.28125 Q 15,10.578125 15,10.398438 15,10.265625 14.96875,10.15625 14.9375,10.039063 14.875,9.921875 L 12,4.171875 9.1171875,9.9296875 Q 9.0625,10.039063 9.03125,10.15625 9,10.273438 9,10.398438 9,10.578125 9.0703125,10.734375 9.140625,10.882813 9.25,11.015625 9.359375,11.148438 9.5,11.257813 9.640625,11.367188 9.78125,11.453125 10.273438,11.75 10.851563,11.875 11.429688,12 12,12 Z</x:String>
    <x:String x:Key="Picker3DStackIconGeometry">m 14,5 h 2 v 9 H 4 V 12 H 2 V 10 H 0 V 1 h 12 v 2 h 2 z M 1,2 V 9 H 11 V 2 Z M 3,10 v 1 H 13 V 4 h -1 v 6 z M 15,13 V 6 h -1 v 6 H 5 v 1 z</x:String>

    <x:Double x:Key="Picker3DWideDesiredItemWidth">210</x:Double>
    <x:Double x:Key="Picker3DNarrowDesiredItemWidth">180</x:Double>
    <x:Double x:Key="Picker3DItemCaptionHeight">48</x:Double>
    <x:Double x:Key="Picker3DItemBorderThickness">1</x:Double>

    <Style x:Key="Picker3DWideItemContainerStyle" TargetType="GridViewItem" BasedOn="{StaticResource GridViewItemRevealBackgroundShowsAboveContentStyle}">
        <Setter Property="Margin" Value="8"/>
    </Style>

    <Style x:Key="Picker3DNarrowItemContainerStyle" TargetType="GridViewItem" BasedOn="{StaticResource GridViewItemRevealBackgroundShowsAboveContentStyle}">
        <Setter Property="Margin" Value="6"/>
    </Style>
    
    <Style x:Key="Picker3DWideTitleStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="22"/>
        <Setter Property="FontWeight" Value="SemiLight"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
        <Setter Property="TextWrapping" Value="NoWrap"/>
        <Setter Property="Margin" Value="10,0"/>
    </Style>

    <Style x:Key="Picker3DNarrowTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource Picker3DWideTitleStyle}">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontWeight" Value="Normal"/>
    </Style>

    <Style x:Key="Picker3DAutoSuggestBoxStyle" TargetType="TextBox">
        <Setter Property="BorderBrush" Value="{ThemeResource Picker3DSearchBoxBorder}" />
    </Style>
    
    <x:Double x:Key="Picker3DWideRowSpacing">18</x:Double>
    <x:Double x:Key="Picker3DNarrowRowSpacing">8</x:Double>

    <DataTemplate x:Key="Picker3DModelItemTemplate">
        <!-- In order to use StateTriggers in the VisualStateManager, the root element of a DataTemplate must be a UserControl -->
        <UserControl AutomationProperties.Name="{Binding Name}" AutomationProperties.AccessibilityView="Raw">
            <Grid
                BorderBrush="{ThemeResource Picker3DItemBorderBrush}"
                BorderThickness="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="IsAnimatedStates">
                        <VisualState x:Name="NotAnimated"/>
                        <VisualState x:Name="Animated">
                            <VisualState.StateTriggers>
                                <StateTrigger IsActive="{Binding IsAnimated, Mode=OneWay}"/>
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="AnimationIcon.Visibility" Value="Visible"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- Thumbnail -->
                <Grid Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid.Background>
                        <SolidColorBrush Color="{Binding ThumbnailBackplate}"/>
                    </Grid.Background>
                    <Border>
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.5, 0.0" EndPoint="0.5, 1.0">
                                <GradientStop Offset="0.0" Color="#30000000"/>
                                <GradientStop Offset="0.4" Color="#00000000"/>
                                <GradientStop Offset="0.6" Color="#00000000"/>
                                <GradientStop Offset="1.0" Color="#30000000"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <Image
                        Source="{Binding Thumbnail}"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Stretch="UniformToFill"
                        AutomationProperties.AccessibilityView="Raw"/>
                </Grid>

                <!-- Animation icon -->
                <Grid
                    x:Name="AnimationIcon"
                    Grid.Row="0"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Right"
                    Visibility="Collapsed">
                    <PathIcon
                        Data="M 0,0 H 48 V 48 Z"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Right"
                        AutomationProperties.AccessibilityView="Raw"
                        Foreground="{ThemeResource Picker3DIconBackgroundBrush}"/>
                    <PathIcon
                        VerticalAlignment="Top"
                        HorizontalAlignment="Right"
                        Data="{StaticResource Picker3DAnimationIconGeometry}"
                        Foreground="{ThemeResource Picker3DIconForegroundBrush}"
                        Margin="6,6"
                        AutomationProperties.AccessibilityView="Raw"/>
                </Grid>

                <!-- Model name -->
                <Border
                    Grid.Row="1"
                    MinHeight="{StaticResource Picker3DItemCaptionHeight}"
                    Padding="8,4"
                    Background="{ThemeResource Picker3DCaptionBackgroundBrush}">
                    <TextBlock
                        TextWrapping="Wrap"
                        VerticalAlignment="Center"
                        Text="{Binding Name}"
                        Foreground="{ThemeResource Picker3DCaptionForegroundBrush}"
                        AutomationProperties.AccessibilityView="Raw"/>
                </Border>
            </Grid>
        </UserControl>
    </DataTemplate>

    <DataTemplate x:Key="Picker3DCollectionItemTemplate">
        <Grid AutomationProperties.Name="{Binding Name}"
              AutomationProperties.AccessibilityView="Raw"
              BorderBrush="{ThemeResource Picker3DItemBorderBrush}"
              BorderThickness="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Thumbnail -->
            <Grid 
                AutomationProperties.AccessibilityView="Raw"
                Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.Background>
                    <SolidColorBrush Color="{Binding ThumbnailBackplate}"/>
                </Grid.Background>
                <Border>
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0.5, 0.0" EndPoint="0.5, 1.0">
                            <GradientStop Offset="0.0" Color="#30000000"/>
                            <GradientStop Offset="0.4" Color="#00000000"/>
                            <GradientStop Offset="0.6" Color="#00000000"/>
                            <GradientStop Offset="1.0" Color="#30000000"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Image
                    Source="{Binding Thumbnail}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Stretch="UniformToFill"
                    AutomationProperties.AccessibilityView="Raw"/>
            </Grid>

            <!-- Collection Name -->
            <Grid
                AutomationProperties.AccessibilityView="Raw"
                Grid.Row="1"
                MinHeight="{StaticResource Picker3DItemCaptionHeight}"
                ColumnSpacing="8"
                Padding="8,4"
                Background="{ThemeResource Picker3DCaptionBackgroundBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock
                    Grid.Column="0"
                    TextWrapping="Wrap"
                    VerticalAlignment="Center"
                    Foreground="{ThemeResource Picker3DCaptionForegroundBrush}"
                    AutomationProperties.AccessibilityView="Raw"
                    Text="{Binding Name}"/>
                <FontIcon
                    Grid.Column="1"
                    FontSize="16"
                    Glyph="&#xE76C;"
                    Foreground="{ThemeResource Picker3DCaptionForegroundBrush}"
                    FontFamily="{ThemeResource SymbolThemeFontFamily}"/>
            </Grid>
        </Grid>
    </DataTemplate>

    <Style TargetType="local:Picker3D">
        <Setter Property="Background" Value="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
        <Setter Property="AutomationProperties.AccessibilityView" Value="Raw"/>
        <Setter Property="MinWidth" Value="440"/>
        <Setter Property="MinHeight" Value="220"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="ModelItemTemplate" Value="{StaticResource Picker3DModelItemTemplate}"/>
        <Setter Property="CollectionItemTemplate" Value="{StaticResource Picker3DCollectionItemTemplate}"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid Margin="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="Picker3DLoadStates">
                                <VisualState x:Name="Picker3DLoading">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="LoadingCurtain"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0:0:0.0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingCurtain" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingProgressRing" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="true"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_BackButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="false"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Picker3DLoaded">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="LoadingCurtain"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0:0:0.5"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingCurtain" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingProgressRing" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="False"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_BackButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="true"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Picker3DLoadedEmpty">
                                    <VisualState.Setters>
                                        <Setter Target="NoItemsMessage.Visibility" Value="Visible"/>
                                    </VisualState.Setters>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="LoadingCurtain"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0:0:0.5"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingCurtain" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingProgressRing" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="False"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_BackButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="true"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Picker3DLoadFailed">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="LoadingCurtain"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0:0:0.5"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingCurtain" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoadingProgressRing" Storyboard.TargetProperty="IsActive">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="False"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ErrorOverlay" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_BackButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="true"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="Picker3DProviderStates">
                                <VisualState x:Name="ItemsProvider">
                                    <VisualState.Setters>
                                        <Setter Target="ItemsProviderRoot.Visibility" Value="Visible"/>
                                        <Setter Target="ErrorOverlayHeadroom.Height" Value="{ThemeResource NavigationBackButtonHeight}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="WebProvider">
                                    <VisualState.Setters>
                                        <Setter Target="WebProviderRoot.Visibility" Value="Visible"/>
                                        <Setter Target="ErrorOverlayHeadroom.Height" Value="0"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>

                            <VisualStateGroup x:Name="AdaptiveStates">
                                <VisualState x:Name="Wide"/>
                                <VisualState x:Name="Narrow">
                                    <VisualState.Setters>
                                        <Setter Target="PART_Title.Style" Value="{StaticResource Picker3DNarrowTitleStyle}"/>
                                        <Setter Target="ItemsProviderRoot.RowSpacing" Value="{StaticResource Picker3DNarrowRowSpacing}"/>
                                        <Setter Target="PART_PickerContentsView.DesiredItemWidth" Value="{StaticResource Picker3DNarrowDesiredItemWidth}"/>
                                        <Setter Target="PART_PickerContentsView.ItemContainerStyle" Value="{StaticResource Picker3DNarrowItemContainerStyle}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid x:Name="ContentRoot">
                            <!-- This zero-size control is used to inject announcements for narrator -->
                            <TextBlock 
                                x:Name="NarratorAnnouncement" 
                                Text="" 
                                AutomationProperties.LiveSetting="Assertive" 
                                Visibility="Collapsed" Height="0" Width="0"/>
                            
                            <Grid
                                x:Name="ItemsProviderRoot"
                                Visibility="Collapsed"
                                RowSpacing="{StaticResource Picker3DWideRowSpacing}"
                                Margin="{TemplateBinding Padding}"
                                Background="{TemplateBinding Background}">

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

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

                                <Border Grid.ColumnSpan="4" Grid.RowSpan="2"/>

                                <Button
                                    x:Name="PART_BackButton"
                                    x:Uid="/OnlineMediaComponent/Resources/BackButton"
                                    Grid.Row="0"
                                    Grid.Column="0"
                                    Style="{ThemeResource NavigationBackButtonNormalStyle}"/>

                                <Button
                                    x:Name="PART_HomeButton"
                                    x:Uid="/OnlineMediaComponent/Resources/HomeButton"
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Style="{ThemeResource NavigationBackButtonNormalStyle}"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    Content="&#xE80F;"/>

                                <TextBlock
                                    x:Name="PART_Title"
                                    Style="{StaticResource Picker3DWideTitleStyle}"
                                    Grid.Row="0"
                                    Grid.Column="2"/>

                                <Button
                                    x:Name="PART_CloseButton"
                                    x:Uid="/OnlineMediaComponent/Resources/CloseButton"
                                    Grid.Row="0"
                                    Grid.Column="3"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    Content="&#xE711;"
                                    Style="{ThemeResource NavigationBackButtonNormalStyle}"/>

                                <AutoSuggestBox
                                    x:Name="PART_SearchBox"
                                    x:Uid="/OnlineMediaComponent/Resources/SearchBox"
                                    TextBoxStyle="{StaticResource Picker3DAutoSuggestBoxStyle}"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="4"
                                    QueryIcon="Find"
                                    VerticalAlignment="Center"
                                    Margin="10,0"/>

                                <local:Picker3DGridView
                                    x:Name="PART_PickerContentsView"
                                    x:Uid="/OnlineMediaComponent/Resources/PickerContentsView"
                                    Grid.Row="2"
                                    Grid.ColumnSpan="6"
                                    SelectionMode="None"
                                    IsItemClickEnabled="True"
                                    AutomationProperties.LiveSetting="Assertive"
                                    DesiredItemWidth="{StaticResource Picker3DWideDesiredItemWidth}"
                                    ItemContainerStyle="{StaticResource Picker3DWideItemContainerStyle}"
                                    AdditionalItemHeight="48"/>

                                <Border 
                                    x:Name="LoadingCurtain" 
                                    Background="{TemplateBinding Background}" 
                                    Grid.Row="2" Grid.ColumnSpan="6"
                                    Visibility="Collapsed">
                                    <ProgressRing x:Name="LoadingProgressRing" IsActive="true" Width="64" Height="64"/>
                                </Border>

                                <Grid x:Name="NoItemsMessage" Grid.Row="2" Grid.ColumnSpan="6" Visibility="Collapsed">
                                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <TextBlock 
                                            x:Uid="/OnlineMediaComponent/Resources/NoItemsHeader" 
                                            Style="{ThemeResource HeaderTextBlockStyle}" 
                                            TextWrapping="WrapWholeWords"/>
                                        <TextBlock 
                                            x:Uid="/OnlineMediaComponent/Resources/NoItemsBody" 
                                            Style="{ThemeResource BodyTextBlockStyle}" 
                                            TextWrapping="WrapWholeWords"/>
                                    </StackPanel>
                                </Grid>
                            </Grid>

                            <Grid x:Name="WebProviderRoot" Visibility="Collapsed">
                                <WebView x:Name="PART_WebView"/>
                            </Grid>
                        </Grid>

                        <Grid x:Name="ErrorOverlay" Visibility="Collapsed">
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="ErrorOverlayHeadroom"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border Grid.Row="1" Background="{TemplateBinding Background}">
                                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <TextBlock
                                        x:Name="PART_ConnectionErrorHeader"
                                        x:Uid="/OnlineMediaComponent/Resources/ConnectionErrorHeader"
                                        Style="{ThemeResource HeaderTextBlockStyle}"
                                        TextWrapping="WrapWholeWords"/>
                                    <TextBlock
                                        x:Name="PART_ConnectionErrorBody"
                                        Style="{ThemeResource BodyTextBlockStyle}"
                                        TextWrapping="WrapWholeWords"/>
                                    <HyperlinkButton
                                        x:Name="PART_RetryConnectionButton"
                                        x:Uid="/OnlineMediaComponent/Resources/RetryConnectionButton"/>
                                </StackPanel>
                            </Border>
                        </Grid>


                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
