<Page x:Class="ForzaUI.A_CharacterCustomisation"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      mc:Ignorable="d"
      xmlns:local="clr-namespace:ForzaUI;assembly="
      Style="{StaticResource A_Style_Page_Generic}"
      DataContext="{Binding RelativeSource={RelativeSource Self}}">

    <local:UIPageTransitionManager.TransitionManager>
        <local:UIPageTransitionManager Preset="{StaticResource A_UIPageTransitionManagerPreset_Menu}"/>
    </local:UIPageTransitionManager.TransitionManager>

    <Page.Resources>

        <CornerRadius x:Key="A_CornerRadius_Dynamic_CarouselTile">3</CornerRadius>


        <System:Double x:Key="A_Double_ItemNameBlockHeight">40</System:Double>
        <local:MappingConverter x:Key="A_Converter_CustomisationItemTitleToHeight" Default="{StaticResource A_Double_ItemNameBlockHeight}">
            <local:MappingConverterEntry Key="{x:Null}" Value="0"/>
            <local:MappingConverterEntry Key="" Value="0"/>
        </local:MappingConverter>

        <local:MappingConverter x:Key="A_Converter_IsIEToTitle" Default="{StaticResource A_Double_ItemNameBlockHeight}">
            <local:MappingConverterEntry Key="False" Value="{local:Loc ScreenTitles.IDS_CustomizeCharacter}"/>
            <local:MappingConverterEntry Key="True" Value="{local:Loc ScreenTitles.IDS_SelectCharacter}"/>
        </local:MappingConverter>

        <local:MappingConverter x:Key="A_Converter_RarityToColor_Custom" Default="#00FFFFFF">
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Common}" Value="{StaticResource A_Color_Rarity_Common}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Rare}" Value="{StaticResource A_Color_Rarity_Rare}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Epic}" Value="{StaticResource A_Color_Rarity_Epic}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Legendary}" Value="{StaticResource A_Color_Rarity_Legendary}" />
        </local:MappingConverter>

        <BitmapImage x:Key="A_BitmapImage_RarityBg_Common" UriSource="game:\Media\UI\Textures\Data_Bound\CharacterCustomisation\Common.png"/>
        <BitmapImage x:Key="A_BitmapImage_RarityBg_Rare" UriSource="game:\Media\UI\Textures\Data_Bound\CharacterCustomisation\Rare.png"/>
        <BitmapImage x:Key="A_BitmapImage_RarityBg_Epic" UriSource="game:\Media\UI\Textures\Data_Bound\CharacterCustomisation\Epic.png"/>
        <BitmapImage x:Key="A_BitmapImage_RarityBg_Legendary" UriSource="game:\Media\UI\Textures\Data_Bound\CharacterCustomisation\Legendary.png"/>
        <local:MappingConverter x:Key="A_Converter_RarityToBgImage" Default="{StaticResource A_BitmapImage_RarityBg_Common}">
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Common}" Value="{StaticResource A_BitmapImage_RarityBg_Common}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Rare}" Value="{StaticResource A_BitmapImage_RarityBg_Rare}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Epic}" Value="{StaticResource A_BitmapImage_RarityBg_Epic}" />
            <local:MappingConverterEntry Key="{x:Static local:XAMLRarity.Legendary}" Value="{StaticResource A_BitmapImage_RarityBg_Legendary}" />
        </local:MappingConverter>

        <Style x:Key="H_Style_ContainerItem_Background" TargetType="FZMaterial">
            <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
            <Setter Property="Preset" Value="{Roundtangle CornerRadius=3}" />
        </Style>

        <Style x:Key="H_Style_ContentControl_CustomisationItem_ContainerStyle" TargetType="ContentControl"
           BasedOn="{StaticResource H_Style_ContentControl_Carousel_ContainerStyle}">
                <Style.Resources>
                    <CornerRadius x:Key="A_StrokeHighlight_ContentRadius">3</CornerRadius>
                </Style.Resources>
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem Name="ItemBackgroundStyle" DataType="{Type Style}"
                                         Value="{StaticResource H_Style_ContainerItem_Background}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>

        <BitmapImage x:Key="A_BitmapImage_SelectableEmoteType_Showboat" UriSource="/ForzaUI;component/Textures/Data_Bound/CharacterCustomisation/showboat.png"/>
        <BitmapImage x:Key="A_BitmapImage_SelectableEmoteType_Victory" UriSource="/ForzaUI;component/Textures/Data_Bound/CharacterCustomisation/victory.png"/>
        <BitmapImage x:Key="A_BitmapImage_SelectableEmoteType_GarageCustom" UriSource="/ForzaUI;component/Textures/Data_Bound/CharacterCustomisation/garage.png"/>
        <MappingConverter x:Key="A_MappingConverter_SelectableEmoteTypeToImageSource" CheckEnumKey="UISelectableEmoteType" >
            <MappingConverterEntry Key="{x:Static UISelectableEmoteType.Showboat}" Value="{StaticResource A_BitmapImage_SelectableEmoteType_Showboat}"/>
            <MappingConverterEntry Key="{x:Static UISelectableEmoteType.Victory}" Value="{StaticResource A_BitmapImage_SelectableEmoteType_Victory}"/>
            <MappingConverterEntry Key="{x:Static UISelectableEmoteType.GarageCustom}" Value="{StaticResource A_BitmapImage_SelectableEmoteType_GarageCustom}"/>
        </MappingConverter>

        <DataTemplate x:Key="A_DataTemplate_EmoteEquipState">
            <FZMaterial x:Name="EmoteEquipStateBackground"
                        Color="{StaticResource H_Color_Primary_Green}"
                        Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll2px}"
                        Height="28"
                        Width="28"
                        Margin="2,0">
                <FZMaterial x:Name="EquipIcon"
                            ImageSource="{Binding SelectableEmoteType, Converter={StaticResource A_MappingConverter_SelectableEmoteTypeToImageSource}}"
                            Width="28"
                            Height="28"
                            Color="{StaticResource H_Color_Primary_Black}"/>
            </FZMaterial>
        </DataTemplate>

        <DataTemplate x:Key="A_DataTemplate_CharacterCustomisationItem" DataType="{x:Type local:CharacterCustomisationItem}">
            <DataTemplate.Resources>
                <Style x:Key="A_Style_FZMaterial_CharacterCustomisation_Icon" TargetType="local:FZMaterial">
                    <Setter Property="Visibility" Value="{Binding Downloaded, RelativeSource={RelativeSource Self}, Converter={FZBooleanToVisibilityConverter}}"/>
                    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                    <Setter Property="Stretch" Value="Uniform"/>
                    <Setter Property="Margin" Value="5,5,5,5"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectedCategoryIndex, RelativeSource={RelativeSource AncestorType=Page} , Mode=OneWay}" Value="0">
                            <Setter Property="Margin" Value="0,0,0,0" />
                            <Setter Property="Stretch" Value="UniformToFill"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataTemplate.Resources>
            <Grid>
                <local:FZMaterial x:Name="EmptyItemBg"
                    Preset="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterAll3px}"
                    Color="{StaticResource H_Color_Glass_Purple_20pc}"
                    Visibility="Hidden"/>
                <Grid Margin="6"
                      x:Name="Internals">
                    <local:FZMaterial x:Name="ImageBg"
                        ImageSource="{Binding Rarity, Converter={StaticResource A_Converter_RarityToBgImage}, FallbackValue={StaticResource A_BitmapImage_RarityBg_Common}}">
                        <Grid>
                            <Decorator ClipToBounds="True">
                                <local:FZMaterial ImageSource="{Binding Image}" Style="{StaticResource A_Style_FZMaterial_CharacterCustomisation_Icon}"
                                                  x:Name="ItemImage"/>
                            </Decorator>
                            <local:FZTextBlock Text="{Binding Name, Converter={StaticResource A_StringToUpper}}"
                                               Visibility="Collapsed"
                                               CapHeight="23"
                                               FontFamily="Horizon_A"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Color="{StaticResource H_Color_Primary_Pink}"
                                               x:Name="ItemImageDesc"/>
                        </Grid>
                    </local:FZMaterial>
                    <Grid x:Name="ItemName"
                          Margin="2,4,2,0"
                          VerticalAlignment="Top"
                          Visibility="Collapsed"
                          ScreenReader.Event="OnChange"
                          ScreenReader.ControlType="Button"
                          ScreenReader.LineType="SelectedItem"
                          ScreenReader.SelectedNumber="{Binding (VirtualizingWrapPanel.ItemIndex), FallbackValue=0, RelativeSource={RelativeSource AncestorType={Type ListBoxItem}}, Converter={StaticResource A_IndexToNumberConverter}}"
                          ScreenReader.SelectedCount="{Binding Items.Count, FallbackValue=0, RelativeSource={RelativeSource AncestorType={Type Selector}}}">
                        <local:FZMaterial Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll1px}"
                                          Color="{StaticResource H_Color_Primary_Black}"
                                          Height="28">
                            <Grid ClipToBounds="True" 
                                  Margin="9,0">
                                <FZTextBlock x:Name="ItemNameText"
                                             Text="{Binding Name, Converter={StaticResource A_StringToUpper}}"
                                             CapHeight="14"
                                             Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                             VerticalAlignment="Center"
                                             Stretch="None"
                                             Color="{StaticResource H_Color_Primary_White}"
                                             AutoScroll="{StaticResource H_AutoScrollSettings_Horizontal_Title}"
                                             AutoScroll.AllowScrolling="False"
                                             TextTrimming="CharacterEllipsis"
                                             Effect="{StaticResource A_Effect_HighContrastModeDropShadow}"/>
                            </Grid>
                        </local:FZMaterial>
                    </Grid>

                    <StackPanel VerticalAlignment="Bottom">
                        <ItemsControl ItemsSource="{Binding EquipStates}"
                                      ItemTemplate="{StaticResource A_DataTemplate_EmoteEquipState}"
                                      HorizontalAlignment="Right"
                                      Margin="0,0,2,0">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"  IsItemsHost="True"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                        <ContentControl x:Name="Cost"
                                        Style="{StaticResource A_Style_Marketplace_Credits_Breadcrumb}"
                                        Content="{Binding Cost}"
                                        Visibility="Collapsed"
                                        HorizontalAlignment="Right"
                                        DockPanel.Dock="Right"
                                        Margin="0,0,4,0"/>
                        <Grid x:Name="Icons" HorizontalAlignment="Stretch">
                            <DockPanel Margin="4,4">
                                <Grid x:Name="Locked"
                                      Visibility="Collapsed"
                                      Height="28"
                                      MinWidth="28"
                                      DockPanel.Dock="Right"
                                      HorizontalAlignment="Right"
                                      Margin="4,0,0,0">
                                    <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Locked_Icon.png"
                                                      Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll1px}"
                                                      HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"
                                                      Width="22.75"
                                                      Height="28"
                                                      Color="{StaticResource H_Color_Primary_White}"/>
                                </Grid>
                                <local:FZMaterial Color="{StaticResource H_Color_Primary_White}"
                                                  Height="28"
                                                  Width="28"
                                                  HorizontalAlignment="Right"
                                                  Margin="4,0,0,0"
                                                  ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Equipped_Icon.png"
                                                  Visibility="Collapsed"
                                                  DockPanel.Dock="Right"
                                                  x:Name="Equipped"/>
                                <local:FZMaterial Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor_Custom}}"
                                                  GreedyMeasure="True"
                                                  VerticalAlignment="Bottom"
                                                  Height="28"
                                                  Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_OuterAll2px}"
                                                  x:Name="Rarity">
                                    <local:FZTextBlock Text="{Binding Rarity, Converter={StaticResource A_Converter_RarityToNameString}}"
                                                       VerticalAlignment="Center"
                                                       HorizontalAlignment="Left"
                                                       StretchDirection="DownOnly"
                                                       Margin="9,0"
                                                       Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                                       Effect="{StaticResource A_Effect_HighContrastModeDropShadow}"
                                                       Color="#fff"
                                                       CapHeight="14"/>
                                </local:FZMaterial>
                            </DockPanel>
                            <ContentControl Style="{StaticResource A_Style_MarketplaceBlammo}"
                                        Tag="{x:Static local:MarketplaceBlammoType.New}"
                                        Content="{local:Loc InGame.IDS_New}"
                                        Visibility="Collapsed"
                                        Margin="4"
                                        x:Name="New" />
                        </Grid>
                        
                    </StackPanel>
                </Grid>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                    <Setter TargetName="ItemName" Property="Visibility" Value="{Binding Name, Converter={StaticResource A_StringVisConverter}}" />
                    <Setter TargetName="ItemName" Property="ScreenReader.Line" Value="{Loc Main.IDS_ScreenReader_VoicedLineSeparator}"/>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True"/>
                        <Condition Binding="{Binding Name, Converter={StaticResource A_StringVisConverter}}" Value="{Static Visibility.Visible}"/>
                    </MultiDataTrigger.Conditions>
                    <Setter TargetName="ItemName" Property="ScreenReader.Line" Value="{Binding Name}"/>
                    <Setter TargetName="ItemNameText" Property="AutoScroll.AllowScrolling" Value="True"/>
                    <Setter TargetName="ItemNameText" Property="TextTrimming" Value="None"/>
                </MultiDataTrigger>
                <DataTrigger Binding="{Binding Image, Converter={StaticResource A_StringVisConverter}}" Value="{Static Visibility.Collapsed}">
                    <Setter TargetName="ItemName" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="ItemImage" Property="Visibility" Value="Collapsed" />
                    <Setter TargetName="ItemImageDesc" Property="Visibility" Value="Visible" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.New}">
                    <Setter TargetName="New" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="Rarity" Property="Visibility" Value="{x:Static Visibility.Collapsed}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding SelectedCategoryIndex, RelativeSource={RelativeSource AncestorType=Page}}" Value="0">
                    <Setter TargetName="Rarity" Property="Visibility" Value="{x:Static Visibility.Collapsed}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.Locked}">
                    <Setter TargetName="EmptyItemBg" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="ImageBg" Property="Color" Value="#00ffffff"/>
                    <Setter TargetName="Cost" Property="Visibility" Value="{Binding Cost, Converter={StaticResource H_VisibleIfGreaterThanZero}}"/>
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.Locked}"/>
                        <Condition Binding="{Binding Cost, Converter={StaticResource A_CompareConverter}, ConverterParameter=0.5}" 
                                   Value="{x:Static local:CompareResult.LessThan}"/>
                    </MultiDataTrigger.Conditions>
                    <Setter TargetName="Locked" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="ItemImage" Property="Color" Value="#40FFFFFF"/>
                </MultiDataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.Equipped}"/>
                        <Condition Binding="{Binding EquipStates.Count, FallbackValue=0}" Value="0"/>
                    </MultiDataTrigger.Conditions>
                    <Setter TargetName="Equipped" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                </MultiDataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>


        <Thickness x:Key="A_Thickness_ShadowMargin_Dynamic">-16</Thickness>

        <ControlTemplate x:Key="A_Template_Control_Carousel_EmptyItemStyle_Custom"  TargetType="Control">
            <FZMaterial Preset="{StaticResource A_FZMaterialPresetGlassRoundtangle_GlassPanel_OuterAll3px}"
                    Color="{StaticResource H_Color_Glass_Purple_20pc}" />
        </ControlTemplate>

        <Style x:Key="A_Style_Control_Carousel_EmptyItemStyle_Characters"
           BasedOn="{StaticResource A_Style_Control_Carousel_EmptyItemStyle}"
           TargetType="Control" >
            <Setter Property="Template" Value="{StaticResource A_Template_Control_Carousel_EmptyItemStyle_Custom}">
            </Setter>
        </Style>

        <ControlTemplate x:Key="A_ControlTemplate_Carousel_Default_NoBlendFromPreviousOutput"
                     TargetType="{x:Type local:WrapListBox}">
            <ControlTemplate.Resources>

                <Style x:Key="A_Style_FZMaterial_ShadowBase_Dynamic"
                    TargetType="local:FZMaterial"
                    BasedOn="{StaticResource A_Style_FZMaterial_ShadowBase_Dynamic}">
                    <Setter Property="Preset">
                        <Setter.Value>
                            <local:FZMaterialPresetRoundtangle Softness="20" CornerRadius="25" AlphaMode="MultiplyInvColorOnly" Unlit="True" />
                        </Setter.Value>
                    </Setter>
                </Style>
            </ControlTemplate.Resources>
            <Grid Margin="-60">
                <Grid Effect="{StaticResource A_MotionBlurEffect}"
                  local:MotionBlurEffect.MotionBlurPositionXControl="{Binding Path=(local:BindingProxy.A), ElementName=VirtualizingWrapPanel}"
                  local:MotionBlurEffect.MotionBlurPositionYControl="{Binding Path=(local:BindingProxy.B), ElementName=VirtualizingWrapPanel}"
                  ClipToBounds="True"
                  x:Name="MotionBlur">
                    <Decorator Margin="40"
                            ClipToBounds="True">
                        <Grid Margin="20"
                            ClipToBounds="True"
                            x:Name="ScrollClipper">
                            <local:VirtualizingWrapPanel IsItemsHost="True"
                                                     KeyboardNavigation.DirectionalNavigation="Contained"
                                                     OverrideAcrossNavigation="{TemplateBinding OverrideAcrossNavigation}"
                                                     ScrollOrientation="{TemplateBinding ScrollOrientation}"
                                                     Margin="0"
                                                     Style="{DynamicResource A_VirtualizingWrapPanel_Default_Dynamic}"
                                                     ItemWidth="{TemplateBinding ItemWidth}"
                                                     ItemHeight="{TemplateBinding ItemHeight}"
                                                     EmptyItemStyle="{TemplateBinding EmptyItemStyle}"
                                                     SeparatorItemStyle="{StaticResource A_Style_Separator_CarouselItem}"
                                                     local:BlendValue.ShouldSkipInitialInputChange="True"
                                                     local:BlendValue.BlendFromPreviousOutput="False"
                                                     SelectionLimitTop="{TemplateBinding SelectionLimitTop}"
                                                     SelectionLimitBottom="{TemplateBinding SelectionLimitBottom}"
                                                     ScrollWindowMin="{Binding ScrollWindowMin, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWayToSource}"
                                                     ScrollWindowMax="{Binding ScrollWindowMax, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWayToSource}"
                                                     ScrollWindowSize="{Binding ScrollWindowSize, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWayToSource}"
                                                     ScrollWindowValue="{Binding ScrollWindowValue, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                     x:Name="VirtualizingWrapPanel" />
                        </Grid>
                    </Decorator>
                </Grid>
            </Grid>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding (local:MaxValue.Result), ElementName=VirtualizingWrapPanel}" Value="0">
                    <Setter Property="Effect" TargetName="MotionBlur" Value="{x:Null}"/>
                </DataTrigger>

                </ControlTemplate.Triggers>
        </ControlTemplate>



        <Style x:Key="H_Style_Button_NextButtonCategory" BasedOn="{StaticResource H_Style_TabButton_Next}" TargetType="{Type FZButton}">
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem
                        Name="MouseRolloverCornerRadius"
                        DataType="CornerRadius"
                        Value="0,1,1,0" />
                        <DynamicDataItem
                        Name="TabArrowPath"
                        DataType="String"
                        Value="/ForzaUI;component/Textures/Anthem/Icons/scroll_page_arrow_right_small.png" />
                        <DynamicDataItem Name="IsControllerVisualsDisabled"
                                     DataType="Boolean"
                                     Value="{Binding IsIE}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="H_Style_Button_PreviousButtonCategory" BasedOn="{StaticResource H_Style_TabButton_Previous}" TargetType="{Type FZButton}">
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem Name="MouseRolloverCornerRadius"
                                         DataType="CornerRadius"
                                         Value="1,0,0,1" />
                        <DynamicDataItem Name="TabArrowPath"
                                         DataType="String"
                                         Value="/ForzaUI;component/Textures/Anthem/Icons/scroll_page_arrow_left_small.png" />
                        <DynamicDataItem Name="IsControllerVisualsDisabled"
                                         DataType="Boolean"
                                         Value="{Binding IsIE}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="H_Style_TabBar_Customisation" BasedOn="{StaticResource H_Style_TabBar}" TargetType="FZTabButtonsSelector">
            <Setter Property="DynamicData.Data">
                <Setter.Value>
                    <DynamicDataSource>
                        <DynamicDataItem Name="NextButtonSyle"
                                        DataType="Style"
                                        Value="{StaticResource H_Style_Button_NextButtonCategory}" />
                        <DynamicDataItem Name="PreviousButtonSyle"
                                        DataType="Style"
                                        Value="{StaticResource H_Style_Button_PreviousButtonCategory}" />
                    </DynamicDataSource>
                </Setter.Value>
            </Setter>
        </Style>

    </Page.Resources>

    <Grid>
        <!-- Bars -->
        <local:PlayerBarControl x:Name="TopBar"
                                Style="{StaticResource A_Style_PlayerBarControl}"
                                ShowPlayerAndCarInfo="False"
                                Visibility="{Binding IsIE, Converter={StaticResource A_FZBooleanToVisibilityConverter_UseHidden_Inverse}, RelativeSource={RelativeSource AncestorType=Page}}"/>
        <ContentControl x:Name="BottomBar"
                        Style="{StaticResource A_Style_ButtonBar}">
            <ControllerButtonPanel x:Name="PART_HelpPanel"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Bottom"
                                         Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
            </ControllerButtonPanel>
        </ContentControl>

        <Grid Style="{StaticResource A_Style_FrameworkElement_LayoutRoot}">
            <StackPanel x:Name="MainContent"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Margin="77,0,0,0"
                        Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}">

                <ContentControl Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}"
                                Content="{Binding IsIE, Converter={StaticResource A_Converter_IsIEToTitle}}"
                                HorizontalAlignment="Left"/>
                <StackPanel local:RoutedEventCommand.Action="{Binding ElementName=MouseEnterRoutedEventCommand}"
                            local:RoutedEventCommand.Action2="{Binding ElementName=MouseLeaveRoutedEventCommand}">
                    <local:RoutedEventCommand x:Name="MouseEnterRoutedEventCommand"
                                              RoutedEvent="UIElement.MouseEnter"
                                              Command="{Binding DisableCameraFocus, RelativeSource={RelativeSource AncestorType=Page}}"/>
                    <local:RoutedEventCommand x:Name="MouseLeaveRoutedEventCommand"
                                              RoutedEvent="UIElement.MouseLeave"
                                              Command="{Binding EnableCameraFocus, RelativeSource={RelativeSource AncestorType=Page}}"/>
                    <FZTabButtonsSelector
                        SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
                        SelectedIndex="{Binding SelectedCategoryIndex, Mode=TwoWay}"
                        Style="{StaticResource H_Style_TabBar_Customisation}"
                        WrapSelection="True"
                        ItemsSource="{Binding Categories}"
                        Width="895"
                        HorizontalAlignment="Left"
                        x:Name="TabBar">
                    </FZTabButtonsSelector>


                    <StackPanel Orientation="Horizontal">
                        <local:WrapListBox x:Name="Menu"
                                           Focusable="False"
                                           Width="908"
                                           Height="777"
                                           AllowMouseWheelScrolling="False"
                                           OverrideAcrossNavigation="True"
                                           Template="{StaticResource A_ControlTemplate_Carousel_Default_NoBlendFromPreviousOutput}"
                                           ItemTemplate="{StaticResource A_DataTemplate_CharacterCustomisationItem}"
                                           ScrollOrientation="Vertical"
                                           WrapSelection="True"
                                           ItemWidth="227"
                                           ItemHeight="259"
                                           PageSize="8"
                                           SelectionLimitTop="0"
                                           SelectionLimitBottom="0"
                                           ItemContainerStyle="{StaticResource H_Style_ContentControl_CustomisationItem_ContainerStyle}"
                                           EmptyItemStyle="{StaticResource A_Style_Control_Carousel_EmptyItemStyle_Characters}"
                                           ItemsSource="{Binding SelectedItem.ItemsView, ElementName=TabBar}"
                                           SelectedItem="{Binding SelectedItem.SelectedItem, ElementName=TabBar, Mode=TwoWay}"
                                           local:FocusOnPageFocusGained.SelectorSelectedItem="True"
                                           Margin="0,0,-5,-5" 
                                           Panel.ZIndex="1" />
                        <ScrollBar Style="{StaticResource A_Style_ScrollBar_Default}"
                                   Margin="5,0,0,0"
                                   Minimum="{Binding ScrollWindowMin, ElementName=Menu}"
                                   Maximum="{Binding ScrollWindowMax, ElementName=Menu}"
                                   Value="{Binding ScrollWindowValue, ElementName=Menu, Mode=TwoWay}"
                                   ViewportSize="{Binding ScrollWindowSize, ElementName=Menu}" />
                    </StackPanel>

                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</Page>
