<ThumbnailEditor x:Name="Page"
      x:Class="ForzaUI.A_DebugThumbnailEditor"
      xmlns:local="clr-namespace:ForzaUI"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      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" 
      mc:Ignorable="d"
      DataContext="{Binding RelativeSource={x:Static RelativeSource.Self}}">
    <Page.Background>
        <ImageBrush ImageSource="game:\Media\UI\Textures\Data_Bound\DebugOnly\SampleBackgrounds\Whitespace2.png" />
    </Page.Background>
    <Page.Resources>
        <SolidColorBrush x:Key="A_Brush_BorderBrush" Color="#f00" />
        <SolidColorBrush x:Key="A_Brush_GuidelineOuter" Color="{StaticResource A_Color_Tile_Selected}"/>
        <SolidColorBrush x:Key="A_Brush_GuidelineInner" Color="{StaticResource A_Color_Tile_LiveText}"/>
                
        <Style x:Key="A_Style_Thumbnail_ButtonText" TargetType="{x:Type FZTextBlock}">
            <Setter
                Property="Color"
                Value="{StaticResource H_Color_Primary_Black}" />
            <Setter
                Property="FontFamily"
                Value="Horizon_A" />
            <Setter
                Property="CapHeight"
                Value="16" />
            <Setter
                Property="VerticalAlignment"
                Value="Center"/>
            <Setter
                Property="Margin"
                Value="16,0" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}"/>
                </DataTrigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Color" Value="{StaticResource H_Color_Primary_White}"/>
                    <Setter Property="Opacity" Value="0.6"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <Double x:Key="A_Button_Gap">4</Double>


        <ControlTemplate x:Key="A_Template_ListItem" TargetType="ContentControl">
            <Grid>
                <FZMaterial x:Name="backing" 
                            Preset="{StaticResource H_Roundtangle_Outer_3px}" 
                            Color="{StaticResource H_Color_Primary_White}"/>
                <ContentPresenter />
                <StrokeHighlightControl ContentRadius="3" IsEnabled="False" x:Name="highlight" Style="{StaticResource H_Style_StrokeHighlight_Instant_TextMenu}"/>
                <FZMaterial Color="#0000" x:Name="mouse_hit_helper" IsHitTestVisible="True"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                    <Setter TargetName="highlight" Property="IsEnabled" Value="True"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.00" ScaleY="1.00"/>
                        </Setter.Value>
                    </Setter>
                    <Setter
                        TargetName="backing"
                        Property="Color"
                        Value="{StaticResource H_Color_Primary_Black}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter
                        TargetName="backing"
                        Property="Preset">
                        <Setter.Value>
                            <FZMaterialPresetGlassRoundtangle
                                CornerRadius="3"
                                BlurAmount="High" />
                        </Setter.Value>
                    </Setter>
                    <Setter
                        TargetName="backing"
                        Property="Color"
                        Value="{StaticResource H_Color_Glass_Purple_20pc}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style x:Key="A_Style_Thumbnail_Button" TargetType="{x:Type FZButton}">
            <Setter Property="MinHeight" Value="40" />
            <Setter Property="Margin" Value="{Margin Bottom={StaticResource A_Button_Gap}}" />
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
            <Setter Property="Template" Value="{StaticResource A_Template_ListItem}"/>

            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                    <Setter Property="Panel.ZIndex" Value="50"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FocusSelf.WhenTrue" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_EditThumbnail_Button" TargetType="{x:Type FZButton}" BasedOn="{StaticResource A_Style_Thumbnail_Button}">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding CameraActive}" Value="False"/>
                        <Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource AncestorType=Page}}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="FocusSelf.WhenTrue" Value="True" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="A_Style_ListBoxItem_List_ThumbEditor" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource A_Style_ListBoxItem_TextMenu_NotFocusable}">
            <Setter Property="Height" Value="40"/>
        </Style>

        <Style x:Key="H_Style_TabButton_Thumbnail" 
            BasedOn="{StaticResource H_Style_TabButton}"
            TargetType="{Type FZButton}">
            <Setter Property="Content" Value="{Binding Text}"/>
        </Style>

        <MappingConverter x:Key="A_Converter_AButtonText" Default="Select">
            <MappingConverterEntry Key="True" Value="Finish"/>
        </MappingConverter>

        <Style x:Key="H_Style_Controller_A" 
            TargetType="PageInputHandler">
            <Setter Property="Command" Value="{Binding (FocusManager.FocusedElement).Command, ElementName=buttons_scope}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ExitCameraCommand.Enabled}" Value="True">
                    <Setter Property="Command" Value="{Binding ExitCameraCommand}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_Controller_B" 
            TargetType="PageInputHandler">
            <Style.Triggers>
                <DataTrigger Binding="{Binding LeaveSceneCommand.Enabled}" Value="True">
                    <Setter Property="Command" Value="{Binding LeaveSceneCommand}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_Controller_RS" 
            TargetType="PageInputHandler">
            <Style.Triggers>
                <DataTrigger Binding="{Binding LoadNextPresetCommand.Enabled}" Value="True">
                    <Setter Property="Command" Value="{Binding LoadNextPresetCommand}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_Controller_LS" 
            TargetType="PageInputHandler">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ResetRollCommand.Enabled}" Value="True">
                    <Setter Property="Command" Value="{Binding ResetRollCommand}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_TabController" 
            TargetType="PageInputHandler">
            <Style.Triggers>
                <DataTrigger Binding="{Binding CameraActive}" Value="True">
                    <Setter Property="Command" Value="{x:Null}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_TabController_LB" 
            TargetType="PageInputHandler"
            BasedOn="{StaticResource H_Style_TabController}">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Visibility, ElementName=tab_bar}" Value="{x:Static Visibility.Visible}"/>
                        <Condition Binding="{Binding IsEnabled, ElementName=tab_bar}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Command" Value="{Binding ScrollPagePrevCommand, ElementName=tab_bar}"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="H_Style_TabController_RB" 
            TargetType="PageInputHandler"
            BasedOn="{StaticResource H_Style_TabController}">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Visibility, ElementName=tab_bar}" Value="{x:Static Visibility.Visible}"/>
                        <Condition Binding="{Binding IsEnabled, ElementName=tab_bar}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Command" Value="{Binding ScrollPageNextCommand, ElementName=tab_bar}"/>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

        <ControlTemplate x:Key="A_Template_OldOverlay"
            TargetType="Control">
            <Viewbox>            
                <Grid x:Name="Grid_Size" HorizontalAlignment="Center" Height="{Binding ViewHeight}" VerticalAlignment="Center" Width="{Binding ViewWidth}">
                    <Rectangle x:Name="Rectangle_Frame" Stroke="{StaticResource A_Brush_BorderBrush}" StrokeThickness="4" Margin="-4"/>
                    <Rectangle x:Name="Rectangle_Safe" Stroke="White" Opacity="0.25" StrokeThickness="2" Margin="0,0"/>
                    <Border x:Name="Border_Red" BorderBrush="{StaticResource A_Brush_GuidelineOuter}" BorderThickness="2,0" Margin="20,0,20,6" Opacity="0.25" VerticalAlignment="Bottom" Height="54"/>
                    <Border x:Name="Border_Blue" BorderBrush="{StaticResource A_Brush_GuidelineInner}" BorderThickness="2,0" Margin="30,0,30,6" Opacity="0.25" Height="27" VerticalAlignment="Bottom"/>
                </Grid>
            </Viewbox>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding SelectedSize.Value}" Value="0"> <!-- small -->
                    <Setter Property="Margin" TargetName="Rectangle_Safe" Value="10,58,10,92"/>
                    <Setter Property="Margin" TargetName="Border_Red" Value="20,0,20,6"/>
                    <Setter Property="Height" TargetName="Border_Red" Value="54"/>
                    <Setter Property="Margin" TargetName="Border_Blue" Value="30,0,30,6"/>
                    <Setter Property="Height" TargetName="Border_Blue" Value="27"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding SelectedSize.Value}" Value="1"> <!-- large -->
                    <Setter Property="Margin" TargetName="Rectangle_Safe" Value="40,72,40,50"/>
                    <Setter Property="Margin" TargetName="Border_Red" Value="80,0,80,52"/>
                    <Setter Property="Height" TargetName="Border_Red" Value="168"/>
                    <Setter Property="Margin" TargetName="Border_Blue" Value="120,0,120,52"/>
                    <Setter Property="Height" TargetName="Border_Blue" Value="84"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding SelectedSize.Value}" Value="2"> <!-- aux -->
                    <Setter Property="Margin" TargetName="Rectangle_Safe" Value="10,58,10,92"/>
                    <Setter Property="Margin" TargetName="Border_Red" Value="20,0,20,6"/>
                    <Setter Property="Height" TargetName="Border_Red" Value="54"/>
                    <Setter Property="Margin" TargetName="Border_Blue" Value="30,0,30,6"/>
                    <Setter Property="Height" TargetName="Border_Blue" Value="27"/>
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <String x:Key="A_String_Format_Preview">: </String>

        <ControlTemplate x:Key="A_Template_ControllerLabel" TargetType="ContentControl">
            <Grid HorizontalAlignment="Center" 
                VerticalAlignment="Center" >
                <FZMaterial Color="#fff" Opacity="0.6">
                    <FZMaterial.Preset>
                        <FZMaterialPresetRoundtangleStroke x:Key="A_FZMaterialPresetRoundtangleStroke_Stroke"
                                BasedOn="{StaticResource A_FZMaterialPreset_FlatPanel_Base}"
                                CornerRadius="8"
                                Thickness="2"/>
                    </FZMaterial.Preset>
                </FZMaterial>
                <FZTextBlock Text="{TemplateBinding Content}"
                    Style="{StaticResource A_Style_FZTextBlock_DescriptionBlockBody}"
                    Margin="8"
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    Color="{StaticResource A_Color_Body_Text}"/>
            </Grid>
        </ControlTemplate>
    </Page.Resources>
    
	<Grid>

        <FZMaterialGlassCapture/>

        <PageInputHandler x:Name="a_button" Button="A"
                          Style="{StaticResource H_Style_Controller_A}"/>
        <PageInputHandler x:Name="b_button" Button="B"
                          Style="{StaticResource H_Style_Controller_B}"/>
        <PageInputHandler x:Name="rs_button" Button="R3"
                          Style="{StaticResource H_Style_Controller_RS}"/>
        <PageInputHandler x:Name="ls_button" Button="L3"
                          Style="{StaticResource H_Style_Controller_LS}"/>

        <PageInputHandler x:Name="lb_button" Button="LBumper"
                          Style="{StaticResource H_Style_TabController_LB}"/>
        <PageInputHandler x:Name="rb_button" Button="RBumper"
                          Style="{StaticResource H_Style_TabController_RB}"/>
        <!-- Bars -->
        <ContentControl
            x:Name="BottomBar"
            Panel.ZIndex="10"
            Style="{StaticResource A_Style_ButtonBar}">
            <ControllerButtonPanel
                x:Name="PART_HelpPanel"
                Style="{StaticResource A_Style_ControllerButtonPanel_Default}">
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=a_button}"
                    Description="{Binding CameraActive, Converter={StaticResource A_Converter_AButtonText}}"
                    Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=a_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=b_button}"
                    Description="Exit"
                    Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=b_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=lb_button}"
                    Description="Prev size"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={StaticResource A_Converter_VisibleWhenNotNull}, ElementName=lb_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=rb_button}"
                    Description="Next size"
                    Visibility="{Binding Command, FallbackValue=Collapsed, Converter={StaticResource A_Converter_VisibleWhenNotNull}, ElementName=rb_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=rs_button}"
                    Description="{Binding LoadNextPreset}"
                    Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=rs_button}" />
                <ControllerButtonControl
                    Button="{Binding Button, ElementName=ls_button}"
                    Description="Reset Roll"
                    Visibility="{Binding Command.Enabled, FallbackValue=Collapsed, Converter={FZBooleanToVisibilityConverter}, ElementName=ls_button}" />
            </ControllerButtonPanel>
        </ContentControl>
        
        <Border x:Name="Frame" Style="{StaticResource A_Style_Border_ScenePadding}">
            <Grid Style="{StaticResource A_Style_FrameworkElement_DefaultTransition_0}"
                Margin="0,0,0,28">
                <DockPanel>
                    <DockPanel DockPanel.Dock="Top">
                        <ContentControl x:Name="TitleBlock" Style="{StaticResource A_Style_ContentControl_ScreenTitleBlock}" Content="Thumbnail Editor" Tag="DEBUG" DockPanel.Dock="Left" />

                        <FZButtonsSelector x:Name="tab_bar"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           ItemsSource="{Binding Sizes}"
                                           Style="{StaticResource H_Style_TabBar_Base}"
                                           ItemContainerStyle="{StaticResource H_Style_TabButton_Thumbnail}"
                                           Focusable="False"
                                           IsEnabled="{Binding CameraActive, Converter={StaticResource A_Converter_Boolean_Invert}}"
                                           SelectedItem="{Binding SelectedSize}" />

                    </DockPanel>
                    
                    <DockPanel Dock="Right" Width="600">
                        <Grid DockPanel.Dock="Top">
                            <ContentControl Style="{StaticResource A_Style_ContentControl_Header_Custom}" 
                                            Focusable="False"
                                            HorizontalContentAlignment="Stretch">
                                <FZTextBlock Style="{StaticResource H_Style_Text_DescriptionTitle}"
                                             Text="Settings" />
                            </ContentControl>
                        </Grid>
                        <DockPanel IsEnabled="{Binding CameraActive, Converter={StaticResource A_Converter_Boolean_Invert}}">
                            <StackPanel DockPanel.Dock="Top"
                                        x:Name="buttons_scope"
                                        KeyboardNavigation.DirectionalNavigation="Contained">
                                <FZButton Style="{StaticResource A_Style_EditThumbnail_Button}"
                                                Command="{Binding EditCommand}">
                                    <FZTextBlock Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                 Text="Edit Thumbnail"/>
                                </FZButton>
                                <FZButton Style="{StaticResource A_Style_Thumbnail_Button}"
                                                Command="{Binding JumpCommand}">
                                    <DockPanel>
                                        <FZTextBlock DockPanel.Dock="Left" Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                     Text="Select Car"/>

                                        <FZTextBlock DockPanel.Dock="Right" Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                     FontFamily="Horizon_B"
                                                     Text="{Binding SelectedItem.Id}"/>
                                        <FZTextBlock DockPanel.Dock="Right" Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                     FontFamily="Horizon_B"
                                                     Margin="0,0,0,0"
                                                     Text="{Binding SelectedItem.Name}"/>
                                        <Decorator />
                                    </DockPanel>
                                </FZButton>

                                <!--FZButton Style="{StaticResource A_Style_Thumbnail_Button}">
                                    <SpinnerControl ItemsSource="{Binding Sizes}"
                                               Margin="16,0"
                                               Style="{StaticResource A_Style_SpinnerControl_Default}"
                                               Label="SELECT SIZE/SHAPE"
                                               SelectedItem="{Binding SelectedSize}" />
                                </FZButton-->

                                <FZButton Command="{Binding CycleOverlayCommand}"
                                          Style="{StaticResource A_Style_Thumbnail_Button}"
                                          Visibility="{Binding CycleOverlayCommand, Converter={FZBooleanToVisibilityConverter}}">
                                    <DockPanel>
                                        <FZTextBlock DockPanel.Dock="Left" Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                     Text="Cycle Overlay"/>

                                        <FZTextBlock DockPanel.Dock="Right" Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                     FontFamily="Horizon_B"
                                                     Text="{Binding OverlayIndex}"/>
                                        <Decorator/>
                                     </DockPanel>
                                </FZButton>

                                <FZMaterial Height="2"
                                            Margin="50,0,50,4"
                                            Color="#fff"
                                            Opacity="0.4" />
                                            
                                <FZButton Command="{Binding GenerateCommand}"
                                                Style="{StaticResource A_Style_Thumbnail_Button}">
                                    <FZTextBlock Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                 Text="Generate"/>
                                </FZButton>
                                <FZButton Command="{Binding GenerateAllCommand}" 
                                                Style="{StaticResource A_Style_Thumbnail_Button}">
                                    <FZTextBlock Style="{StaticResource A_Style_Thumbnail_ButtonText}" 
                                                 Text="Generate For All Cars"/>
                                </FZButton>

                            </StackPanel>
                            <ContentControl Panel.ZIndex="-4" Template="{StaticResource A_ControlTemplate_SidePanelContent}" Focusable="False">
                                <DockPanel Margin="8">
                                    <FZTextBlock Style="{StaticResource A_Style_FZTextBlock_DescriptionBlockBody}"
                                        Color="{StaticResource A_Color_Body_Text}"
                                        HorizontalAlignment="Center" Margin="16"
                                        DockPanel.Dock="Top">
                                        <FZRun Text="For its "/>
                                        <FZRun Text="{Binding SelectedSize.Text}" Color="{StaticResource H_Color_Primary_Green}" FontFamily="Horizon_C"/>
                                        <FZRun Text=" thumbnail, this car is using the "/>
                                        <FZRun Text="{Binding SettingType}" Color="{StaticResource H_Color_Primary_Green}" FontFamily="Horizon_C"/>
                                    </FZTextBlock>

                                    <DockPanel Visibility="{Binding CameraActive, Converter={FZBooleanToVisibilityConverter UseHidden=True}}">
                                        <UniformGrid Rows="1" DockPanel.Dock="Top" Margin="0,15">
                                            <FrameworkElement />
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Down"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_lt" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                            </Grid>
                                            <FrameworkElement />
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Up"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_rt" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                            </Grid>
                                            <FrameworkElement />
                                        </UniformGrid>
                                        <UniformGrid Rows="1" DockPanel.Dock="Top" Margin="0,15">
                                            <FrameworkElement />
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Move"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_ls" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                            </Grid>
                                            <FrameworkElement />
                                            <FrameworkElement />
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Look"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_rs" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                                            </Grid>
                                            <FrameworkElement />
                                            <FrameworkElement />
                                            <FrameworkElement />
                                        </UniformGrid>
                                        <UniformGrid Rows="1" DockPanel.Dock="Bottom" Margin="0,15">
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Load Next Preset (press)"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_r3" VerticalAlignment="Top" HorizontalAlignment="Center" />
                                            </Grid>
                                        </UniformGrid>
                                        <UniformGrid Rows="1" DockPanel.Dock="Bottom" Margin="0,15">
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Reset Roll (press)"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_l3" VerticalAlignment="Top" HorizontalAlignment="Center" />
                                            </Grid>
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="Fine Control (hold)"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_b" VerticalAlignment="Top" HorizontalAlignment="Center" />
                                            </Grid>
                                        </UniformGrid>
                                        <UniformGrid Rows="1" DockPanel.Dock="Bottom" Margin="0,15">
                                            <FrameworkElement />
                                            <FrameworkElement />
                                            <Grid>
                                                <ContentControl Template="{StaticResource A_Template_ControllerLabel}" Content="FOV/Roll"/>
                                                <ExposeScreenSpacePosition x:Name="controller_text_position_dpad" VerticalAlignment="Top" HorizontalAlignment="Center" />
                                            </Grid>
                                            <FrameworkElement />
                                            <FrameworkElement />
                                            <FrameworkElement />
                                        </UniformGrid>
                                        <Viewbox Margin="0,-40">
                                            <Grid Width="1024" Height="1024">
                                                <FZMaterial ImageSource="game:\Media\UI\Textures\Data_Bound\ui_symbols\Help_Controller.png" />
                                                <Canvas>
                                                    <ExposeScreenSpacePosition Canvas.Left="209" Canvas.Top="416" x:Name="controller_node_position_ls" />
                                                    <ExposeScreenSpacePosition Canvas.Left="245" Canvas.Top="486" x:Name="controller_node_position_l3" />
                                                    <ExposeScreenSpacePosition Canvas.Left="633" Canvas.Top="552" x:Name="controller_node_position_rs" />
                                                    <ExposeScreenSpacePosition Canvas.Left="647" Canvas.Top="632" x:Name="controller_node_position_r3" />
                                                    <ExposeScreenSpacePosition Canvas.Left="222" Canvas.Top="201" x:Name="controller_node_position_lt" />
                                                    <ExposeScreenSpacePosition Canvas.Left="803" Canvas.Top="201" x:Name="controller_node_position_rt" />
                                                    <ExposeScreenSpacePosition Canvas.Left="852" Canvas.Top="488" x:Name="controller_node_position_b" />
                                                    <ExposeScreenSpacePosition Canvas.Left="381" Canvas.Top="615" x:Name="controller_node_position_dpad" />
                                                </Canvas>
                                            </Grid>
                                        </Viewbox>  
                                    </DockPanel>
                                </DockPanel>
                            </ContentControl>
                        </DockPanel>
                    </DockPanel>

                    <DockPanel Margin="0,0,20,0" KeyboardNavigation.DirectionalNavigation="Contained">
                        <ContentControl Style="{StaticResource A_Style_ContentControl_Header_Custom}" 
                                        DockPanel.Dock="Top"
                                        Focusable="False"
                                        HorizontalContentAlignment="Stretch">
                            <Grid>
                                <FZTextBlock Style="{StaticResource H_Style_Text_DescriptionTitle}" >
                                    <FZRun Text="Preview"/>
                                    <FZRun Text="{Binding EditingStr, Converter={StringFormatConverter}, ConverterParameter={StaticResource A_String_Format_Preview}}"/>
                                    <FZRun Text="{Binding EditingStr}" Color="{StaticResource H_Color_Primary_Pink}"/>
                                </FZTextBlock>

                                <FZTextBlock Style="{StaticResource H_Style_Text_DescriptionTitle}" HorizontalAlignment="Right" FontFamily="Horizon_B"
                                    Visibility="{Binding OverlayName, Converter={StringVisConverter}}">
                                    <FZRun Text="Overlay: "/>
                                    <FZRun Text="{Binding OverlayName}" Color="{StaticResource H_Color_Primary_Pink}"/>
                                </FZTextBlock>
                            </Grid>
                        </ContentControl>
                        <ContentControl Template="{StaticResource A_ControlTemplate_SidePanelContent}" Focusable="False">
                            <Grid Margin="8" HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Viewbox Stretch="Uniform" StretchDirection="Both" x:Name="size_helper">
                                    <Decorator Width="{Binding ViewWidth}" Height="{Binding ViewHeight}"/>
                                </Viewbox>

                                <ContentControl
                                    Focusable="{Binding CameraActive}">
                                    <ContentControl.Style>
                                        <Style>
                                            <Style.Triggers>
                                                <MultiDataTrigger>
                                                    <MultiDataTrigger.Conditions>
                                                        <Condition Binding="{Binding CameraActive}" Value="True"/>
                                                        <Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource AncestorType=Page}}" Value="True"/>
                                                    </MultiDataTrigger.Conditions>
                                                    <Setter Property="FocusSelf.WhenTrue" Value="True" />
                                                </MultiDataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </ContentControl.Style>
                                    <Grid>
                                        <Grid x:Name="Grid_Viewport" Width="{Binding ActualWidth, ElementName=size_helper}" Height="{Binding ActualHeight, ElementName=size_helper}" ClipToBounds="True">
                                            <FZMaterial Color="{StaticResource A_Color_DarkPanelBackground}"/>

                                            <ProgressBar x:Name="IdleIndicator" IsIndeterminate="True" Style="{StaticResource A_Style_ProgressBar_WaitSpinner}" Height="56" HorizontalAlignment="Center" VerticalAlignment="Center"/>    

                                            <FZMaterial x:Name="ViewImageObject" HorizontalAlignment="Center" VerticalAlignment="Center" GreedyMeasure="True" Stretch="UniformToFill" ImageSource="{Binding ViewImage}" Visibility="{Binding IsCarReady, Converter={StaticResource A_FZBooleanToVisibilityConverter}}" />
                                            
                                            <FZMaterial x:Name="Overlay" HorizontalAlignment="Center" VerticalAlignment="Center" GreedyMeasure="True" Stretch="UniformToFill" ImageSource="{Binding OverlayImage}">
                                                <FZMaterial.Preset>
                                                    <FZMaterialPreset AlphaMode="MultSrcAlpha"/>
                                                </FZMaterial.Preset>
                                            </FZMaterial>

                                            <!-- Alignment grid helper -->
                                            <TickerItemsControl Visibility="Hidden" Max="36" HorizontalAlignment="Center" VerticalAlignment="Center" Focusable="False">
                                                <TickerItemsControl.Template>
                                                    <ControlTemplate TargetType="TickerItemsControl">
                                                        <Viewbox Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                            <UniformGrid Width="100" Height="100" IsItemsHost="True"/>
                                                        </Viewbox>
                                                    </ControlTemplate>
                                                </TickerItemsControl.Template>
                                                <TickerItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <FZMaterial Color="{StaticResource H_Color_Primary_Purple}" ImageSource="game:\Media\UI\Textures\Data_Bound\Event_Blueprint\Grid_Tile.png" />
                                                    </DataTemplate>
                                                </TickerItemsControl.ItemTemplate>
                                            </TickerItemsControl>

                                            <ItemsControl ItemsSource="{Binding DebugPoints, RelativeSource={RelativeSource AncestorType=Page}}">
                                                <ItemsControl.Template>
                                                    <ControlTemplate TargetType="ItemsControl">
                                                        <Viewbox>
                                                            <Canvas Width="1000" Height="1000" IsItemsHost="True"/>
                                                        </Viewbox>
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.Template>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <FZMaterial Preset="{Roundtangle CornerRadius=2}"
                                                        Color="#0f0">
                                                        </FZMaterial>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                                <ItemsControl.ItemContainerStyle>
                                                    <Style TargetType="ContentPresenter">
                                                        <Setter Property="Width" Value="4" />
                                                        <Setter Property="Height" Value="4" />
                                                        <Setter Property="Canvas.Left" Value="{Binding X, Converter={LinearTransformConverter Scale=500, Add=500}}" />
                                                        <Setter Property="Canvas.Top" Value="{Binding Y, Converter={LinearTransformConverter Scale=-500, Add=500}}" />
                                                        <Setter Property="HorizontalAlignment" Value="Center" />
                                                        <Setter Property="VerticalAlignment" Value="Center" />
                                                        <Setter Property="Tag" Value="Test" />
                                                    </Style>
                                                </ItemsControl.ItemContainerStyle>
                                            </ItemsControl>


                                            <ItemsControl ItemsSource="{Binding DebugLines, RelativeSource={RelativeSource AncestorType=Page}}">
                                                <ItemsControl.Template>
                                                    <ControlTemplate TargetType="ItemsControl">
                                                        <Viewbox>
                                                            <Canvas Width="1000" Height="1000" IsItemsHost="True"/>
                                                        </Viewbox>
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.Template>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <Line X1="{Binding X, Converter={LinearTransformConverter Scale=500, Add=500}}" 
                                                            Y1="{Binding Y, Converter={LinearTransformConverter Scale=-500, Add=500}}"
                                                            X2="{Binding X2, Converter={LinearTransformConverter Scale=500, Add=500}}" 
                                                            Y2="{Binding Y2, Converter={LinearTransformConverter Scale=-500, Add=500}}"
                                                        Stroke="#0ff"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                                <ItemsControl.ItemContainerStyle>
                                                    <Style TargetType="ContentPresenter">
                                                        <Setter Property="Width" Value="4" />
                                                        <Setter Property="Height" Value="4" />
                                                        <Setter Property="Canvas.Left" Value="0" />
                                                        <Setter Property="Canvas.Top" Value="0" />
                                                        <Setter Property="HorizontalAlignment" Value="Center" />
                                                        <Setter Property="VerticalAlignment" Value="Center" />
                                                        <Setter Property="Tag" Value="Test" />
                                                    </Style>
                                                </ItemsControl.ItemContainerStyle>
                                            </ItemsControl>
                                        </Grid>
                                        <StrokeHighlightControl
                                            x:Name="StrokeHighlight"
                                            Style="{StaticResource H_Style_StrokeHighlight_Animated}"
                                            IsEnabled="{Binding CameraActive}"
                                            Margin="0" />
                                    </Grid>
                                </ContentControl>
                            </Grid>
                        </ContentControl>
                    </DockPanel>

        	    </DockPanel>
            </Grid>
        </Border>
        <!--Button VerticalAlignment="Bottom" HorizontalAlignment="Center" Command="{Binding ResetPosCommand}">reset pos</Button-->
        <Canvas Visibility="{Binding CameraActive, Converter={FZBooleanToVisibilityConverter}}">
            <Canvas.Resources>
                <Style x:Key="{x:Type Line}" TargetType="Line">
                    <Setter Property="Stroke" Value="White"/>
                    <Setter Property="Opacity" Value="0.6"/>
                    <Setter Property="StrokeThickness" Value="2"/>
                    <Setter Property="X1" Value="{Binding (BindingProxy.A).X, RelativeSource={RelativeSource Self}}"/>
                    <Setter Property="X2" Value="{Binding (BindingProxy.B).X, RelativeSource={RelativeSource Self}}"/>
                    <Setter Property="Y1" Value="{Binding (BindingProxy.A).Y, RelativeSource={RelativeSource Self}}"/>
                    <Setter Property="Y2" Value="{Binding (BindingProxy.B).Y, RelativeSource={RelativeSource Self}}"/>
                </Style>
            </Canvas.Resources>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_ls}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_ls}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_rs}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_rs}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_rt}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_rt}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_lt}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_lt}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_b}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_b}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_l3}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_l3}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_r3}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_r3}"/>
            <Line BindingProxy.A="{Binding Position, ElementName=controller_text_position_dpad}"                
                BindingProxy.B="{Binding Position, ElementName=controller_node_position_dpad}"/>
            <Decorator Canvas.Left="1920" Canvas.Top="1080" x:Name="br"/>
            <Decorator Canvas.Left="0" Canvas.Top="0" x:Name="tl"/>
        </Canvas>
    </Grid>
</ThumbnailEditor>