<!--
//*********************************************************
//
// 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>