Develop Reference

Setting automationIDs for dataitems in a WPF Grid for automation with UI Automation Framework

I've got an application that's written in C# using .NET Framework 3.5 and want to automate the UI using Microsoft UI Automation Framework. I'm not allowed to show everything here, because it's a software from my company.
In this application I'm generating a grid that displays my data items.
I've tried to set the automationIDs for every data item in the grid through XAML, but the problem is, that I can't see the dataitems there. They are dynamically generated during runtime of my application. Only the grid that contains the data items is defined in the XAML. I will post a snippet of my XAML below.
I've also tried to set the automationIDs through the Code of the program, but I only managed to get the AutomationElement of every data item. There I'm stuck. I don't know how to set the automationIds for every AutomationElement there.
To sum it up I am either looking for:
Setting the automationID for data items in a WPF grid through XAML
Setting the automationID for data item AutomationElement through Code
Screenshot of my Inspect Tool:
Inspect Tool
Snippet of my XAML Code:
<ListView IsEnabled="{Binding TestSelectorEnabled}" x:Name="ListView1" ItemsSource="{Binding TestsViewModel.TestsDataTable}" SelectedValue="{Binding TestsViewModel.SelectedTest}" SelectedValuePath="TestName" Height="180" View="{Binding TestsViewModel.GridView}" TabIndex="0" MinWidth="1" Focusable="False"/>
<Grid Visibility="Collapsed" IsSharedSizeScope="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
</Grid.RowDefinitions>
</Grid>

Try to specify ItemTemplate explicitly, it will let you set ids.
It should be an automation API to iterate though ListView children as well.

Thanks #Viktor Syromiatnikov this got me on the right track. I now managed to set a static automationId for every ListViewItem.
Does anyone know how I can set the automationID dynamic for every ListViewItem so it looks like dataitem1, dataitem2, dataitem3 for every new ListViewItem?
My XAML looks like this now:
<ListView IsEnabled="{Binding TestSelectorEnabled}" x:Name="ListView1" ItemsSource="{Binding TestsViewModel.TestsDataTable}" SelectedValue="{Binding TestsViewModel.SelectedTest}" SelectedValuePath="TestName" Height="180" View="{Binding TestsViewModel.GridView}" TabIndex="0" MinWidth="1" Focusable="False">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="AutomationProperties.AutomationId" Value="dataitem"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>

How can I bind a datatemplate to a observablecollection so that they all show up?

How can I bind a datatemplate to reproduce itself for each item within an observablecollection so that they all show up? Or must I add these as individual controls, at runtime?
So I have a datatemplate:
<UserControl.Resources>
<DataTemplate x:Key="QueueItem">
<StackPanel Orientation="Vertical">
<Label Content="{Binding caseNumber}"></Label>
<!--TODO: put my other controls for this template here...-->
</StackPanel>
</DataTemplate>
</UserControl.Resources>
And I implement it in xaml here:
<ContentControl
Content="{Binding TestItems}"
ContentTemplate="{StaticResource QueueItem}">
</ContentControl>
And in my viewmodel there is a instance TestItems of some class I made, and one member of that is caseNumber, so the code above works just fine for me... But now I would like to have an observable collection of that same class, so is it possible/ is there xaml syntax to bind to the collection instance to reproduce the above for each index?
Thanks!

You could use an ItemsControl and use the ItemsTemplate property for your template:
<ContentControl>
<ItemsControl
ItemsSource="{Binding YourTestItemList}"
ItemTemplate="{StaticResource QueueItem}"/>
</ContentControl>

Use ItemsControl instead of ContentControl
Click here for sample code

Controls in Listbox

I'm interesting, can I group some controls (image, 2-3 textboxes) in one element, and then push group of this elements in listbox? I'm trying to make a news reader of russian social network Vkontakte into Windwos Phone 7.
Each news has an image, text, and some other metadata. So I want to group all this info in one control and use it in listbox.
I tryied to push a grid(which had an image and two textboxes) into listbox, but it throws XamlParseException.
Also, I need to get the content of theese textboxes and images from code. In grid I can use
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>

Here is what you need:
A collection (ObservableCollection<T> recommended) of models (News in you case).
A ListBox
A DataTemplate
Example:
XAML:
<ListBox Name="ListBox1">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
...
<Image Source="{Binding ImagePropertyInModel}" ... />
<TextBlock Text="{Binding TextPropertyInModel}" ... />
...
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code behind:
ListBox1.ItemsSource = <collection of models>;
Instead of the <Grid> in <DataTemplate> you can use a Custom Control (Templated Control) or a User Control that you may already have.

You can create an UserControl with the controls you want to use. With your ListBox you do something like:
<ListBox ItemsSource="{Binding Path=YourItemsSource}">
<ListBox.ItemTemplate>
<DataTemplate>
<my:MyUserControl DataContext="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
As ItemsSource of your ListBox you could use a ObservableCollection of News and through DataContext="{Binding}" you can bind to the News properties in your UserControl, e.g.:
<UserControl...>
<Image Source="{Binding Path=photoAttachment}"/>
</UserControl>

Displaying Image in ComboBox's selected item

