We Keep Coding

I want to see my design that´s in a expander XAML

How can i see my design that´s in the expander in design view? I use VS2015.
<Grid Grid.Row="2" Height="30" Background="{StaticResource HeaderBackground}" Margin="5">
<TextBlock Foreground="{StaticResource HeaderText}" Text="Old Events" FontSize="15" Margin="10,0,0,0" />
<Expander HorizontalAlignment="Left"
VerticalAlignment="Center"
IsExpanded="True"
ExpandDirection="Down"
FlowDirection="RightToLeft">
<Grid FlowDirection="LeftToRight">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5,0,5,0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="6"" />
<ColumnDefinition Width="56"/>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="106" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,0,2"/>
</Style>
</Grid.Resources>
<TextBlock Grid.Column="0" Text="Id" Margin="0,4,0,6" Grid.ColumnSpan="2"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="Event" Margin="0,4,0,6"/>
<TextBlock Grid.Row="0" Grid.Column="4" Text="Namn" Margin="0,4,0,6"/>
<TextBlock Grid.Row="0" Grid.Column="5" Text="Tidpunkt" Margin="0,4,0,6"/>
<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="6" BorderThickness="0,0,0,1" BorderBrush="Black"/>
<ListView Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" x:Name="OldEventsListView" Style="{x:Null}" ItemsSource="{Binding NotificationEvents}" BorderThickness="0" Width="488" Height="150" HorizontalAlignment="Left" Margin="0,0,-2,-150" Grid.RowSpan="2">
<ListView.Resources>
<DataTemplate DataType="{x:Type local:NotificationEventViewModel+NotificationEvent}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="C"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Border BorderThickness="0,0,0,1" BorderBrush="LightGray" Grid.ColumnSpan="4" Margin="0,5,0,5" />
<TextBlock Grid.Column="0" Text="{Binding Id}" />
<TextBlock Grid.Column="1" Text="{Binding Event}"/>
<TextBlock Grid.Column="2" Text="{Binding Name}"/>
<TextBlock Grid.Column="3" Text="{Binding TimeStamp}"/>
</Grid>
</DataTemplate>
</ListView.Resources>
</ListView>
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Background="MidnightBlue" Foreground="White" FontSize="14" FontWeight="Medium" Click="GetTenMoreEvents">
<Button.Content>
<TextBlock Text="10 till"/>
</Button.Content>
</Button>
</Grid>
</Grid>
</Expander>
</Grid>
I thought that IsExpanded="True" would do the thing. But it´s no different. In the picture you can see my design. Here i want my expander to show my "Old Events" listview. So the problem is in Visual Studio, not when I fire my program.
Thanks for the help.

I have now found the solution for my problem.
I had done wrong with my <Grid> and added one too many.
<Grid Grid.Row="2" Height="30" Background="{StaticResource HeaderBackground}" Margin="5">
<TextBlock Foreground="{StaticResource HeaderText}" Text="Old Events" FontSize="15" Margin="10,0,0,0" />
</Grid>
<Grid Grid.Row="3">
<Expander HorizontalAlignment="Left"
VerticalAlignment="Center"
ExpandDirection="Down">
<Grid Margin="5,0,5,0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="80" SharedSizeGroup="A" />
<ColumnDefinition Width="150" SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition Width="106" SharedSizeGroup="C" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,0,2"/>
</Style>
</Grid.Resources>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Id" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="Event"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="Name"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="Timestamp"/>
<Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="4" BorderThickness="0,0,0,1" BorderBrush="Black"/>
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" x:Name="OldEventsListView" Style="{x:Null}" ItemsSource="{Binding NotificationEvents}" BorderThickness="0" Width="488" Height="150" HorizontalAlignment="Left" Grid.RowSpan="2">
<ListView.Resources>
<DataTemplate DataType="{x:Type model:NotificationEvent}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition SharedSizeGroup="B" />
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="C"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Border BorderThickness="0,0,0,1" BorderBrush="LightGray" Grid.ColumnSpan="4" Margin="0,5,0,5" />
<TextBlock Grid.Column="0" Text="{Binding Id}" />
<TextBlock Grid.Column="1" Text="{Binding Event}"/>
<TextBlock Grid.Column="2" Text="{Binding Name}"/>
<TextBlock Grid.Column="3" Text="{Binding TimeStamp}"/>
</Grid>
</DataTemplate>
</ListView.Resources>
</ListView>
<Button Grid.Row="2" Grid.Column="3" HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="MidnightBlue" Foreground="White" FontSize="14" FontWeight="Medium" Click="GetTenMoreEvents">
<Button.Content>
<TextBlock Text="10 till"/>
</Button.Content>
</Button>
</Grid>
</Expander>
</Grid>
So I remove <Grid Grid.Row="0" Margin="5,0,5,0" Grid.IsSharedSizeScope="True"> because this was totally wrong. Now the expander works as a charm.

