I have following DataTemplate for usage within my phone.LongListSelector in my XAML view:
<DataTemplate x:Name="myLocationsListTemplate">
<StackPanel Margin="0,0,0,15">
<Grid VerticalAlignment="Top" Margin="0,0,5,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" TextTrimming="WordEllipsis" Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="138" Height="25" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="{Binding DistanceInMeterFormatted, FallbackValue=fallback, TargetNullValue=nullvalue, Mode=OneWay}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" Margin="0,0,-3,20" VerticalAlignment="Bottom"/>
<TextBlock Grid.Column="1" Text="vor 10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="{Binding PreviewImg1}"/>
<Image Grid.Column="1" Width="100" Height="100" Source="{Binding PreviewImg2}"/>
<Image Grid.Column="2" Width="100" Height="100" Source="{Binding PreviewImg3}"/>
<Image Grid.Column="3" Width="100" Height="100" Source="{Binding PreviewImg4}"/>
</Grid>
</StackPanel>
</DataTemplate>
Now I want the complete DataTemplate Content made "clickable". Means: If user clicks on a TextBlock or one of the four Images or on whatever displayed in die List, an action should be performed with a databound property (saying the Name from the bound data should be given).
Any ideas how to get this working?
Why don't you just stick your entire template into a button? You can style the button if needs be to remove any default appearance you don't like. eg.
<Style x:Key="BlankButtonStyle" TargetType="ButtonBase">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
</Style>
Related
I'm creating UWP application where one of the screens have layout like this:
<ListView>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Here is Long Name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
<ListViewItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Ellipse
Width="32"
Height="32"
Margin="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="LightGray" />
<TextBlock
Grid.Column="1"
Margin="12,6,0,0"
FontSize="20"
Text="Short name" />
<StackPanel
Grid.Column="2"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Width="25" Height="45" BorderThickness="0">-</Button>
<TextBlock
Width="25"
Height="45"
Padding="0,5,0,0"
FontSize="24"
Text="0"
TextAlignment="Center" />
<Button Width="30" Height="45" BorderThickness="0">+</Button>
</StackPanel>
</Grid>
</ListViewItem>
</ListView>
It looks like this (I'm not allowed to insert image): https://i.stack.imgur.com/Afvn6.png
I want that StackPanel in last column to be on the right side, no matter how long is name. I assume this will be the case if TextBlock stretches to all available width, but it doesn't. How do I fix this?
Add this to you ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
Could some identify why the following is not working please, I am trying to implement a Chat Message window where each Message will render a different style dependent on the MessageDirection. For this I am using a ItemsControl which is bound to the Messages property
In the ChatWindow class I have the following
public static readonly DependencyProperty MessagesProperty = DependencyProperty.Register(
"Messages",
typeof(ObservableCollection<Message>),
typeof(ChatWindow),
new PropertyMetadata(null));
public ObservableCollection<Message> Messages
{
get
{
return (ObservableCollection<Message>)this.GetValue(MessagesProperty);
}
set
{
this.SetValue(MessagesProperty, value);
}
}
I have the following defined in a ResourceDictionary
<ScrollViewer x:Name="srcMessages" Margin="0,0,0,0" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ItemsControl ItemsSource="{Binding Path=Messages, RelativeSource={RelativeSource AncestorType={x:Type chat:ChatWindow}}}" x:Name="Messages">
<ItemsControl.ItemTemplate>
<DataTemplate>
<chat:MessageContentPresenter Content="{Binding}">
<chat:MessageContentPresenter.InboundTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="94" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBlock Text="Username One" FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text=" - " FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text="11:45 AM" FontSize="10" Foreground="#adadad"></TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="230" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="1" Height="60" Width="60" Source="pack://siteoforigin:,,,/Resources/noavatar.png" StretchDirection="Both" Stretch="Fill">
<Image.Clip>
<EllipseGeometry Center="30,30" RadiusX="30" RadiusY="30" />
</Image.Clip>
</Image>
<Polygon Grid.Column="3" Points="0,0 -4,3 0,6 0,0" StrokeThickness="2" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="#d8d7dc" Stroke="#d8d7dc"></Polygon>
<Border Grid.Column="4" BorderBrush="#d8d7dc" BorderThickness="1" Background="#d8d7dc" Padding="5">
<TextBlock TextWrapping="Wrap" Text="This is a message in a chat window..." VerticalAlignment="Top" FontSize="12" Foreground="#000000"></TextBlock>
</Border>
</Grid>
</Grid>
</DataTemplate>
</chat:MessageContentPresenter.InboundTemplate>
<chat:MessageContentPresenter.OutboundTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="94" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock Text="Username One" FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text=" - " FontSize="10" Foreground="#adadad"></TextBlock>
<TextBlock Text="11:45 AM" FontSize="10" Foreground="#adadad"></TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="230" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="18" />
</Grid.ColumnDefinitions>
<Image Grid.Column="4" Height="60" Width="60" Source="pack://siteoforigin:,,,/Resources/noavatar.png" StretchDirection="Both" Stretch="Fill">
<Image.Clip>
<EllipseGeometry Center="30,30" RadiusX="30" RadiusY="30" />
</Image.Clip>
</Image>
<Polygon Grid.Column="2" Points="0,0 4,3 0,6 0,0" StrokeThickness="2" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="#4fcd00" Stroke="#4fcd00"></Polygon>
<Border Grid.Column="1" BorderBrush="#4fcd00" BorderThickness="1" Background="#4fcd00" Padding="5">
<TextBlock TextWrapping="Wrap" Text="This is a message in a chat window..." VerticalAlignment="Top" FontSize="12" Foreground="#000000"></TextBlock>
</Border>
</Grid>
</Grid>
</DataTemplate>
</chat:MessageContentPresenter.OutboundTemplate>
</chat:MessageContentPresenter>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
And the MessageContentPresenter is as below
public class MessageContentPresenter : ContentControl
{
#region Public Properties
public DataTemplate InboundTemplate { get; set; }
public DataTemplate OutboundTemplate { get; set; }
#endregion
#region Methods
protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);
var message = newContent as Message;
if (message.Direction == MessageDirection.Inbound)
{
this.ContentTemplate = this.InboundTemplate;
}
else
{
this.ContentTemplate = this.OutboundTemplate;
}
}
#endregion
}
When I run this code all works fine and the OnContentChanged method is executed once for each item in the Messages collection. The issue is that both the InboundTemplate and the OutboundTemplate are null.
I really cannot see what the problem is so and why the two templates are both null, any help greatly appreciated.
Indeed, you can use DataTemplateSelector.
But another option is to use the DataTemplate + ContentControl and Style:
First, drop your MessageContentPresenter class as we do not need it. Consequently, you need to remove your ItemsControl.ItemTemplate from your XAML.
Secondly, add DataTemplate + ContentControl and Style to your Window.Resources.
Try this to give you some lead:
<DataTemplate DataType="{x:Type local:Message}">
<ContentControl Content="{Binding Direction}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Direction}" Value="{x:Static local:MessageDirection.Inbound}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Background="Green">Inbound</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Direction}" Value="{x:Static local:MessageDirection.Outbound}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Background="Red">Outbound</Button>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
I have an issue im struggling a day now. Im trying to center some controls into a Grid layout. I have 2 columns and i want half of the controls centered ad the 1st column and other half to the second column
When the window resize some of them get "eaten" on the edges , and i wasent able to identify the issue
Can anyone spot the issue?
<Grid Margin="0,2,0,-2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//.......
<ComboBox x:Name="optMenuLeft" Margin="0,271,0,0" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2" />
<Label Content="Menu" Margin="141,271,390,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="69" Grid.RowSpan="2" />
<ComboBox x:Name="optBedOccupancyLeft" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" HorizontalAlignment="Center" Width="170" Margin="0,240,0,0"/>
<Label Content="Bed Occupancy" Margin="0,240,270,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.......
<ComboBox Name="optMenuRight" Margin="255,271,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170"/>
<Label Content="Menu" Margin="176,271,353,0" Grid.Column="1" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="71"/>
<ComboBox Name="optBedOccupancyRight" Margin="255,240,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2"/>
<Label Content="Bed Occupancy" Grid.Column="1" Margin="0,240,200,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.....
The simplest way is to use grids inside grid. The outer grid will split the window into two columns. The inner grids will split the columns into four cells (2x2). Just center the inner grids and it will work like a charm.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftColumn" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Bed Occupancy" />
<ComboBox x:Name="optBedOccupancyLeft" Grid.Column="1" />
<Label Content="Menu" Grid.Row="1"/>
<ComboBox x:Name="optMenuLeft" Grid.Column="1" Grid.Row="1" />
</Grid>
<Grid x:Name="RightColumn" VerticalAlignment="Center" HorizontalAlignment="Center>
<!-- the same as left column -->
</Grid>
</Grid>
Btw, notice, that when you want split some are to equal columns (or rows or both), you can use UniformGrid:
<UniformGrid x:Name="LayoutRoot" Rows="1">
<Grid x:Name="LeftColumn" />
<Grid x:Name="RightColumn" />
</UniformGrid>
There is also more advanced approach that I often use:
Use UniformGrid to define columns. The xaml is smaller and cleaner.
Use HeaderedContentControl to define labels and inputs
Use Grid's SharedSizeScope feature, to make width of label equal: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid.issharedsizescope%28v=vs.110%29.aspx
<UniformGrid x:Name="LayoutRoot" Rows="1">
<StackPanel x:Name="LeftColumn" Grid.IsSharedSizeScope="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<HeaderedContentControl Header="Bed Occupancy" Style="{StaticResource LabelValueContentControl}">
<ComboBox x:Name="optBedOccupancyLeft" />
</HeaderedContentControl>
<HeaderedContentControl Header="Menu" Style="{StaticResource LabelValueContentControl}" >
<ComboBox x:Name="optMenuLeft" />
</HeaderedContentControl>
</StackPanel>
<StackPanel x:Name="RightColumn" Grid.IsSharedSizeScope="True">
<!-- the same as left column -->
</StackPanel>
</UniformGrid>
The LabelCalueControlStyle is take advantage of shared column size
<Style x:Key="LabelValueContentControl" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelValueContentControl.Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Right" />
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a listbox which I can successfully update with the data but now I want to access two specific textblocks which I want to collapse and make the other visible. here is my xaml:
<ListBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Name="myPM_MListBox" Margin="-5,0,-5,0" SelectionChanged="myPMListBox_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,0" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Background="#FF009E49" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" Text="Message Date" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontWeight="Normal" />
</Border>
<Border Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Background="#FFEFEFEF" BorderThickness="1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PMMessagePubDate" Text="{Binding shdMsgPublishTime}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,1,1,0" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MLimitedBody" Text="{Binding shdMessageText}" FontSize="16" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF000000" FontWeight="Normal" />
</Border>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,5,0" Background="#FFEFEFEF" BorderThickness="1,0,1,1" BorderBrush="#FF505050">
<TextBlock Margin="5,5,5,5" x:Name="PM_MFullBody" Text="Show more..." FontSize="16" HorizontalAlignment="right" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="Blue" FontWeight="Normal" Tapped="ShowFullBody_Tap" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to hide PM_MLimitedBody textblock and show the PM_MFullBody textblock for the ShowFullBody_Tap event handler I have. But seems like I can't access the Visibility properties of these textblok in my .cs file. is there a way for me to access these textblock's visibility property in my .cs file?
You can use the sender of ShowFullBody_Tap will be the TextBox that defines that event. You can then use VisualTreeHelper.GetParent(...) to get the Border and then the Grid and then look at Grid.Children to find the other borders with their textboxes.
I want to set 2 colors to my grid rows, the even ones will have one color and the others will have another.
I dont know ho to even start of doing it.
<ListBox
ItemsSource="{Binding}" x:Name="station_list"
HorizontalAlignment="Left" Height="378" Margin="10,31,0,0"
VerticalAlignment="Top" Width="570" SelectedIndex="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="Stations_Template">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name: " />
<TextBlock Grid.Column="1" Text="{Binding Path=sname}" />
<TextBlock Grid.Column="2" Text="Last Name: " />
<TextBlock Grid.Column="3" Text="{Binding Path=mahoz}" />
<CheckBox Grid.Column="4" Content="Is Active?"
IsEnabled="False"
IsChecked="{Binding Path=isactive}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use Rectangles to fill the rows first, then add data to them.
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="AliceBlue" />
<TextBlock Grid.Row="0" Text="Row 1" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="1" Fill="AntiqueWhite" />
<TextBlock Grid.Row="1" Text="Row 2" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="2" Fill="AliceBlue" />
<TextBlock Grid.Row="2" Text="Row 3" HorizontalAlignment="Center"/>
<Rectangle Grid.Row="3" Fill="AntiqueWhite" />
<TextBlock Grid.Row="3" Text="Row 4" HorizontalAlignment="Center"/>
</Grid>
Edit:
If you're loading an unknown amount of items, then i think you need something like an itemscontrol to load them in. You can then use the alternationcount and triggers to handle the alternating color.
<ItemsControl ItemsSource="{Binding DataList}" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="FooBar" Margin="0,0,0,10">
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="Blue" TargetName="FooBar"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Red" TargetName="FooBar"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Window x:Class="WpfApplication3.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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Background="Cyan" />
<Border Grid.Row="2" Grid.Column="1" Background="Red" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="1" Background="Black" />
<Border Grid.Row="2" Background="Orange" />
<Border Grid.Row="0" Grid.Column="1" Background="Green" />
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
![enter image description here][1]
[1]: http://i.stack.imgur.com/LX9X8.png