<!--
    //*********************************************************
    //
    // Copyright (c) Microsoft. All rights reserved.
    // THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
    // ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
    // IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
    // PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
    //
    //*********************************************************
-->
<Page
    x:Class="AppUIBasics.ItemPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:AppUIBasics.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:AppUIBasics.Data"
    xmlns:local="using:AppUIBasics"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="pageRoot"
    mc:Ignorable="d">

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid x:Name="rootPanel" d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/ControlinfoData.json, Type=data:ControlInfoDataSource}}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <local:DeviceFamilyTrigger DeviceFamily="Windows.Xbox" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="svPanel.Margin" Value="0,0,48,27" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup>
                <VisualState x:Name="NormalFrameContent" />
                <VisualState x:Name="WideFrameContent">
                    <VisualState.Setters>
                        <Setter Target="contentFrame.Width" Value="1028" />
                        <Setter Target="contentFrame.HorizontalAlignment" Value="Left" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="LayoutVisualStates">
                <VisualState x:Name="LargeLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="1372" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint640Plus}" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="seeAlsoPanel.Width" Value="Auto" />
                        <Setter Target="seeAlsoPanel.(Grid.Row)" Value="3" />
                        <Setter Target="seeAlsoPanel.(Grid.Column)" Value="0" />
                        <Setter Target="seeAlsoPanel.(Grid.ColumnSpan)" Value="3" />

                        <Setter Target="SourcePanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="DocumentationPanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="RelatedControlsPanel.(Grid.Row)" Value="0" />
                        <Setter Target="RelatedControlsPanel.(Grid.Column)" Value="2" />
                        <Setter Target="RelatedControlsPanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="FeedbackPanel.(Grid.Row)" Value="1" />
                        <Setter Target="FeedbackPanel.(Grid.Column)" Value="2" />
                        <Setter Target="FeedbackPanel.(Grid.ColumnSpan)" Value="1" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="seeAlsoPanel.Width" Value="Auto" />
                        <Setter Target="seeAlsoPanel.(Grid.Row)" Value="3" />
                        <Setter Target="seeAlsoPanel.(Grid.Column)" Value="0" />
                        <Setter Target="seeAlsoPanel.(Grid.ColumnSpan)" Value="3" />

                        <Setter Target="SourcePanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="DocumentationPanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="RelatedControlsPanel.(Grid.Row)" Value="0" />
                        <Setter Target="RelatedControlsPanel.(Grid.Column)" Value="2" />
                        <Setter Target="RelatedControlsPanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="FeedbackPanel.(Grid.Row)" Value="1" />
                        <Setter Target="FeedbackPanel.(Grid.Column)" Value="2" />
                        <Setter Target="FeedbackPanel.(Grid.ColumnSpan)" Value="1" />

                        <Setter Target="rightMargin.Width" Value="0" />
                        <Setter Target="contentRoot.Padding" Value="14,0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!--  Content Region  -->
        <ScrollViewer
            x:Name="svPanel"

            VerticalScrollBarVisibility="Auto"
            VerticalScrollMode="Auto">
            <Grid x:Name="contentRoot" Padding="24,0,0,0" SizeChanged="OnContentRootSizeChanged">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="contentColumn" />
                    <ColumnDefinition x:Name="rightMargin" Width="20" />
                    <ColumnDefinition x:Name="infoColumn" Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="20" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock
                    x:Name="descriptionText"
                    Style="{ThemeResource BodyTextBlockStyle}"
                    Grid.ColumnSpan="2"
                    Margin="0,5,24,0"
                    Text="{x:Bind Item.Description}" />

                <Frame x:Name="contentFrame" Grid.Row="1" />

                <Grid
                    x:Name="seeAlsoPanel"
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="2"
                    Width="280"
                    Margin="0,0,24,24">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <StackPanel x:Name="SourcePanel" Grid.Row="0" Grid.ColumnSpan="3" Margin="0,0,0,40">
                        <TextBlock
                            x:Name="SourceHeader"
                            x:Uid="SourceHeader"
                            Style="{ThemeResource SubtitleTextBlockStyle}"
                            Text="View page code on GitHub"/>
                        <HyperlinkButton
                            x:Name="PageMarkupGitHubLink"
                            ToolTipService.ToolTip="{x:Bind PageMarkupGitHubLink.NavigateUri, Mode=OneWay}">
                            <TextBlock Text="XAML source code"/>
                        </HyperlinkButton>
                        <HyperlinkButton
                            x:Name="PageCodeGitHubLink"
                            ToolTipService.ToolTip="{x:Bind PageCodeGitHubLink.NavigateUri, Mode=OneWay}"
                            Margin="0,12,0,0">
                            <TextBlock Text="C# source code"/>
                        </HyperlinkButton>
                    </StackPanel>

                    <StackPanel x:Name="DocumentationPanel" Grid.Row="1" Grid.ColumnSpan="3" Margin="0,0,0,40">
                        <TextBlock
                            x:Name="docHeader"
                            x:Uid="DocHeader"
                            Style="{StaticResource SubtitleTextBlockStyle}" />
                        <ItemsControl
                            x:Name="DocsList"
                            Margin="0,12,0,0"
                            IsTabStop="False"
                            ItemsSource="{x:Bind Item.Docs}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate x:DataType="data:ControlInfoDocLink">
                                    <HyperlinkButton NavigateUri="{Binding Uri}" ToolTipService.ToolTip="{Binding Uri}">
                                        <TextBlock Text="{x:Bind Title}" />
                                    </HyperlinkButton>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>

                    <StackPanel x:Name="RelatedControlsPanel" Grid.Row="2" Grid.ColumnSpan="3" Margin="0,0,0,40">
                        <TextBlock
                            x:Name="relatedControlsHeader"
                            x:Uid="RelatedControlsHeader"
                            Style="{StaticResource SubtitleTextBlockStyle}" />

                        <ItemsControl
                            x:Name="relatedItemsControl"
                            Margin="0,12,0,0"
                            IsTabStop="False"
                            ItemsSource="{x:Bind Item.RelatedControls}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate x:DataType="x:String">
                                    <!-- A HyperlinkButton must always provide an accessible name to a screen reader which
                                         conveys the purpose of the link. By default, when the HyperlinkButton is built
                                         as below, with an Image and TextBlock, the HyperlinkButton provides no accessible
                                         name. So bind the accessible name to the same data that provides the text shown
                                         visually on the contained TextBlock. -->
                                    <HyperlinkButton AutomationProperties.Name="{x:Bind}" Click="OnRelatedControlClick">
                                        <RelativePanel>
                                            <!-- Now that the HyperlinkButton has a helpful accessible name, it serves no
                                                 useful purpose for the contained Image, (which is purely decorative,) or
                                                 the contained TextBlock to be exposed to a screen reader. All the information
                                                 required by customers using a screen reader is accessible directly through the
                                                 Hyperlink button. As such, mark the contained elements as not being interesting
                                                 to a screen reader through use of the AutomationProperties.AccessibilityView
                                                 property. -->
                                            <Image
                                                AutomationProperties.AccessibilityView="Raw"
                                                x:Name="iconImage"
                                                Width="25"
                                                Margin="0,0,15,0"
                                                common:ImageLoader.Source="{Binding}" />
                                            <TextBlock
                                                AutomationProperties.AccessibilityView="Raw"
                                                Foreground="{ThemeResource HyperlinkButtonForeground}"
                                                RelativePanel.RightOf="iconImage"
                                                Text="{x:Bind}"
                                                TextWrapping="Wrap" />
                                        </RelativePanel>
                                    </HyperlinkButton>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>

                    <StackPanel x:Name="FeedbackPanel" Grid.Row="3" Grid.ColumnSpan="3">
                        <TextBlock
                            x:Name="feedbackHeader"
                            x:Uid="FeedbackHeader"
                            Style="{StaticResource SubtitleTextBlockStyle}" />
                        <HyperlinkButton NavigateUri="https://github.com/microsoft/Xaml-Controls-Gallery/issues/new/choose" 
                                         ToolTipService.ToolTip="https://github.com/microsoft/Xaml-Controls-Gallery/issues/new/choose">
                            <TextBlock x:Uid="FeedbackLink" />
                        </HyperlinkButton>
                    </StackPanel>
                </Grid>
            </Grid>
        </ScrollViewer>
    </Grid>
</Page>