Windows 8 Metro :: What is AutomationProperties.AutomationId and AutomationProperties.Name

Question

As you can see in the code below, which I got from Microsoft example

<SemanticZoom.ZoomedOutView> <tiles:VariableTileControl x:Name="SemanticItemGridView" AutomationProperties.AutomationId="itemGridView" AutomationProperties.Name="Grouped Items" Padding="80,87,10,0" ItemsSource="{Binding Source={StaticResource SemanticgroupedItemsViewSource}}" ItemTemplateSelector="{StaticResource SemanticMyTemplates}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" Margin="0,0,0,-13" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemContainerStyle="{StaticResource SemanticGridViewItemStyle}"> <tiles:VariableTileControl.ItemsPanel> <ItemsPanelTemplate> <VariableSizedWrapGrid Margin="0,0,10,0"/> </ItemsPanelTemplate> </tiles:VariableTileControl.ItemsPanel> <tiles:VariableTileControl.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel Margin="1,0,0,6" Orientation="Horizontal" MinWidth="280"> <Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource TextButtonStyle}" Foreground="White" FontSize="28" Background="#FFD71921" FontWeight="Light"/> <TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/> <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text="("/> <TextBlock x:Name="txtNo" TextWrapping="Wrap" Text="{Binding No}" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light"/> <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text=")"/> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/> <TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/> <TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,10,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </tiles:VariableTileControl.GroupStyle> </tiles:VariableTileControl> </SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView> <GridView x:Name="itemGridView" AutomationProperties.AutomationId="itemGridView" AutomationProperties.Name="Grouped Items" Padding="116,110,40,10" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource LivTemplates}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" ScrollViewer.HorizontalScrollBarVisibility="Disabled"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal" Margin="0,0,80,0"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle ContainerStyle="{StaticResource HubPageMoreGroupItemStyle}"> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel Margin="1,0,0,6" Orientation="Horizontal"> <Button AutomationProperties.Name="Group Title" Content="{Binding name}" Click="Header_Click" Style="{StaticResource TextButtonStyle}" Foreground="White" FontSize="32" Background="#FFD71921" FontWeight="Light"/> <TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/> <TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/> <TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,133,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </SemanticZoom.ZoomedInView> 

In the above code, I am only interested in one in a row, which is shown below AutomationProperties.AutomationId = "itemGridView"

AutomationProperties.Name = "Grouped Items"

I want to know what is the role of the above lines in xaml.

Answer 1

From Microsoft UI Automation Overview

... It allows assistive technology products, such as screen readers, to provide user interface information to end users and manage the user interface by means other than standard input ...

http://msdn.microsoft.com/en-us/library/windows/desktop/ee684009.aspx

EDIT:

For example, in Visual Studio, if you are creating a new application for the Windows Store, check out GroupedItemsPage.xaml. You will see several places where AutomationProperties.Name is set.

Now open the Windows 8 Charms panel and find the Storyteller and launch the Storyteller application that appears in the results. You will hear how a person begins to read things on the screen.

If you go back to Visual Studio and launch the new Grid application that you created, the storyteller will read various things in the Grid application, some of which will be the names AutomationProperties.Names defined in xaml.

Try changing the name AutomationProperties.Name to understand how this works.

Answer 2

I did some research on this, I wanted to use it to set the visibility inside the Style-ControlTemplate.

However, this page explains how you can use AutomationProperties: http://msdn.microsoft.com/en-us/library/ff400332%28v=vs.95%29.aspx

For example, consider this xaml ::

 <Button AutomationProperties.Name="Back" Content="{Binding Title}" Style="{StaticResource TextButtonStyle}" /> 

Look at the style it uses: {StaticResource TextButtonStyle} , this matches the style in one of your ResourceDictionaries.

  <Style x:Key="TextButtonStyle" TargetType="ButtonBase"> 

Inside this style, you can use AutomationProperties:

 <TextBlock x:Name="TextLabel" Text="{TemplateBinding AutomationProperties.Name}" /> 

So you can use AutomationProperties to populate the template with specific properties.