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

Question

As you can see in below code which I got from Microsoft Sample

<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 above code I am interested only in one in line which is shown below AutomationProperties.AutomationId="itemGridView"

AutomationProperties.Name="Grouped Items"

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

Answer 1

From the Microsoft Overview of UI Automation

... It enables assistive technology products, such as screen readers, to provide information about the UI to end users and to manipulate the UI 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 create a new Windows Store Grid App, check out the GroupedItemsPage.xaml. You'll see a few places where AutomationProperties.Name has been set.

Now open the Windows 8 Charms Bar and search for "Narrator," and run the Narrator app that comes up in the results. You'll hear a man start reading things on the screen.

If you go back to Visual Studio and run the new Grid App you created, the Narrator will read various things in the Grid App, some of which will be the AutomationProperties.Names defined in xaml.

Try changing the AutomationProperties.Name to get a feel for how it works.