ItemsControl different template based on Content

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>

Datepicker button does not appear

I am trying to design layout of my WPF windows to add some code list item and I need to use DatePicker, but calendar button is not visible in textbox.
this is my grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Code" Grid.Column="0" Grid.Row="0" />
<TextBox Text="{Binding Path=Code}" Grid.Column="1" Grid.Row="0" MinWidth="160" MaxLength="30" MaxWidth="160" />
<Label Content="Description" Grid.Column="0" Grid.Row="1" />
<TextBox Text="{Binding Path=Description}" Grid.Column="1" Grid.Row="1" MinWidth="160" MaxLength="120" MaxWidth="160" />
<Label Content="Valid from" Grid.Column="2" Grid.Row="0" />
<DatePicker Name="dpValidFrom" VerticalAlignment="Top" Grid.Column="3" Grid.Row="0" />
<Label Content="Valid to" Grid.Column="2" Grid.Row="1" />
<DatePicker Name="dpValidTo" VerticalAlignment="Top" Grid.Column="3" Grid.Row="1" />
</Grid>
In design mode a see this:
but in app i see this:
have someone idea why?
Thanks for advice

I didn't have any problems using Windows 10 VS 2015. Though, based on your screen shot, it looks like there is some type of default Margin or Padding. Use this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="DatePicker">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</Grid.Resources>
<Label Content="Code" Grid.Column="0" Grid.Row="0" />
<TextBox Text="{Binding Path=Code}" Grid.Column="1" Grid.Row="0" MinWidth="160" MaxLength="30" MaxWidth="160" />
<Label Content="Description" Grid.Column="0" Grid.Row="1" />
<TextBox Text="{Binding Path=Description}" Grid.Column="1" Grid.Row="1" MinWidth="160" MaxLength="120" MaxWidth="160" />
<Label Content="Valid from" Grid.Column="2" Grid.Row="0" />
<DatePicker Name="dpValidFrom" Grid.Column="3" Grid.Row="0" />
<Label Content="Valid to" Grid.Column="2" Grid.Row="1" />
<DatePicker Name="dpValidTo" Grid.Column="3" Grid.Row="1" />
</Grid>

Changing Grid Row background color in WPF

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

DataTrigger in ControlTemplate not setting Image source

