ToolkitDocumentationRenderer.xaml

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="CommunityToolkit.App.Shared.Renderers.ToolkitDocumentationRenderer"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:behaviors="using:CommunityToolkit.App.Shared.Behaviors"
      xmlns:converters="using:CommunityToolkit.WinUI.Converters"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:local="using:CommunityToolkit.App.Shared"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:metadata="using:CommunityToolkit.Tooling.SampleGen.Metadata"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:renderer="using:CommunityToolkit.App.Shared.Renderers"
      xmlns:wasm="http://uno.ui/wasm"
      xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      mc:Ignorable="d wasm">

    <Page.Resources>
        <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
        <!--  Overriding the default Markdown styling to be inline with the default Windows typography / design guidelines  -->
        <win:Style TargetType="renderer:MarkdownTextBlock">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="LinkForeground" Value="{ThemeResource AccentTextFillColorPrimaryBrush}" />
            <Setter Property="QuoteBackground" Value="Transparent" />
            <Setter Property="QuoteForeground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
            <Setter Property="QuoteBorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
            <Setter Property="QuoteBorderThickness" Value="1, 0, 0, 0" />
            <Setter Property="QuoteMargin" Value="12, 8, 0, 8" />
            <Setter Property="QuotePadding" Value="12, 4, 0, 4" />
            <Setter Property="CodeBackground" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
            <Setter Property="CodeBorderBrush" Value="{ThemeResource CardStrokeColorDefaultBrush}" />
            <Setter Property="CodeBorderThickness" Value="1" />
            <Setter Property="CodeFontFamily" Value="Consolas" />
            <Setter Property="CodeMargin" Value="0, 8, 0, 8" />
            <Setter Property="CodePadding" Value="12, 10, 12, 8" />
            <Setter Property="InlineCodeBorderThickness" Value="1" />
            <Setter Property="InlineCodePadding" Value="4, 1, 4, 0" />
            <Setter Property="InlineCodeMargin" Value="2,2,2,-4" />
            <Setter Property="InlineCodeBackground" Value="{ThemeResource CardBackgroundFillColorSecondaryBrush}" />
            <Setter Property="InlineCodeBorderBrush" Value="Transparent" />
            <Setter Property="InlineCodeForeground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
            <Setter Property="InlineCodeFontFamily" Value="Consolas" />
            <Setter Property="EmojiFontFamily" Value="Segoe UI Emoji" />
            <!--  Title  -->
            <Setter Property="Header1FontWeight" Value="SemiBold" />
            <Setter Property="Header1FontSize" Value="28" />
            <Setter Property="Header1Margin" Value="0, 20, 0, 4" />
            <Setter Property="Header1Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <!--  Custom  -->
            <Setter Property="Header2FontWeight" Value="SemiBold" />
            <Setter Property="Header2FontSize" Value="18" />
            <Setter Property="Header2Margin" Value="0, 20, 0, 0" />
            <Setter Property="Header2Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <!--  Subtitle  -->
            <Setter Property="Header3FontWeight" Value="SemiBold" />
            <Setter Property="Header3FontSize" Value="16" />
            <Setter Property="Header3Margin" Value="0, 16, 0, 0" />
            <Setter Property="Header3Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <!--  Body Large Strong  -->
            <Setter Property="Header4FontWeight" Value="SemiBold" />
            <Setter Property="Header4FontSize" Value="14" />
            <Setter Property="Header4Margin" Value="0, 16, 0, 0" />
            <Setter Property="Header4Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <!--  Body Large  -->
            <Setter Property="Header5FontWeight" Value="Normal" />
            <Setter Property="Header5FontSize" Value="14" />
            <Setter Property="Header5Margin" Value="0, 16, 0, 0" />
            <Setter Property="Header5Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <!--  Body Strong  -->
            <Setter Property="Header6FontWeight" Value="SemiBold" />
            <Setter Property="Header6FontSize" Value="14" />
            <Setter Property="Header6Margin" Value="0, 16, 0, 0" />
            <Setter Property="Header6Foreground" Value="{ThemeResource TextFillColorPrimaryBrush}" />
            <Setter Property="HorizontalRuleBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
            <Setter Property="HorizontalRuleMargin" Value="0, 8, 0, 8" />
            <Setter Property="HorizontalRuleThickness" Value="1" />
            <Setter Property="ListMargin" Value="0, 4, 0, 4" />
            <Setter Property="ListGutterWidth" Value="4" />
            <Setter Property="ListBulletSpacing" Value="4" />
            <Setter Property="ParagraphMargin" Value="0, 0, 0, 12" />
            <Setter Property="ParagraphLineHeight" Value="20" />
            <Setter Property="TableBorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
            <Setter Property="TableBorderThickness" Value="1" />
            <Setter Property="TableCellPadding" Value="8, 4, 8, 4" />
            <Setter Property="YamlBorderThickness" Value="1" />
            <Setter Property="YamlBorderBrush" Value="{ThemeResource DividerStrokeColorDefaultBrush}" />
            <Setter Property="TableMargin" Value="0, 8, 0, 8" />
            <Setter Property="TextWrapping" Value="Wrap" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="renderer:MarkdownTextBlock">
                        <Border x:Name="RootElement"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </win:Style>

        <DataTemplate x:Key="DocumentTemplate"
                      x:DataType="x:String">
            <renderer:MarkdownTextBlock wasm:IsTextSelectionEnabled="True"
                                        Background="Transparent"
                                        LinkClicked="MarkdownTextBlock_LinkClicked"
                                        Text="{Binding}"
                                        TextWrapping="WrapWholeWords" />
        </DataTemplate>

        <DataTemplate x:Key="SampleTemplate"
                      x:DataType="metadata:ToolkitSampleMetadata">
            <renderer:ToolkitSampleRenderer Margin="0,16,0,16"
                                            Metadata="{Binding}" />
        </DataTemplate>

        <local:DocOrSampleTemplateSelector x:Key="DocOrSampleTemplateSelector"
                                           Document="{StaticResource DocumentTemplate}"
                                           Sample="{StaticResource SampleTemplate}" />
        <converters:DoubleToVisibilityConverter x:Name="doubleToVisibilityConverter"
                                                FalseValue="Collapsed"
                                                GreaterThan="1"
                                                NullValue="Collapsed"
                                                TrueValue="Visible" />
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutVisualStates">
                <VisualState x:Name="LeftMedium">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint1008Plus}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters />
                </VisualState>
                <VisualState x:Name="LeftCompact">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint641Plus}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters />
                </VisualState>

                <VisualState x:Name="LeftMinimal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="DocItemsControl.Margin" Value="16,0,16,0" />
                        <Setter Target="HeaderGrid.Margin" Value="16,8,16,32" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="HeaderStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Collapsed">
                    <VisualState.Setters>
                        <Setter Target="HeaderGrid.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollViewer Grid.Row="1">
            <ItemsControl x:Name="DocItemsControl"
                          Margin="40,0,40,0"
                          ItemTemplateSelector="{StaticResource DocOrSampleTemplateSelector}"
                          ItemsSource="{x:Bind DocsAndSamples, Mode=OneWay}" />
        </ScrollViewer>

        <!--  Header grid  -->
        <Grid x:Name="HeaderGrid"
              Margin="40,24,40,24"
              VerticalAlignment="Top"
              ColumnSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="HeaderText"
                       VerticalAlignment="Stretch"
                       win:AutomationProperties.HeadingLevel="Level1"
                       Style="{StaticResource TitleTextBlockStyle}"
                       Text="{x:Bind Metadata.Title, Mode=OneWay}" />

            <TextBlock Grid.Row="1"
                       Margin="0,8,0,0"
                       HorizontalAlignment="Left"
                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                       Text="{x:Bind Metadata.Description, Mode=OneWay}"
                       TextWrapping="WrapWholeWords" />

            <StackPanel x:Name="ButtonPanel"
                        Grid.Row="2"
                        Margin="0,16,0,0"
                        x:Load="{x:Bind renderer:ToolkitDocumentationRenderer.IsProjectPathValid()}"
                        Orientation="Horizontal"
                        Spacing="8">
                <!--   <Button>
                    <StackPanel Orientation="Horizontal">
                        <FontIcon FontSize="14"
                                  Glyph="&#xF000;" />
                        <TextBlock Margin="8,0,0,0"
                                   Text="API doc" />
                    </StackPanel>
                    <interactivity:Interaction.Behaviors>
                        <interactivity:EventTriggerBehavior EventName="Click">
                            <behaviors:NavigateToUriAction NavigateUri="{x:Bind renderer:ToolkitDocumentationRenderer.ToGitHubUri('discussions', Metadata.DiscussionId), Mode=OneWay}" />
                        </interactivity:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </Button>-->
                <Button win:AutomationProperties.Name="Source code">
                    <StackPanel Orientation="Horizontal"
                                Spacing="8">
                        <PathIcon VerticalAlignment="Center"
                                  win:AutomationProperties.AccessibilityView="Raw"
                                  Data="{StaticResource GitHubIcon}" />
                        <TextBlock Text="Source code" />
                    </StackPanel>
                    <interactivity:Interaction.Behaviors>
                        <interactivity:EventTriggerBehavior EventName="Click">
                            <behaviors:NavigateToUriAction NavigateUri="{x:Bind renderer:ToolkitDocumentationRenderer.ToComponentUri(Metadata.ComponentName, Metadata.IsExperimental), Mode=OneWay}" />
                        </interactivity:EventTriggerBehavior>
                    </interactivity:Interaction.Behaviors>
                </Button>
                <muxc:DropDownButton win:AutomationProperties.Name="Package info">
                    <StackPanel Orientation="Horizontal">
                        <FontIcon win:AutomationProperties.AccessibilityView="Raw"
                                  FontSize="14"
                                  Glyph="&#xF158;" />
                        <TextBlock Margin="8,0,0,0"
                                   Text="Package info" />
                    </StackPanel>
                    <muxc:DropDownButton.Flyout>
                        <Flyout Placement="Bottom">
                            <StackPanel Orientation="Vertical"
                                        Spacing="4">
                                <TextBlock Foreground="{StaticResource TextFillColorSecondaryBrush}"
                                           Style="{StaticResource CaptionTextBlockStyle}"
                                           Text="Namespace" />
                                <TextBlock FontFamily="Consolas"
                                           IsTextSelectionEnabled="True"
                                           Text="{x:Bind renderer:ToolkitDocumentationRenderer.ToPackageNamespace(Metadata.CsProjName), Mode=OneWay}" />
                                <TextBlock Margin="0,24,0,0"
                                           Foreground="{StaticResource TextFillColorSecondaryBrush}"
                                           Style="{StaticResource CaptionTextBlockStyle}"
                                           Text="NuGet package" />
                                <TextBlock IsTextSelectionEnabled="True">
                                    <Hyperlink FontFamily="Consolas"
                                               NavigateUri="{x:Bind renderer:ToolkitDocumentationRenderer.ToPackageUri('Uwp', Metadata.CsProjName, Metadata.IsExperimental), Mode=OneWay}"
                                               TextDecorations="None">
                                        <Run Text="{x:Bind renderer:ToolkitDocumentationRenderer.ToPackageName('Uwp', Metadata.CsProjName, Metadata.IsExperimental), Mode=OneWay}" />
                                    </Hyperlink>
                                </TextBlock>
                                <TextBlock IsTextSelectionEnabled="True">
                                    <Hyperlink FontFamily="Consolas"
                                               NavigateUri="{x:Bind renderer:ToolkitDocumentationRenderer.ToPackageUri('WinUI', Metadata.CsProjName, Metadata.IsExperimental), Mode=OneWay}"
                                               TextDecorations="None">
                                        <Run Text="{x:Bind renderer:ToolkitDocumentationRenderer.ToPackageName('WinUI', Metadata.CsProjName, Metadata.IsExperimental), Mode=OneWay}" />
                                    </Hyperlink>
                                </TextBlock>
                            </StackPanel>
                        </Flyout>
                    </muxc:DropDownButton.Flyout>
                </muxc:DropDownButton>
            </StackPanel>
            <ComboBox x:Name="SampleSelectionBox"
                      Grid.RowSpan="2"
                      Grid.Column="1"
                      MinWidth="160"
                      HorizontalAlignment="Right"
                      VerticalAlignment="Bottom"
                      win:AutomationProperties.Name="Go to sample"
                      ItemsSource="{x:Bind Samples, Mode=OneWay}"
                      SelectedIndex="0"
                      SelectionChanged="SampleSelectionBox_SelectionChanged"
                      Visibility="{x:Bind Samples.Count, Converter={StaticResource doubleToVisibilityConverter}}">
                <ComboBox.Header>
                    <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                               Style="{StaticResource CaptionTextBlockStyle}"
                               Text="Go to sample:" />
                </ComboBox.Header>
                <ComboBox.ItemTemplate>
                    <DataTemplate x:DataType="metadata:ToolkitSampleMetadata">
                        <TextBlock Text="{Binding DisplayName, Mode=OneWay}" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>

            <muxc:InfoBar Title="Experimental"
                          Grid.Row="3"
                          Grid.ColumnSpan="2"
                          Margin="0,16,0,16"
                          BorderBrush="Transparent"
                          IsClosable="False"
                          IsOpen="{x:Bind BoolFalseIfNull(Metadata.IsExperimental), Mode=OneWay}"
                          Message="This is component it part of Toolkit Labs and is considered experimental."
                          Severity="Warning">
                <muxc:InfoBar.ActionButton>
                    <HyperlinkButton Content="Learn more about Toolkit Labs"
                                     NavigateUri="https://aka.ms/toolkit/labs/windows" />
                </muxc:InfoBar.ActionButton>
            </muxc:InfoBar>
        </Grid>
    </Grid>
</Page>