<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ForzaUI"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d"
    x:Class="ForzaUI.DVRControls"
    x:Name="UserControl">


    <UserControl.Resources>
        <ResourceDictionary>

            <System:Double x:Key="A_Double_ReplayIcon_Width">66</System:Double>
            <System:Double x:Key="A_Double_ReplayIcon_Height">66</System:Double>
            <System:Double x:Key="A_Double_ReplayIcon_HalfWidth">33</System:Double>
            <System:Double x:Key="A_Double_ReplayIcon_HalfHeight">33</System:Double>

            <System:Double x:Key="A_Double_ReplayIcon_Opacity_Unselected">1.0</System:Double>

            <SolidColorBrush x:Key="A_Brush_TileOverlay_TranslucentBackground" Color="{StaticResource A_Color_Tile_Background}" />

            <Style x:Key="A_Style_FZMaterial_ReplayIcon_Background" BasedOn="{StaticResource A_Style_FZMaterial_AcrylicPanel_Tile_Background}" TargetType="local:FZMaterial">
                <Setter Property="Preset" Value="{StaticResource H_Roundtangle_Outer_2px}" />
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}" />
            </Style>

            <Style x:Key="A_Style_FZMaterial_ReplayIcon_Background_Highlight" BasedOn="{StaticResource A_Style_FZMaterial_FlatPanel_Highlight}" TargetType="local:FZMaterial">
                <Setter Property="Preset" Value="{StaticResource H_Roundtangle_Outer_2px}" />
                <Setter Property="Color" Value="{StaticResource H_Color_HighlightedItemBg}" />
            </Style>

            <Style x:Key="A_Style_FZMaterial_ReplayIcon" TargetType="local:FZMaterial">
                <Setter Property="Stretch" Value="Uniform"/>
                <Setter Property="Color" Value="{StaticResource H_Color_Primary_Black}"/>
                <Setter Property="Width" Value="{StaticResource A_Double_ReplayIcon_Width}"/>
                <Setter Property="Height" Value="{StaticResource A_Double_ReplayIcon_Height}"/>
                <Setter Property="Opacity" Value="{StaticResource A_Double_ReplayIcon_Opacity_Unselected}"/>

            </Style>

            <Style x:Key="A_Style_ButtonBase_Base" TargetType="{x:Type ButtonBase}">
                <Setter Property="Background" Value="{StaticResource A_Brush_TileOverlay_TranslucentBackground}"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Margin" Value="0,0,4,0"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="4"/>
                <Setter Property="Height" Value="{StaticResource A_Double_ReplayIcon_Height}" />
                <Setter Property="Width" Value="{StaticResource A_Double_ReplayIcon_Width}"/>
                <Setter Property="Focusable" Value="true" />
                <Setter Property="FocusOnMouseOverBehaviour.Self" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <local:FZMaterial x:Name="Border" >
                                <ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
                                    RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Opacity="0.7"/>
                            </local:FZMaterial>
                            
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="Panel.ZIndex" Value="10"/>
                    </Trigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="A_Style_Button_Clickable" BasedOn="{StaticResource A_Style_ButtonBase_Base}" TargetType="{x:Type ButtonBase}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="{StaticResource A_Brush_TileOverlay_TranslucentBackground}"/>
                <Setter Property="local:ZPanel.Transform">
                    <Setter.Value>
                        <ScaleTransform3D CenterX="{StaticResource A_Double_ReplayIcon_HalfWidth}" CenterY="{StaticResource A_Double_ReplayIcon_HalfHeight}"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <Grid>
                                <local:FZMaterial x:Name="BackgroundImage"
                                                  Style="{StaticResource A_Style_FZMaterial_ReplayIcon_Background}">
                                    <local:FZMaterial x:Name="ButtonImage"
                                                            ImageSource="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                                                            Style="{StaticResource A_Style_FZMaterial_ReplayIcon}"/>
                                </local:FZMaterial>
                                <StrokeHighlightControl Style="{StaticResource H_Style_StrokeHighlight_Instant}"
                                                        InnerThickness="2"
                                                        OuterThickness="4" 
                                                        ContentRadius="2"
                                                        IsEnabled="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter Property="local:ZPanel.DisableClipping" Value="True" />
                                    <Setter TargetName="BackgroundImage" Property="Style" Value="{StaticResource A_Style_FZMaterial_ReplayIcon_Background_Highlight}" />
                                    <Setter TargetName="ButtonImage" Property="Color" Value="{StaticResource A_Color_White}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_Button_OpenMenu" BasedOn="{StaticResource A_Style_ButtonBase_Base}" TargetType="{x:Type ButtonBase}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="{StaticResource A_Brush_TileOverlay_TranslucentBackground}"/>
                <Setter Property="local:ZPanel.Transform">
                    <Setter.Value>
                        <ScaleTransform3D CenterX="{StaticResource A_Double_ReplayIcon_HalfWidth}" CenterY="{StaticResource A_Double_ReplayIcon_HalfHeight}"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ButtonBase}">
                            <Grid>
                                <local:FZMaterial x:Name="BackgroundImage"
                                                  Style="{StaticResource A_Style_FZMaterial_ReplayIcon_Background}">
                                    <local:FZMaterial x:Name="ButtonImage"
                                                      ImageSource="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                                                      Style="{StaticResource A_Style_FZMaterial_ReplayIcon}"/>
                                </local:FZMaterial>
                                <StrokeHighlightControl Style="{StaticResource H_Style_StrokeHighlight_Instant}"
                                                        ContentRadius="2" 
                                                        OuterThickness="4" 
                                                        InnerThickness="2"
                                                        IsEnabled="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter Property="local:ZPanel.DisableClipping" Value="True" />
                                    <Setter TargetName="BackgroundImage" Property="Style" Value="{StaticResource A_Style_FZMaterial_ReplayIcon_Background_Highlight}" />
                                    <Setter TargetName="ButtonImage" Property="Color" Value="{StaticResource A_Color_White}"/>
                                </Trigger>
                                
                                <DataTrigger Binding="{Binding ShowCameraGroups, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DVRControls}}}" Value="True">
                                    <Setter TargetName="ButtonImage" Property="Color" Value="{StaticResource A_Color_White}"/>
                                    <Setter TargetName="BackgroundImage" Property="Style" Value="{StaticResource A_Style_FZMaterial_ReplayIcon_Background_Highlight}"/>
                                </DataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_ToggleButton_Default" BasedOn="{StaticResource A_Style_ButtonBase_Base}" TargetType="{x:Type ToggleButton}">
                <Setter Property="SnapsToDevicePixels" Value="true"/>
                <Setter Property="OverridesDefaultStyle" Value="true"/>
                <Setter Property="Background" Value="{StaticResource A_Brush_TileOverlay_TranslucentBackground}"/>
                <Setter Property="local:ZPanel.Transform">
                    <Setter.Value>
                        <ScaleTransform3D CenterX="{StaticResource A_Double_ReplayIcon_HalfWidth}" CenterY="{StaticResource A_Double_ReplayIcon_HalfHeight}"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Grid>
                                <local:FZMaterial x:Name="BackgroundImage"
                                                  Style="{StaticResource A_Style_FZMaterial_ReplayIcon_Background}">
                                    <Grid x:Name="OuterContainer">
                                        <local:FZMaterial x:Name="PauseImage"
                                                          ImageSource="/Textures/Data_Bound/Replay_Icons/Pause.png"
                                                          Style="{StaticResource A_Style_FZMaterial_ReplayIcon}"/>
                                        <local:FZMaterial x:Name="PlayImage"
                                                          ImageSource="/Textures/Data_Bound/Replay_Icons/Play.png"
                                                          Style="{StaticResource A_Style_FZMaterial_ReplayIcon}"/>
                                    </Grid>
                                </local:FZMaterial>
                                <StrokeHighlightControl Style="{StaticResource H_Style_StrokeHighlight_Instant}" 
                                                        ContentRadius="2"
                                                        OuterThickness="4" 
                                                        InnerThickness="2"
                                                        IsEnabled="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource TemplatedParent}}"/> 
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="PauseImage" Property="Visibility" Value="Visible"/>
                                    <Setter TargetName="PlayImage" Property="Visibility" Value="Hidden"/>
                                    <Setter Property="Tag" Value="Pause"/>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="PauseImage" Property="Visibility" Value="Hidden"/>
                                    <Setter TargetName="PlayImage" Property="Visibility" Value="Visible"/>
                                    <Setter Property="Tag" Value="Play"/>
                                </Trigger>
                                <Trigger Property="IsKeyboardFocused" Value="True">
                                    <Setter TargetName="BackgroundImage" Property="Style" Value="{StaticResource A_Style_FZMaterial_ReplayIcon_Background_Highlight}" />
                                    <Setter TargetName="PlayImage" Property="Color" Value="{StaticResource A_Color_White}"/>
                                    <Setter TargetName="PauseImage" Property="Color" Value="{StaticResource A_Color_White}"/>
                                    <Setter Property="local:ZPanel.DisableClipping" Value="True" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="A_Style_Arrow_Left_Focused_Override" TargetType="Control" BasedOn="{StaticResource A_Style_Arrow_Left}">
                <Style.Resources>
                    <ColorAlias x:Key="A_Color_OptionsItem_EnabledNotFocused" Color="{StaticResource A_Color_OptionsItem_Focused}"/>
                </Style.Resources>
            </Style>

            <Style x:Key="A_Style_Arrow_Right_Focused_Override" TargetType="Control" BasedOn="{StaticResource A_Style_Arrow_Right}">
                <Style.Resources>
                    <ColorAlias x:Key="A_Color_OptionsItem_EnabledNotFocused" Color="{StaticResource A_Color_OptionsItem_Focused}"/>
                </Style.Resources>
            </Style>

            <Style x:Key="A_Style_SpinnerControl_NoLabel" TargetType="{x:Type local:SpinnerControl}">
                <Setter Property="Height" Value="50"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:SpinnerControl}">
                            <ControlTemplate.Resources>
                                <AutoScrollSettings x:Key="H_AutoScrollSettings_Camera_Text"
                                    ScrollSeparation="20"
                                    ScrollOrientation="Horizontal"
                                    Speed="30"
                                    InitialPause="0:0:0.5"/>
                            </ControlTemplate.Resources>
                            <Grid x:Name="Grid_LayoutRoot" FocusManager.IsFocusScope="False">
                                <local:FZMaterial Style="{StaticResource A_Style_FZMaterial_ReplayIcon_Background_Highlight}">
                                    <DockPanel LastChildFill="True">
                                        <Grid DockPanel.Dock="Left" x:Name="LeftArrowContainer"
                                                  HorizontalAlignment="Left"
                                                  VerticalAlignment="Center" Margin="12,0,0,0">
                                            <local:FZButton x:Name="Arrow_Left"
                                                            Command="{TemplateBinding PrevSelectCommand}"
                                                            IsEnabled="{Binding LeftButtonState, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource H_Converter_SpinnerStateToEnabled}}"
                                                            Style="{StaticResource A_Style_Button_SpinnerArrowButton}">
                                                <ContentControl HorizontalAlignment="Left"
                                                                Focusable="False"
                                                                Style="{StaticResource A_Style_Arrow_Left_Focused_Override}" >         
                                                </ContentControl>
                                            </local:FZButton>
                                        </Grid>
                                        <Grid DockPanel.Dock="Right" x:Name="RightArrowContainer"
                                                  HorizontalAlignment="Right"
                                                  VerticalAlignment="Center"
                                                  Margin="0,0,12,0">
                                            <local:FZButton x:Name="Arrow_Right"
                                                        Command="{TemplateBinding NextSelectCommand}"
                                                        IsEnabled="{Binding RightButtonState, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource H_Converter_SpinnerStateToEnabled}}"
                                                        Style="{StaticResource A_Style_Button_SpinnerArrowButton}">
                                                <ContentControl Style="{StaticResource A_Style_Arrow_Right_Focused_Override}"
                                                                HorizontalAlignment="Right"
                                                                Focusable="False" />
                                            </local:FZButton>
                                        </Grid>
                                        <local:FZTextBlock x:Name="PART_Text"
                                            Text="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
                                            Style="{StaticResource A_Style_FZTextBlock_HeaderBlock}"
                                            Color="{StaticResource H_Color_Primary_White}"
                                            CapHeight="20"
                                            FontFamily="Horizon_B"
                                            VerticalAlignment="Center"
                                            HorizontalAlignment="Center"
                                            Margin="5,0,5,2"
                                            Stretch="None"
                                            AutoScroll="{StaticResource H_AutoScrollSettings_Camera_Text}"
                                            AutoScroll.AllowScrolling="True"
                                            ScreenReader.LineType="SelectedItem"
                                            ScreenReader.Event="OnChange"
                                            ScreenReader.ControlType="Spinner"
                                            ScreenReader.SelectedCount="{Binding CameraGroupOptions.Count, ElementName=UserControl}"
                                            ScreenReader.SelectedNumber="{Binding CameraGroupIndex, ElementName=UserControl, Converter={StaticResource A_IndexToNumberConverter}}"/>
                                    </DockPanel>
                                </local:FZMaterial>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="Visibility" Value="Visible">
                                    <Setter TargetName="PART_Text" Property="ScreenReader.Line" Value="{Binding Text, RelativeSource={RelativeSource Self}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Storyboard x:Key="PART_PlayText">
                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                    <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Play}"/>
                </StringAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="PART_PauseText">
                <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                    <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Pause}"/>
                </StringAnimationUsingKeyFrames>
            </Storyboard>

        </ResourceDictionary>
    </UserControl.Resources>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_RestartBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Restart}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_RewindBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_SkipBack}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <!-- can't convince the xaml to check whether PausePlayToggle IsChecked or not 
                need to toggle between InGame.IDS_Play and InGame.IDS_Pause-->
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_PausePlayToggleBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Pause}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_FastForwardBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_SkipForward}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_CamerasBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_CameraType}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_TelemetryBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Telemetry}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_MovieBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Movie}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_PhotoBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_TakePhoto}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Keyboard.GotKeyboardFocus" SourceName="PART_ExitBtn">
            <BeginStoryboard>
                <Storyboard>
                    <StringAnimationUsingKeyFrames Storyboard.TargetProperty="(local:FZTextBlock.Text)" Storyboard.TargetName="DescriptionTxt">
                        <DiscreteStringKeyFrame KeyTime="0" Value="{local:Loc InGame.IDS_Exit}"/>
                    </StringAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="PART_LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <local:FZMaterial x:Name="DescriptionContainer"
                          Height="50"
                          Grid.Row="0"
                          Style="{StaticResource A_Style_FZMaterial_FlatPanel_Header}"
                          Margin="0,0,0,12">
            <local:FZTextBlock x:Name="DescriptionTxt"
                               Style="{StaticResource A_Style_FZTextBlock_HorizonC}" 
                               CapHeight="20"
                               Color="{StaticResource A_Color_SubHeader_Text}" 
                               Margin="24,0"
                               VerticalAlignment="Center"
                               ScreenReader.Line="{Binding Text, RelativeSource={RelativeSource Self}}"
                               ScreenReader.LineType="SelectedItem"
                               ScreenReader.Event="OnChange"
                               ScreenReader.ControlType="Button"/>
        </local:FZMaterial>

        <local:SpinnerControl x:Name="PART_CameraSpinner"
                              Grid.Row="2"
                              Width="{Binding Path=ActualWidth, ElementName=PART_ButtonContainer}"
                              Style="{StaticResource A_Style_SpinnerControl_NoLabel}"
                              ItemsSource="{Binding CameraGroupOptions, ElementName=UserControl}"
                              SelectedIndex="{Binding CameraGroupIndex, ElementName=UserControl}"
                              Visibility="{Binding ShowCameraGroups, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                              Margin="0,0,0,0"/>

        <StackPanel Orientation="Horizontal" Grid.Row="1" Margin="0,0,0,6">
            <StackPanel x:Name="PART_ButtonContainer" Orientation="Horizontal" KeyboardNavigation.DirectionalNavigation="Contained">
                <local:FZButton x:Name="PART_RestartBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="{Binding ReplayMode, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                        Tag="/Textures/Data_Bound/Replay_Icons/Restart.png" />
                <local:FZButton x:Name="PART_RewindBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="Collapsed"
                        Tag="/Textures/Data_Bound/Replay_Icons/Icon_Rewind.png"/>
                <!-- Not part of Anthem's design: Visibility="{Binding CanSkip, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" -->
                <ToggleButton x:Name="PART_PausePlayToggleBtn"
                              Style="{StaticResource A_Style_ToggleButton_Default}"
                              IsChecked="{Binding IsPaused, ElementName=UserControl}"
                              Visibility="{Binding ReplayMode, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"/>
                <local:FZButton x:Name="PART_FastForwardBtn" Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="Collapsed"
                        Tag="/Textures/Data_Bound/Replay_Icons/Icon_FastForward.png"/>
                <!-- Not part of Anthem's design: Visibility="{Binding CanSkip, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" -->
                <local:FZButton x:Name="PART_CamerasBtn"
                        Style="{StaticResource A_Style_Button_OpenMenu}"
                        Tag="/Textures/Data_Bound/Replay_Icons/Game_Camera.png"/>
                <local:FZButton x:Name="PART_TelemetryBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="Collapsed"
                        Tag="/Textures/Data_Bound/Replay_Icons/Icon_Telemetry.png" />
                <local:FZButton x:Name="PART_MovieBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="Collapsed"
                        Tag="/Textures/Data_Bound/Replay_Icons/Icon_Movie.png">
                </local:FZButton>
                <local:FZButton x:Name="PART_PhotoBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Visibility="{Binding CanExportPhoto, ElementName=UserControl, Converter={StaticResource A_FZBooleanToVisibilityConverter}}"
                        Tag="/Textures/Data_Bound/Replay_Icons/Photo_Mode.png" />
                <local:FZButton x:Name="PART_ExitBtn"
                        Style="{StaticResource A_Style_Button_Clickable}"
                        Margin="0,0,0,0"
                        Tag="/Textures/Data_Bound/Replay_Icons/Exit.png" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>