I have a ControlTemplate that i defined for showing a View model in my required format. However, I am not able to set the Image's source property from the DataTrigger of the Control Template. Please help me with this.
<ControlTemplate x:Key="GeneralControlTemplate"
TargetType="{x:Type local:ComponentStatisticsControl}">
<Border CornerRadius="3"
BorderThickness="2"
BorderBrush="SkyBlue"
Margin="8,0,0,0">
<Border.Background>
<SolidColorBrush x:Name="ControlBackground" Color="Transparent"/>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Foreground="Blue"
Grid.Row="0"
FontSize="14"
FontWeight="SemiBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding Path=Title, RelativeSource={RelativeSource TemplatedParent}}"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Header="Component Info"
Grid.Row="0"
Foreground="Maroon"
FontWeight="SemiBold">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="IP Address"
Grid.Column="0"
Grid.Row="0"/>
<Label Content="{Binding Path=AdditionalContent.IPAddress, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row="0"
HorizontalAlignment="Right"
Grid.Column="1"/>
<Label Content="PortNo"
Grid.Column="0"
Grid.Row="1"/>
<Label Content="{Binding Path=AdditionalContent.PortNo, RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row="1"
HorizontalAlignment="Right"
Grid.Column="1"/>
<Label Content="Status"
Grid.Column="0"
Grid.Row="2"/>
<Image Name="imgStatus"
Height="24"
Width="24"
Stretch="Fill"
HorizontalAlignment="Right"
Grid.Column="1"
Grid.Row="2">
</Image>
</Grid>
</GroupBox>
<Expander Header="Queue Statistics"
Grid.Row="1"
ExpandDirection="Down"
IsExpanded="True"
Foreground="DarkOrange"
FontWeight="SemiBold">
<ItemsControl ItemsSource="{Binding Path=AdditionalContent.QueueStatistics, RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Grid.IsSharedSizeScope="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type lappmodel:clsQueueStatistics}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="ColumnOne"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding QName}"/>
<Label Content="{Binding Count}"
Margin="8,0,0,0"
HorizontalAlignment="Right"
Grid.Column="1"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Expander>
<GroupBox Header="Connection Statistics"
Foreground="DarkOrange"
Grid.Row="2"
FontWeight="SemiBold">
<ItemsControl ItemsSource="{Binding Path=AdditionalContent.ConnectionInformation, RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Grid.IsSharedSizeScope="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type lappmodel:clsComponentConnectionInfo}">
<Border CornerRadius="3"
BorderThickness="1"
BorderBrush="Gray"
x:Name="borderConnectionInfo">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
<Grid>
<Grid.Background>
<SolidColorBrush x:Name="gridconnectioninfo"
Color="Transparent"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="ColumnOne"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Component"
Grid.Row="0"/>
<Label Content="{Binding Identifier}"
Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"/>
<Label Content="Component Id"
Grid.Row="1"/>
<Label Content="{Binding ComponentId}"
Grid.Column="1"
Grid.Row="1"
Foreground="Blue"
HorizontalAlignment="Right"/>
<Label Content="BytesSent"
Grid.Row="2"/>
<Label Content="{Binding BytesSent}"
Grid.Row="2"
Grid.Column="1"
HorizontalAlignment="Right"/>
<Label Content="BytesReceived"
Grid.Row="3"/>
<Label Content="{Binding BytesReceived}"
Grid.Row="3"
Grid.Column="1"
HorizontalAlignment="Right"/>
<Label Content="Connected"
Grid.Row="4"/>
<Image x:Name="imgConnectedStatus"
Grid.Row="4"
Grid.Column="1"
HorizontalAlignment="Right"
Height="24"
Width="24">
</Image>
</Grid>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsConnected}" Value="True">
<Setter Property="Source"
TargetName="imgConnectedStatus"
Value="/Resources/GreenDot.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsConnected}" Value="False">
<Setter Property="Source"
TargetName="imgConnectedStatus"
Value="/Resources/red-dot2.png"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Duration="0:0:0.200"
AutoReverse="True"
RepeatBehavior="Forever">
<ColorAnimation From="Red"
To="DarkRed"
Storyboard.TargetName="borderConnectionInfo"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</GroupBox>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding AdditionalContent.IsComponentShutdown, RelativeSource={RelativeSource TemplatedParent}}"
Value="False">
<Setter TargetName="imgStatus"
Property="Source"
Value="/Resources/GreenDot.png"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I am trying to set the Source property for imgStatus in the ControlTemplate triggers.
But, there is no change in the Image.

By looking at the following link
http://social.msdn.microsoft.com/Forums/vstudio/en-US/a3bf91a8-e618-41c6-a1ad-be9e19581fd6/datatrigger-inside-controltemplate-issue
It became clear that i should not use TemplatedParent. Setting the {RelativeSource Self} in the binding solved the problem.
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding AdditionalContent.IsComponentShutdown, RelativeSource={RelativeSource Self}}"
Value="False">
<Setter TargetName="imgStatus"
Property="Source"
Value="/Resources/GreenDot.png"/>
</DataTrigger>
</ControlTemplate.Triggers>

fine , wierd contorl design ...
<DataTrigger Binding="{Binding Path=DataContext.IsConnected,
RelativeSource={RelativeSource AncestorType=ItemsControl}}" Value="True">
<Setter Property="Source"
TargetName="imgConnectedStatus"
Value="/Resources/GreenDot.png"/>
</DataTrigger>
since you are using a DataTrigger from an item's precpective , the DataTemplates DataContext is an object from your ItemsSource , RelativeSource to the containing control , Path to it's DataContext.Property