I have a custom template for my WPF windows ComboBoxes, which display items that inherit from ComboBoxItem that also have an Image property (so that my items can display both text and an image). Both the text and image display as expected in the ComboBox's popup menu for any given item, but I haven't been able to display an image in the currently selected item.
The ContentPresenter within the ComboBox template that displays the currently selected item has its Content property properly bound to {TemplateBinding SelectionBoxItem}, and its ContentTemplate is bound to the following static resource:
<DataTemplate x:Key="SelectionBoxItemTemplateTextAndImage" DataType="{x:Type SB:SBComboBoxItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Image}"/>
<TextBlock Grid.Column="1" Text="{Binding}"/>
</Grid>
</DataTemplate>
SBComboBoxItem is the custom control that inherits from ComboBox and contains an "Image" property properly registered as a DependencyProperty.
I have attempted alternative implementations of that DataTemplate, including using:
{Binding Path=Image, RelativeSource={RelativeSource TemplatedParent}}
as the image's source. That didn't work, even though the text still displays when i set the TextBlock's Text property to:
{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}
I've played around and found numerous implementations that display the text, but the equivalents never work for the image. I don't understand why this doesn't work, as setting up the popup to display both images and text was a breeze.
Edit: Here's the added functionality to ComboBoxItem to handle the image, in case there's something I did wrong there:
public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(Image), typeof(SBComboBoxItem));
public Image Image { get { return (Image)GetValue(ImageProperty); } set { SetValue(ImageProperty, value); } }
And here is where I have a ComboBox with the items added:
<ComboBox SelectedIndex="1">
<SB:SBComboBoxItem Content="Text">
<SB:SBComboBoxItem.Image>
<Image Source="..\Images\Table.png"/>
</SB:SBComboBoxItem.Image>
</SB:SBComboBoxItem>
<SB:SBComboBoxItem Content="MoreText">
<SB:SBComboBoxItem.Image>
<Image Source="..\Images\Euclidian.png"/>
</SB:SBComboBoxItem.Image>
</SB:SBComboBoxItem>
</ComboBox>

Despite the fact that I was using a DataTemplate to expose the underlying type of my selected combobox item through DataTemplate's DataType property, the SelectionBoxItem property of my ComboBox was apparently returning something that could not be cast as my custom ComboBoxItem. I don't know why this is, nor why it did not fire any runtime errors, but I found that by binding to ComboBox's SelectedItem property instead of SelectionBoxItem in the ContentPresenter allowed me to access user defined properties.

Does the DataTemplate even work? As far I remember, any WPF element that can be rendered, wont use a DataTemplate. And your custom ComboBoxItem can be rendered without the DataTemplate.
So the first question is, is the DataTemplate even applied? (Just change the background of DataTemplates' grid and find that out, if it works).
Let's assume the DataTemplate actually works, what I would try:
{Binding Path=Image, RelativeSource={RelativeSource AncestorType={x:Type SB:SBComboBoxItem}}
or RelativeSource as TemplatedParent with Content.Image

Okay, on the DataTemplate part, you have to bind against Image's Source property, not against Image itself.
Like so:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BitmapImage x:Key="validImg" UriSource="test.png" />
<DataTemplate x:Key="TEMP" DataType="ComboBoxItem">
<StackPanel Orientation="Horizontal">
<!--Not working Content(Image) is not valid for Source property I think-->
<Image Source="{Binding Path=Content}" />
<!--Working -->
<Image Source="{Binding Path=Content.Source}" />
<TextBlock Text="{Binding Path=Content}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentPresenter
Content="{Binding Items[0], ElementName=test}"
ContentTemplate="{StaticResource TEMP}">
</ContentPresenter>
<ComboBox x:Name="test" Height="50" Margin="0, 50, 0, 0">
<ComboBoxItem >
<ComboBoxItem.Content>
<Image Source="{StaticResource validImg}" />
</ComboBoxItem.Content>
</ComboBoxItem>
</ComboBox>
</Grid>

Silverlight DataGrid styling

I have a DataGrid whose ItemsSource is bound to a changing Observable Collection. Inside of this collection is a Business Object. Based on some of the values of the Business Object's properties, I would like to be able to modify the color of the text for each item displayed in my DataGrid once the ItemsSource is created.
Has anyone done this before or ran across something similar? Thanks in advance.
<DataTemplate x:Key="MyTemplate">
<Grid x:Name="LayoutRoot">
<TextBlock Text="{Binding MyText}"
Foreground="{Binding MyStatus, Converter={StaticResource colorConverter}}" />
</Grid>
</DataTemplate>
I added the above code and inserted the TemplateColumn to the grid as below:
<data:DataGridTemplateColumn Header="Testing"
CellTemplate="{StaticResource MyTemplate}"/>
The code works fine and pulls out the correct text but the converter never fires and the Binding of the foreground is never called from the get on it.
Any ideas?

Yes. Use a Value Converter when databinding.
<UserControl.Resources>
<myconverters:BackColor x:Key="BackColor" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="{Binding SomeValue, Converter={StaticResource BackColor}" >
</Grid>
Then have your converter class implement IValueConverter and return a Brush object of some kind. You usually don't have to implement ConvertBack()

Adding to BC's answer:
You can make a DataGridTemplateColumn and specify a data template for cells in a column. In the data template you can bind the text colour.
<swcd:DataGrid ... >
<swcd:DataGrid.Columns>
<swcd:DataGridTemplateColumn Header="MyColumn" CellTemplate="{StaticResource MyColumnDataGridCellTemplate}"/>
...
in resources:
<DataTemplate x:Key="MyColumnDataGridCellTemplate">
<Grid>
<TextBlock Text="{Binding someproperty}" Foreground="{Binding someotherproperty, Converter={StaticResource MyConverter}}"/>
...