<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>

        <Style x:Key="A_Style_FrameworkElement_CarouselSelectionScale_Dynamic"
           TargetType="FrameworkElement">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding (Selector.IsSelected), RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                         Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                            <BeginStoryboard.Storyboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                            Value="1.03" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.0"
                                                            Value="1.03" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard.Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                            <BeginStoryboard.Storyboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                      Value="1.0"
                                                      EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                                          Value="1.0"
                                                          EasingFunction="{local:CircleEasing}" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard.Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>


        <System:Double x:Key="A_Double_ItemNameBlockHeight">40</System:Double>
        <local:MappingConverter x:Key="A_Converter_CustomisationItemTitleToThickness" Default="6,40,6,6">
            <local:MappingConverterEntry Key="{x:Null}" Value="6,6,6,6"/>
            <local:MappingConverterEntry Key="" Value="6,6,6,6"/>
        </local:MappingConverter>
        <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_FirstTickVisibility"
                                Default="{x:Static Visibility.Visible}">
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.Showboat}"
                                         Value="{x:Static Visibility.Collapsed}" />
        </local:MappingConverter>
        <local:MappingConverter x:Key="A_Converter_SecondTickVisibility"
                                Default="{x:Static Visibility.Collapsed}">
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.Showboat}"
                                         Value="{x:Static Visibility.Visible}" />
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.ShowboatAndVictory}"
                                         Value="{x:Static Visibility.Visible}" />
        </local:MappingConverter>

        <local:MappingConverter x:Key="A_Converter_FirstTickTextVisibility"
                                Default="{x:Static Visibility.Collapsed}">
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.Victory}"
                                         Value="{x:Static Visibility.Visible}" />
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.ShowboatAndVictory}"
                                         Value="{x:Static Visibility.Visible}" />
        </local:MappingConverter>
        <local:MappingConverter x:Key="A_Converter_SecondTickTextVisibility"
                                Default="{x:Static Visibility.Collapsed}">
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.Showboat}"
                                         Value="{x:Static Visibility.Visible}" />
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.ShowboatAndVictory}"
                                         Value="{x:Static Visibility.Visible}" />
        </local:MappingConverter>
        <local:MappingConverter x:Key="A_Converter_FirstTickOffset"
                                Default="0,0,0,0">
            <local:MappingConverterEntry Key="{x:Static local:CustomisationEquipState.ShowboatAndVictory}"
                                         Value="0,0,0,-5" />
        </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>

        <DataTemplate DataType="{x:Type local:CharacterCustomisationItem}">
            <DataTemplate.Resources>
                <Style x:Key="A_Style_FZMaterial_CharacterCustomisation_Icon" TargetType="local:FZMaterial">
                    <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="-22,0,0,0" />
                            <Setter Property="Stretch" Value="UniformToFill"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
                <Style x:Key="A_Style_FZMaterial_CharacterCustomisation_IconBorder" TargetType="local:FZMaterial">
                    <Setter Property="CaptureSubgraph" Value="False"/>
                    <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerBottomOnly}"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectedCategoryIndex, RelativeSource={RelativeSource AncestorType=Page} , Mode=OneWay}" Value="0">
                            <Setter Property="CaptureSubgraph" Value="True"/>
                            <Setter Property="Preset" Value="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </DataTemplate.Resources>
            <Grid>
                <Control x:Name="EmptyItemBg"
                         Style="{StaticResource A_Style_Control_Carousel_EmptyItemStyle_NoMargin}"
                         Visibility="Hidden"/>
                <Grid Margin="6"
                      x:Name="Internals">
                    <DockPanel>
                        <Decorator Height="40" DockPanel.Dock="Top" Visibility="{Binding Name, Converter={StaticResource A_StringVisConverter}}"/>
                        <Grid>
                            <local:FZMaterial Color="#f2f2f2"
                                              Style="{StaticResource A_Style_FZMaterial_CharacterCustomisation_IconBorder}"
                                              x:Name="ImageBg">
                                <Decorator ClipToBounds="True">
                                    <local:FZMaterial ImageSource="{Binding Image}" Style="{StaticResource A_Style_FZMaterial_CharacterCustomisation_Icon}"/>
                                </Decorator>
                            </local:FZMaterial>
                        </Grid>
                    </DockPanel>
                    <local:FZMaterial Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}"
                                      GreedyMeasure="True"
                                      VerticalAlignment="Top"
                                      Height="{Binding Name, Converter={StaticResource A_Converter_CustomisationItemTitleToHeight}}"
                                      Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerTopOnly}"
                                      x:Name="Border"/>
                    <Grid HorizontalAlignment="Right"
                          VerticalAlignment="Bottom"
                          x:Name="Icons">
                        <Grid x:Name="Locked"
                              Visibility="Collapsed">
                            <local:FZMaterial Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}"
                                              Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}" />
                            <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Anthem/Icons/Locked_Icon.png"
                                              Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                              Width="32"
                                              Height="32" />
                        </Grid>
                        <Grid Visibility="Collapsed"
                              x:Name="Equipped">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <local:FZMaterial Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                              Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}"
                                              Height="37"
                                              Grid.Row="0"
                                              HorizontalAlignment="Right"
                                              Margin="{Binding EquipState, Converter={StaticResource A_Converter_FirstTickOffset}}"
                                              Visibility="{Binding EquipState, Converter={StaticResource A_Converter_FirstTickVisibility}}">
                                <StackPanel Orientation="Horizontal">
                                    <local:FZTextBlock Text="{Binding Source={local:Loc MyProfile.IDS_EmoteSlot_Victory}, Converter={StaticResource A_StringToUpper}}"
                                                       CapHeight="14"
                                                       Margin="10,0,0,0"
                                                       Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                                       Color="#fff"
                                                       VerticalAlignment="Center"
                                                       Effect="{StaticResource A_Effect_HighContrastModeDropShadow}"
                                                       Visibility="{Binding EquipState, Converter={StaticResource A_Converter_FirstTickTextVisibility}}" />
                                    <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Data_Bound/Event_Blueprint/Played_Tick.png"
                                                      Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                                      Stretch="Uniform"
                                                      Width="24"
                                                      Height="24"
                                                      Margin="7,-3,7,0"
                                                      Grid.Row="0"
                                                      Visibility="{Binding EquipState, Converter={StaticResource A_Converter_FirstTickVisibility}}" />
                                </StackPanel>
                            </local:FZMaterial>
                            <local:FZMaterial Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                              Height="37"
                                              Color="{Binding Rarity, Converter={StaticResource A_Converter_RarityToColor}}"
                                              Grid.Row="1"
                                              HorizontalAlignment="Right"
                                              Visibility="{Binding EquipState, Converter={StaticResource A_Converter_SecondTickVisibility}}">
                                <StackPanel Orientation="Horizontal">
                                    <local:FZTextBlock Text="{Binding Source={local:Loc MyProfile.IDS_EmoteSlot_Showboat}, Converter={StaticResource A_StringToUpper}}"
                                                       CapHeight="14"
                                                       Margin="10,0,0,0"
                                                       Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                                       Color="#fff"
                                                       VerticalAlignment="Center"
                                                       Effect="{StaticResource A_Effect_HighContrastModeDropShadow}"
                                                       Visibility="{Binding EquipState, Converter={StaticResource A_Converter_SecondTickTextVisibility}}" />
                                    <local:FZMaterial ImageSource="/ForzaUI;component/Textures/Data_Bound/Event_Blueprint/Played_Tick.png"
                                                      Preset="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                                      Stretch="Uniform"
                                                      Width="24"
                                                      Height="24"
                                                      Margin="7,-3,7,0"
                                                      Grid.Row="0"
                                                      Visibility="{Binding EquipState, Converter={StaticResource A_Converter_SecondTickVisibility}}" />
                                </StackPanel>

                            </local:FZMaterial>
                        </Grid>
                        <ContentControl Style="{StaticResource A_Style_MarketplaceBlammo}"
                                        Tag="{x:Static local:MarketplaceBlammoType.New}"
                                        Content="{local:Loc local:InGame.IDS_New}"
                                        Visibility="Collapsed"
                                        x:Name="New" />
                    </Grid>
                    <Grid Height="40"
                          VerticalAlignment="Top"
                          Margin="6,0">
                        <local:FZTextBlock Text="{Binding Name, Converter={StaticResource A_StringToUpper}}"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center"
                                           StretchDirection="DownOnly"
                                           Style="{StaticResource A_Style_FZTextBlock_HorizonA}"
                                           Effect="{StaticResource A_Effect_HighContrastModeDropShadow}"
                                           Color="#fff"
                                           CapHeight="16"/>
                    </Grid>
                </Grid>
            </Grid>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.New}">
                    <Setter TargetName="New" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.Equipped}">
                    <Setter TargetName="Equipped" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="Border" Property="Height" Value="208"/>
                    <Setter TargetName="Border" Property="Preset">
                        <Setter.Value>
                            <local:FZMaterialPresetRoundtangleStroke BasedOn="{StaticResource A_FZMaterialPresetRoundtangle_FlatPanel_InnerAll}"
                                                                     Thickness="{Binding Name, Converter={StaticResource A_Converter_CustomisationItemTitleToThickness}}"/>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding State}" Value="{x:Static local:CustomisationItemState.Locked}">
                    <Setter TargetName="Locked" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="EmptyItemBg" Property="Visibility" Value="{x:Static Visibility.Visible}" />
                    <Setter TargetName="ImageBg" Property="Color" Value="#00ffffff" />
                    <Setter TargetName="Internals" Property="Opacity" Value="0.8" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <Style x:Key="A_Style_Dynamic_FZTextBlock_TextTabMenu"
               TargetType="local:FZTextBlock"
               BasedOn="{StaticResource A_Style_Dynamic_FZTextBlock_TextTabMenu}">
            <Setter Property="Text"
                    Value="{Binding Title, Converter={StaticResource A_StringToUpper}}" />
            <Setter Property="TextAlignment"
                    Value="Center" />
        </Style>

        <local:MappingConverter x:Key="A_Converter_CustomisationItemWidth"
                                Default="225">
            <local:MappingConverterEntry Key="0"
                                         Value="180" />
        </local:MappingConverter>

        <Style x:Key="A_Style_TabBarItemContainer"
               TargetType="ContentControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style TargetType="{x:Type local:ItemsSelector}"
               x:Key="A_Style_TabBar">
            <Setter Property="FocusVisualStyle"
                    Value="{StaticResource A_Style_BlankVisualStyle}" />
            <Setter Property="Height"
                    Value="{StaticResource A_Double_Size_TabMenuItemHeight}" />
            <Setter Property="ItemTemplate"
                    Value="{StaticResource A_DataTemplate_ListItem_TextTabMenu}" />
            <Setter Property="ItemContainerStyle"
                    Value="{StaticResource A_Style_TabBarItemContainer}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <local:VirtualizingScrollPanel Style="{StaticResource A_Style_VirtualizingScrollPanel_MotionBlurScrollPanel_TabTitle}"
                                                           ItemHeight="{StaticResource A_Double_Size_TabMenuItemHeight}"
                                                           ItemWidth="184.25"
                                                           Padding="184.25,0,0,0"
                                                           VerticalAlignment="Center"
                                                           Margin="79,0" />
                            <local:FZButton HorizontalAlignment="Right"
                                            Style="{StaticResource A_Style_Button_TabTitleRB_CarSelect}"
                                            Command="{Binding ScrollPageNextCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                            IsEnabled="{Binding CanSelectNext, RelativeSource={RelativeSource TemplatedParent}}" />
                            <local:FZButton HorizontalAlignment="Left"
                                            Style="{StaticResource A_Style_Button_TabTitleLB_CarSelect}"
                                            Command="{Binding ScrollPagePrevCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                            IsEnabled="{Binding CanSelectPrev, RelativeSource={RelativeSource TemplatedParent}}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Thickness x:Key="A_Thickness_ShadowMargin_Dynamic">-16</Thickness>

        <ControlTemplate x:Key="A_ControlTemplate_Carousel_Default_NoBlendFromPreviousOutput"
                     TargetType="{x:Type local:WrapListBox}">
            <ControlTemplate.Resources>
                <Style x:Key="A_Style_Control_Carousel_EmptyItemStyle_Dynamic"
                   BasedOn="{StaticResource A_Style_Control_Carousel_EmptyItemStyle}"
                   TargetType="Control" />

                <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="{DynamicResource A_Style_Control_Carousel_EmptyItemStyle_Dynamic}"
                                                     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>

    </Page.Resources>

    <Grid>
        <!-- Bars -->
        <local:PlayerBarControl x:Name="TopBar"
                                Style="{StaticResource A_Style_PlayerBarControl}" />
        <ContentControl x:Name="BottomBar"
                        Style="{StaticResource A_Style_ButtonBar}">
            <local:ControllerButtonPanel x:Name="HelpPanel"
                                         Layout="RightToLeft"
                                         HorizontalAlignment="Left"
                                         VerticalAlignment="Bottom"
                                         Background="{x:Null}">
            </local: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}}"
                                local:BindingProxy.A="/ForzaUI;component/Textures/Anthem/Icons/Titles/CharacterCustomisation.png"
                                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}}"/>
                    <local:ItemsSelector SelectedItem="{Binding SelectedCategory, Mode=TwoWay}"
                                         SelectedIndex="{Binding SelectedCategoryIndex, Mode=TwoWay}"
                                         Style="{StaticResource A_Style_TabBar}"
                                         WrapSelection="True"
                                         Focusable="False"
                                         ItemsSource="{Binding Categories}"
                                         PageSize="1"
                                         Width="895"
                                         x:Name="TabBar"
                                         HorizontalAlignment="Left" 
                                         Visibility="{Binding Categories.Count, Converter={StaticResource A_Converter_Categories_CountToVisibility}, FallbackValue=Collapsed}"/>

                    <Decorator Height="13" Visibility="{Binding Categories.Count, Converter={StaticResource A_Converter_Categories_CountToVisibility}, FallbackValue=Collapsed}"/>

                    <StackPanel Orientation="Horizontal">
                        <local:WrapListBox x:Name="Menu"
                                           Focusable="False"
                                           Width="900"
                                           Height="675"
                                           AllowMouseWheelScrolling="False"
                                           OverrideAcrossNavigation="True"
                                           Template="{StaticResource A_ControlTemplate_Carousel_Default_NoBlendFromPreviousOutput}"
                                           ScrollOrientation="Vertical"
                                           WrapSelection="True"
                                           ItemWidth="{Binding SelectedCategoryIndex, Mode=OneWay, Converter={StaticResource A_Converter_CustomisationItemWidth}}"
                                           ItemHeight="225"
                                           PageSize="8"
                                           SelectionLimitTop="0"
                                           SelectionLimitBottom="0"
                                           ItemContainerStyle="{StaticResource A_Style_ContentControl_Carousel_ContainerStyle_HitTestable}"
                                           ItemsSource="{Binding SelectedItem.Items, 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>
