<Page x:Class="ForzaUI.OutlineTest"
      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"
      mc:Ignorable="d"
      xmlns:System="clr-namespace:System;assembly=mscorlib"
      xmlns:local="clr-namespace:ForzaUI;assembly="
      Style="{StaticResource A_Style_Page_Generic}">
    <Page.Resources>
        <Style x:Key="{Type FZMaterial}" TargetType="{Type FZMaterial}">
            <Setter Property="Preset" Value="{Roundtangle CornerRadius=10}"/>
        </Style>

        <Style x:Key="{Type FZTextBlock}" TargetType="{Type FZTextBlock}">
            <Setter Property="Text" Value="quick brown fox jumps over the lazy dog. !"/>
            <Setter Property="Margin" Value="50,0"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Color" Value="Magenta"/>
        </Style>

        <Style x:Key="{Type TextBlock}" TargetType="{Type TextBlock}">
            <Setter Property="Text" Value="quick brown fox jumps over the lazy dog. !"/>
            <Setter Property="Margin" Value="50,0"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="FontSize" Value="50" />
            <Setter Property="Foreground">
                <Setter.Value>
                    <SolidColorBrush Color="Magenta"/>
                </Setter.Value>
            </Setter>
        </Style>

        <local:UIStoryboard x:Key="A_Move"> 
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MotionBlurElements"
                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                                           RepeatBehavior="Forever" >
                <DiscreteDoubleKeyFrame KeyTime="0:0:0"
                                        Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                        Value="1800"/>
            </DoubleAnimationUsingKeyFrames>
        </local:UIStoryboard>

        <OutlineEffect x:Key="OutlineThin" ThicknessInPixels="1" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" />
        <OutlineEffect x:Key="OutlineThick" ThicknessInPixels="4" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" /> 
        <OutlineEffect x:Key="OutlineWithGapForLargeFont" ThicknessInPixels="20" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" />
        <OutlineEffect x:Key="OutlineWithGapForSmallFont" ThicknessInPixels="5" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}"  />

        <Style x:Key="Background_Style" TargetType="FZMaterial">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
        </Style>

        <DropShadowEffect x:Key="DropShadowSynthesized" BlurRadius="3" Color="#3C000000" />
        <DropShadowEffect x:Key="DropShadowNonSynthesized" BlurRadius="5" Color="#FF000000" />

        <BlurEffect x:Key="Blur" Radius="5"/>

        <MappingConverter x:Key="SelectedToVis" Default="Collapsed">
            <MappingConverterEntry Key="True" Value="Visible" />
        </MappingConverter>

        <!-- outlines for concepts -->
        <OutlineEffect x:Key="Outline_4Pixel_30Opacity" ThicknessInPixels="4" Color="#4D000000" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" />
        <OutlineEffect x:Key="Outline_1Pixel_80Opacity" ThicknessInPixels="1" Color="#CC000000" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" />
        <OutlineEffect x:Key="Outline_2Pixel_80Opacity" ThicknessInPixels="2" Color="#CC000000" UiScalerValue="{Binding Path=ScaleValue, Source={StaticResource PART_UIResolutionScaler}, Mode=TwoWay}" />

        <MappingConverter x:Key="TagToOutlineConverter" Default="{Null}">
            <MappingConverterEntry Key="woodstock" Value="{StaticResource DropShadowSynthesized}" />
            <MappingConverterEntry Key="s_4px_30p" Value="{StaticResource Outline_4Pixel_30Opacity}" />
            <MappingConverterEntry Key="s_1px_80p" Value="{StaticResource Outline_1Pixel_80Opacity}" />
            <MappingConverterEntry Key="s_2px_80p" Value="{StaticResource Outline_2Pixel_80Opacity}" />
        </MappingConverter>
        <!-- end of outlines for concepts -->

        <Style x:Key="SkillsTemplate" TargetType="{x:Type ContentControl}">
            <Setter Property="Visibility" Value="Collapsed" />
            <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContentControl}">
                    <StackPanel Orientation="Vertical"
                                Margin="80,0,0,0">
                        <Decorator x:Name="ChainScore"
                                   RenderTransform="{StaticResource A_SkewTransform_HUD_Italics}"
                                   RenderTransformOrigin="0.5,0.5">
                            <FZTextBlock VerticalAlignment="Center" 
                                         FontFamily="Horizon_A"
                                         CapHeight="34"
                                         Color="{StaticResource H_Color_Primary_White}"
                                         Effect="{TemplateBinding Tag, Converter={StaticResource TagToOutlineConverter}}">
                                <FZRun Text="3,848" 
                                       Color="{StaticResource H_Color_Primary_Yellow}"/>
                                <FZRun Text=" x1.4" />
                            </FZTextBlock>
                        </Decorator>
                        <FZTextBlock x:Name="SkillNameAndScore"
                                     VerticalAlignment="Center" 
                                     Margin="0,20,0,0"
                                     FontFamily="Horizon_A"
                                     CapHeight="18.5"
                                     Color="{StaticResource H_Color_Primary_White}"
                                     Effect="{TemplateBinding Tag, Converter={StaticResource TagToOutlineConverter}}">
                            <FZRun Text="Awesome Drift" />
                            <FZRun Text=" 500" 
                                   Color="{StaticResource H_Color_Primary_Yellow}" />
                        </FZTextBlock>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="Text_PerfTest" TargetType="{Type TextBlock}">
            <Setter Property="Text" Value="{local:Loc UserConfig.IDS_MSAA_Label_Desc}" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="FontSize" Value="50" />
            <Setter Property="Margin" Value="0,50,0,0" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Foreground">
                <Setter.Value>
                    <SolidColorBrush Color="Magenta"/>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="LongTextTest" TargetType="{Type FZTextBlock}">
            <Setter Property="Text" Value="{local:Loc UserConfig.IDS_MSAA_Label_Desc}" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="FontSize" Value="50" />
        </Style>

        <Style TargetType="local:FZMediaElement"
               x:Key="A_Style_FZMediaElement_SignLanguageVideo">
            <Setter Property="IsMuted" Value="True"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        </Style>

        <MappingConverter x:Key="ButtonToVideo" Default="Game:\Media\UI\Videos\UIDebugTest\ui_hud_test_day.bk2">
            <MappingConverterEntry Key="day" Value="Game:\Media\UI\Videos\UIDebugTest\ui_hud_test_day.bk2" />
            <MappingConverterEntry Key="night" Value="Game:\Media\UI\Videos\UIDebugTest\ui_hud_test_night.bk2" />
            <MappingConverterEntry Key="sky" Value="Game:\Media\UI\Videos\UIDebugTest\ui_hud_test_sky.bk2" />
        </MappingConverter>

        <Style x:Key="{x:Type RadioButton}" TargetType="RadioButton">
            <Setter Property="FontSize" Value="20" />
        </Style>
    </Page.Resources>
 
    <Grid x:Name="PART_LayoutRoot" >
        <Grid.Style>
            <Style TargetType="Grid" BasedOn="{StaticResource A_Style_FrameworkElement_LayoutRoot}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=Day}" Value="True">
                        <Setter Property="Tag" Value="day" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=Night}" Value="True">
                        <Setter Property="Tag" Value="night" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=Sky}" Value="True">
                        <Setter Property="Tag" Value="sky" />
                    </DataTrigger>
                </Style.Triggers>
                <Setter Property="Tag" Value="day" />
            </Style>
        </Grid.Style>

        <Grid x:Name="Backgrounds">
            <FZMaterial Color="White" Style="{StaticResource Background_Style}" />
            <FZMaterial Color="#FFC8E6E6" Visibility="{Binding IsChecked, ElementName=ShowConcepts, Converter={StaticResource SelectedToVis}}" Style="{StaticResource Background_Style}" />
        </Grid>

        <UniformGrid x:Name="Default" 
                     Visibility="{Binding IsChecked, ElementName=ShowDefault, Converter={StaticResource SelectedToVis}}" 
                     Margin="0,50,0,150" 
                     HorizontalAlignment="Center"
                     VerticalAlignment="Top"
                     Rows="5"
                     RenderTransformOrigin="0.5,0.5" 
                     Height="auto">
            <FZTextBlock FontSize="18" />
            <FZTextBlock FontSize="18" Effect="{StaticResource OutlineThin}"/>
            <FZTextBlock FontSize="110" Effect="{StaticResource OutlineThick}"/>
            <FZTextBlock Text="QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ! " FontSize="110" Effect="{StaticResource OutlineThin}" Margin="0,110,0,0" /> 
            <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                <FZMaterial x:Name="rectangle1" 
                            Width="36" Height="36" 
                            Effect="{StaticResource OutlineThin}" />
                <Decorator Width="100" />
                <FZMaterial x:Name="rectangle2" 
                            Width="36" Height="36"
                            Effect="{StaticResource OutlineThick}" />
            </StackPanel>
        </UniformGrid>

        <UniformGrid x:Name="LargeRadiusIssue" 
                     Visibility="{Binding IsChecked, ElementName=ShowLargeRadiusIssue, Converter={StaticResource SelectedToVis}}" 
                     Margin="0,200,0,0" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Top" 
                     Rows="4" 
                     RenderTransformOrigin="0.5,0.5" 
                     Height="400">
            <FZTextBlock FontSize="18" Effect="{StaticResource OutlineWithGapForSmallFont}"/>
            <FZTextBlock Text="QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ! "  FontSize="18" Effect="{StaticResource OutlineWithGapForSmallFont}"/> 

            <FZTextBlock FontSize="110" Effect="{StaticResource OutlineWithGapForLargeFont}"/>
            <FZTextBlock Text="QUICK BROWN FOX JUMPS OVER THE LAZY DOG. ! "  FontSize="110" Margin="0,100,0,0" Effect="{StaticResource OutlineWithGapForLargeFont}"/> 
        </UniformGrid>

        <StackPanel x:Name="LongText" Margin="10,120" HorizontalAlignment="Center" Orientation="Vertical" Visibility="{Binding IsChecked, ElementName=ShowLongText, Converter={StaticResource SelectedToVis}}">
            <FZTextBlock Style="{StaticResource LongTextTest}" Effect="{StaticResource OutlineThin}"/>
            <FZMaterial Margin="0,20" Height="2" Opacity=".4" Color="Black" />
            <FZTextBlock Style="{StaticResource LongTextTest}" Effect="{StaticResource OutlineThick}"/>  
        </StackPanel> 

        <Grid x:Name="Concepts" 
              Visibility="{Binding IsChecked, ElementName=ShowConcepts, Converter={StaticResource SelectedToVis}}" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center" >
            <FZMediaElement x:Name="PART_VideoElement"
                            Source="{Binding Tag, ElementName=PART_LayoutRoot, Converter={StaticResource ButtonToVideo}}"
                            local:FzMediaElementExtension.Loop="True"
                            LoadedBehavior="Play"
                            Style="{StaticResource A_Style_FZMediaElement_SignLanguageVideo}" >
                <local:FZMediaElement.Preset>
                    <local:FZMaterialPresetRoundtangle AlphaMode="MultSrcAlpha" />
                </local:FZMediaElement.Preset>
            </local:FZMediaElement>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,200,0,0"> 
                <ContentControl x:Name="s_Option1" Tag="woodstock"  Visibility="{Binding IsChecked, ElementName=SkillSelector_Option1, Converter={StaticResource SelectedToVis}}" Style="{StaticResource SkillsTemplate}" />
                <ContentControl x:Name="s_Option2" Tag="s_4px_30p" Visibility="{Binding IsChecked, ElementName=SkillSelector_Option2, Converter={StaticResource SelectedToVis}}" Style="{StaticResource SkillsTemplate}" />
                <ContentControl x:Name="s_Option3" Tag="s_2px_80p" Visibility="{Binding IsChecked, ElementName=SkillSelector_Option3, Converter={StaticResource SelectedToVis}}" Style="{StaticResource SkillsTemplate}" />
                <ContentControl x:Name="s_Option4" Tag="s_1px_80p" Visibility="{Binding IsChecked, ElementName=SkillSelector_Option4, Converter={StaticResource SelectedToVis}}" Style="{StaticResource SkillsTemplate}" />
            </StackPanel>
        </Grid>

        <StackPanel x:Name="PerfTest" Margin="0,100,0,0" Orientation="Vertical" Visibility="{Binding IsChecked, ElementName=ShowPerfTests, Converter={StaticResource SelectedToVis}}" >
            <!-- no effect -->
            <StackPanel Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_NoEffect, Converter={StaticResource SelectedToVis}}">
                <TextBlock Style="{StaticResource Text_PerfTest}" />
                <TextBlock Style="{StaticResource Text_PerfTest}" />
            </StackPanel>

            <!-- outline -->
            <StackPanel Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_Outline, Converter={StaticResource SelectedToVis}}">
                <TextBlock Style="{StaticResource Text_PerfTest}" Effect="{StaticResource OutlineThick}" />
                <TextBlock Style="{StaticResource Text_PerfTest}" Effect="{StaticResource OutlineThin}" />
            </StackPanel>

            <!--  drop shadow ( synthesized ) -->
            <StackPanel Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_DropShadowSynthesized, Converter={StaticResource SelectedToVis}}" >
                <TextBlock Style="{StaticResource Text_PerfTest}" Effect="{StaticResource DropShadowSynthesized}"/> 
                <TextBlock Style="{StaticResource Text_PerfTest}" Margin="0,50,0,0" Effect="{StaticResource DropShadowSynthesized}"/> 
            </StackPanel>

            <!--  drop shadow ( non synthesized ) -->
            <StackPanel Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_DropShadowNonSynthesized, Converter={StaticResource SelectedToVis}}" >
                <TextBlock Style="{StaticResource Text_PerfTest}" Effect="{StaticResource DropShadowNonSynthesized}"/> 
                <TextBlock Style="{StaticResource Text_PerfTest}" Margin="0,50,0,0" Effect="{StaticResource DropShadowNonSynthesized}"/> 
            </StackPanel>
            
            <!-- motion blur -->
            <StackPanel x:Name="MotionBlurElements"
                        Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_MotionBlur, Converter={StaticResource SelectedToVis}}" >
                <StackPanel.RenderTransform>
                    <TranslateTransform />
                </StackPanel.RenderTransform>
                <TextBlock Style="{StaticResource Text_PerfTest}"
                             Effect="{StaticResource A_MotionBlurEffect}" />
                <TextBlock Style="{StaticResource Text_PerfTest}"
                             Effect="{StaticResource A_MotionBlurEffect}"
                             Margin="10,50,10,0"/> 
            </StackPanel>

            <!-- blur effect -->
             <StackPanel Orientation="Vertical"
                        Margin="10,0,10,0"
                        Visibility="{Binding IsChecked, ElementName=PerfOptions_Blur, Converter={StaticResource SelectedToVis}}" >
                <TextBlock Style="{StaticResource Text_PerfTest}" Effect="{StaticResource Blur}"/> 
                <TextBlock Style="{StaticResource Text_PerfTest}" Margin="0,50,0,0" Effect="{StaticResource Blur}"/> 
            </StackPanel>

        </StackPanel> 


        <!-- SELECTORS -->
        <StackPanel x:Name="ScreenSelectors" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="30,130,0,0">
        
            <Grid x:Name="PageSelector" >
                <FZMaterial Color="#99F7F7F7" Width="auto" >
                    <StackPanel x:Name="ContentToDisplay" Margin="10">
                        <RadioButton GroupName="PageToShow" x:Name="ShowDefault" Content="Default" IsChecked="False"/>
                        <RadioButton GroupName="PageToShow" x:Name="ShowLongText" Content="Long Text" IsChecked="True"/>
                        <RadioButton GroupName="PageToShow" x:Name="ShowLargeRadiusIssue" Content="Large Radius Issue" IsChecked="False"/>
                        <RadioButton GroupName="PageToShow" x:Name="ShowConcepts" Content="Concepts" IsChecked="False"/>
                        <RadioButton GroupName="PageToShow" x:Name="ShowPerfTests" Content="Perf Tests" IsChecked="False"/>
                    </StackPanel>
                </FZMaterial>
            </Grid>

            <StackPanel x:Name="ConceptOptionSelector" 
                        Orientation="Vertical" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Top" 
                        Visibility="{Binding IsChecked, ElementName=ShowConcepts, Converter={StaticResource SelectedToVis}}"
                        Margin="0,30,0,0" >
                <Grid x:Name="VideoSelector" >
                    <FZMaterial Color="#99F7F7F7" Width="auto"  >
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="10" >
                            <RadioButton x:Name="Day" GroupName="BackgroundVideo" Content="Day" IsChecked="True" />
                            <RadioButton x:Name="Night" GroupName="BackgroundVideo" Content="Night" />
                            <RadioButton x:Name="Sky" GroupName="BackgroundVideo" Content="Sky" />
                        </StackPanel>
                    </FZMaterial>
                </Grid>

                <Grid x:Name="SkillSelector" >
                    <FZMaterial Color="#99F7F7F7" Width="auto" Margin="0,10">
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="10" >
                            <RadioButton x:Name="SkillSelector_Option1" GroupName="SkillToDisplay" Content="{Binding Tag, ElementName=s_Option1}" IsChecked="True" />
                            <RadioButton x:Name="SkillSelector_Option2" GroupName="SkillToDisplay" Content="{Binding Tag, ElementName=s_Option2}" />
                            <RadioButton x:Name="SkillSelector_Option3" GroupName="SkillToDisplay" Content="{Binding Tag, ElementName=s_Option3}" />
                            <RadioButton x:Name="SkillSelector_Option4" GroupName="SkillToDisplay" Content="{Binding Tag, ElementName=s_Option4}" />
                        </StackPanel>
                    </FZMaterial>
                </Grid>
            </StackPanel>

            <StackPanel x:Name="PerfOptionsSelector" 
                        Orientation="Vertical" 
                        HorizontalAlignment="Left" 
                        VerticalAlignment="Top" 
                        Visibility="{Binding IsChecked, ElementName=ShowPerfTests, Converter={StaticResource SelectedToVis}}"
                        Margin="0,30,0,0" >
                <Grid>
                    <FZMaterial Color="#99F7F7F7" Width="auto"  >
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Margin="10" >
                            <RadioButton x:Name="PerfOptions_NoEffect" GroupName="EffectToRender" Content="No Effect" IsChecked="True" />
                            <RadioButton x:Name="PerfOptions_DropShadowSynthesized" GroupName="EffectToRender" Content="DropShadow ( Synth )" />
                            <RadioButton x:Name="PerfOptions_DropShadowNonSynthesized" GroupName="EffectToRender" Content="DropShadow ( Non-Synth )" />
                            <RadioButton x:Name="PerfOptions_Outline" GroupName="EffectToRender" Content="Outline" />
                            <RadioButton x:Name="PerfOptions_MotionBlur" GroupName="EffectToRender" Content="MotionBlur" />
                            <RadioButton x:Name="PerfOptions_Blur" GroupName="EffectToRender" Content="Blur" />
                        </StackPanel>
                    </FZMaterial>
                </Grid>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>
