Develop Reference

Add ToolTip to DataTemplate in WPF TreeView

I'm trying to add a tooltip to children in a TreeView in WPF. However, it appears even in the XAML I can't get a tooltip to render in the treeview children. Can someone please tell me how to get around this?
<Window x:Class="Client_Invoice_Auditor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Client_Invoice_Auditor"
xmlns:self="clr-namespace:Client_Invoice_Auditor.CoreClientAR"
mc:Ignorable="d"
Title="Client Invoice Auditor" Height="450" Width="1000">
<Window.Resources>
<self:SPConverter x:Key="SPConverter"/>
<self:ErrorExpandConverter x:Key="ErrorExpandConverter"/>
<self:AssignRowConverter x:Key="AssignRowConverter"/>
<self:IssueIconConverter x:Key="IssueIconConverter"/>
</Window.Resources>
<Grid>
<Grid.ColumnDeitions>
</Grid.ColumnDeitions>
<Grid.RowDeitions>
<RowDeition Height="20*"/>
<RowDeition Height="80*"/>
</Grid.RowDeitions>
<Grid Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Vertical">
<DockPanel VerticalAlignment="Top" Height="20" Panel.ZIndex="1">
<Menu Name="fileMenu" Width="Auto" DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Header="Open Account File" Click="menuOpenFile_Click"/>
<MenuItem Header="Exit" Click="menuExit_Click"/>
</MenuItem>
<MenuItem Header="Options">
<!--<MenuItem Header="Update" Click="update_Click"/>-->
<MenuItem Header="About" Click="about_Click"/>
</MenuItem>
</Menu>
</DockPanel>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="Auto">
<StackPanel Width="Auto" Orientation="Horizontal" HorizontalAlignment="Center">
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="AccountNumber"/>
</Border>
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="AcctDesc"/>
</Border>
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="Organization"/>
</Border>
</StackPanel>
</WrapPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label Margin="20,10,0,0" Content="Activity Date Time" />
<Label Margin="60,10,0,0" Content="Beginning Balance" />
<Label Margin="10,10,0,0" Content="Charge Amount" />
<Label Margin="30,10,0,0" Content="Adjustments" />
<Label Margin="40,10,0,0" Content="Payments" />
<Label Margin="60,10,0,0" Content="End Balance" />
<Label Margin="50,10,0,0" Content="Issues" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.Column="0">
<Grid Name="IssuesGrid">
<Grid.ColumnDeitions>
<!--<ColumnDeition Width="80*"/>-->
<!--<ColumnDeition Width="20*"/>-->
</Grid.ColumnDeitions>
<TreeView Name="View">
<!--<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded"
Value="{Binding Class, Converter={StaticResource ErrorExpandConverter}}" />
</Style>-->
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded"
Value="{Binding Dummies, Converter={StaticResource ErrorExpandConverter}}" />
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type self:dailyAccountBalance}" ItemsSource="{Binding Dummies}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" IsEnabled="False" Grid.Row="{Binding RowIndex}" ToolTip="This info">
<TextBlock Width="150" Text="{Binding ActivityDate}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding BegBalance}"/>
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding ChrgAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding AdjAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding PmtAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding EndBalance}" ToolTipService.IsEnabled="True" ToolTipService.ToolTip="This balance thing" ToolTip="This balance"/>
<ContentControl HorizontalAlignment="Left" Margin="20,0,0,0" Width="100" ToolTip="This">
<ContentControl.Content>
<MultiBinding Converter="{StaticResource IssueIconConverter}">
<Binding Path="RowIndex"/>
<Binding Path="Errors"/>
</MultiBinding>
</ContentControl.Content>
<!--<TextBlock Text="Test"/>-->
</ContentControl>
</StackPanel>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate DataType="{x:Type self:DummyItem}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<!--<TextBlock Text="{Binding Text}" />-->
<DataGrid ItemsSource="{Binding ChargeActivities}" AutoGenerateColumns="False">
<DataGrid.Style>
<Style TargetType="{x:Type DataGrid}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Items.Count,
RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
<DataGrid.Columns>
<DataGridTextColumn x:Name="ChrgID" Header=" Charge" Binding="{Binding ChargeID}" />
<DataGridTextColumn x:Name="ChrgType" Header="Charge Type" Binding="{Binding ChargeType}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="CR">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="ChrgAmt" Header="Amount" Binding="{Binding ChargeAmount}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ChargeType}" Value="CR">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="" Header="" Binding="{Binding Stuff}" />
<DataGridTextColumn x:Name="Class" Header=" Class" Binding="{Binding Class}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="{Binding Class, Converter={StaticResource SPConverter}}"/>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
<!--<TreeViewItem x:Key="Test">
<TextBlock Text="Me gusta"></TextBlock>
</TreeViewItem>-->
</TreeView.ItemTemplate>
</TreeView>
</Grid>
</Grid>
</Grid>
</Window>
Any suggestions to get tooltips to render in the treeview children would definitely be appreciated. Thanks a ton in advance.

You don't set the tooltip property of elements inside of the template, you set it on the TreeViewItem itself.
Here is a very simplified example:
<TreeView>
<TreeViewItem Header="Item #1" DataContext="Test1" />
<TreeViewItem Header="Item #2" DataContext="Test2" />
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Style.Setters>
<Setter Property="ToolTip" Value="{Binding}" />
</Style.Setters>
</Style>
</TreeView.Resources>
</TreeView>
Here I had to set the DataContext manually and hardcoded for the example to work since just using the Header property doesn't set it, but in the real world, you are going to be data bound, so it will be set.

WPF binding inside DataTemplate

I'm learing WPF, it's fun but very confusing. I am currently trying to get values from DataTemplate. Simple Binding = {Binding Value} is not recognized. How can I get values of elements iside DataTemplate? Following code only displays Value:
<ScrollViewer>
<Grid x:Name="mainGrid" Margin="10,10,10,10">
<DataGrid x:Name="appSettingsData" AutoGenerateColumns="False" Grid.ColumnSpan="6" Grid.Row="7" CanUserAddRows="False" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="Value" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding Type}" Value="textBox">
<Setter Property="ContentTemplate">
<Setter.Value>
<!-- This is place from where I'm trying to take values -->
<DataTemplate>
<TextBox Text="{Binding Value}" />
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</ScrollViewer>

Why are you complicating things?
Your controls should be in the first DataTemplate itself:
<ScrollViewer>
<Grid x:Name="mainGrid" Margin="10,10,10,10">
<DataGrid x:Name="appSettingsData" AutoGenerateColumns="False" Grid.ColumnSpan="6" Grid.Row="7" CanUserAddRows="False" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="Value" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Value}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Type}" Value="textBox">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</ScrollViewer>

WPF DataGrid Grouped Rows in Expander adds extra column on right side, disappears when all expanders are closed

Another WPF DataGrid-related question.
I have a DataGrid whose rows are grouped, and each group is underneath an Expander control. There are two columns per row. By default, I have all the expanders opened. The second column's width is set to "*", and row headers have already been turned off.
When I close all the expanders, the layout changes the tiniest bit, shifting the expander controls to the left a little. When I open any one of the expanders, they shift the tiniest bit to the right. I also notice that when an expander is open, the column headers show an additional column on the right side, which makes the horizontal scroll bar appear.
How can I adjust the datagrid declaration to make this additional column not exist/appear when an expander is open?
<Grid>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled" >
<DataGrid AutoGenerateColumns="False"
ItemsSource="{Binding Path=MyCollection}"
GridLinesVisibility="None"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
CanUserSortColumns="False"
CanUserResizeColumns="False"
CanUserResizeRows="False"
HeadersVisibility="Column">
<DataGrid.Resources>
<ResourceDictionary>
<Style x:Key="{x:Type DataGridCell}" TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type DataGridRow}" TargetType="{x:Type DataGridRow}">
<Setter Property="Margin" Value="4" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</DataGrid.Resources>
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="4"
IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal"
Margin="4">
<TextBlock FontWeight="Bold"
FontSize="14"
Text="{Binding Path=Name}" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto">
...
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*">
...
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</ScrollViewer>
</Grid>

The DataGrid itself has a built in scrollviewer so the outside one isn't needed. I think it is the DataGrid's scrollviewer that is causing your issue. Try getting rid of the outside ScrollViewer and add the attributes to the DataGrid, like this:
<DataGrid AutoGenerateColumns="False"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
...
>
...
</DataGrid>
If you need the outside scrollviewer for some reason, keep it but still disable the DataGrid's HorizontalScrollBarVisibility.

This is part hack, part real answer I think.
Hack part: In order to get the horizontal scroll bar to not show up, I simply disabled it in the DataGrid declaration. Then, to ensure that the column didn't get shaved off a little on the right side, I set row margin and padding in the style I used to turn off selection color.
Real part: Setting the vertical scrollbar to always show works properly as long as the height of the second row of the outtermost grid is set to "*" (asterisk). This ensures the DataGrid will use the proper amount of space when an expander is opened and there are too many rows to show.
The final DataGrid declaration looks like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Import Data Mappings"
FontWeight="Bold"
HorizontalAlignment="Center"
Margin="4"
Padding="4"
Grid.Row="0" />
<DataGrid AutoGenerateColumns="False"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Path=MyGroupedCollection, Mode=OneWay}"
HeadersVisibility="Column"
Grid.Row="1"
... >
<DataGrid.Resources>
<ResourceDictionary>
<Style x:Key="{x:Type DataGridCell}" TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type DataGridRow}" TargetType="{x:Type DataGridRow}">
<Setter Property="Margin" Value="0,4,0,4" />
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</DataGrid.Resources>
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander Margin="4"
IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal"
Margin="4">
<TextBlock FontWeight="Bold"
FontSize="14"
Text="{Binding Path=Name}" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTemplateColumn Width="Auto">
<DataGridTemplateColumn.HeaderTemplate>
...
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock .../>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="*">
<DataGridTemplateColumn.HeaderTemplate>
...
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<DockPanel LastChildFill="True">
<Button Style="{DynamicResource ResourceKey=MyButtonStyle}"
Content="Button Text"
Command="{Binding Path=MyButtonCommand}"
DockPanel.Dock="Left"/>
<ComboBox Margin="4"
Padding="4"
SelectedItem="{Binding Path=MySelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemsSource="{Binding Path=MyAvailableFields}"
DockPanel.Dock="Left">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="{Binding Path=MyDisplayName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</DockPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>

Disable blue border for selected Listview item

I have a ListView with Horizontal WrapPanel as its ItemsPanelTemplate.
I want to get rid of the blue background for selected item. It is visible only on the left of the selected item.
There are many similar question on SO and I tried a lot of the solutions and none of them worked.
This is what I have already tried:
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Resources>
<!-- Foreground for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black"/>
<!-- Background for Selected ListViewItem -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
<!--SelectedItem without focus-->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="Control.MouseDoubleClick" Handler="HandleSelectedItemDoubleClick"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2" CenterX="12" CenterY="12" />
</Setter.Value>
</Setter>
<Setter Property="Panel.ZIndex" Value="150"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" Width="210" Margin="15" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>

You need to overwrite the SystemColors.HighlightBrushKey for the ListView to be Transparent (or whatever color you want)
I typically put this in the ListView.Resources so it only applies to the specific ListView, and not all ListViews in my application
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</ListView.Resources>
Its very close to what you have in your code already, but you need to set it for the ListView.Resources, not ListViewItem.Resources

To remove all default styling (hovering, selecting, etc.) just define a custom Template for the ItemContainer (not the Item itself):
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Found on MSDN Forum

This is what did it for me:
<UserControl.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical" Background="Transparent" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedTemplate">
<StackPanel Orientation="Vertical" Background="LightGray" Opacity="1" Width="185" MaxWidth="185">
<StackPanel Orientation="Horizontal">
<TextBlock
Margin="0,0,10,0"
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=EventTypeName, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Yellow"
FontSize="12" FontStyle="Italic"
Text="{Binding Path=AccountIdentity, Mode=OneWay}" />
</StackPanel>
<TextBlock
Background="Transparent"
Foreground="DarkGoldenrod" MaxWidth="170"
FontSize="12" FontStyle="Italic" TextTrimming="WordEllipsis" ToolTip="{Binding Path=EventMessage,Mode=OneWay}"
Text="{Binding Path=EventMessage, Mode=OneWay}" />
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=EventLoggedOn, Mode=OneWay}"
TextTrimming="WordEllipsis"
ToolTip="{Binding Path=EventLoggedOn, Mode=OneWay}"
Margin="0,0,10,0" />
<StackPanel Orientation="Horizontal">
<TextBlock
Background="Transparent"
Foreground="Black"
FontSize="8"
Text="{Binding Path=QualifiedCreator, Mode=OneWay}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<Style TargetType="ListViewItem" x:Key="ContainerStyle">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=ItemTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="ContentTemplate" Value="{StaticResource ResourceKey=SelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

The simplest way to do this is to set the background to {x:Null} when the item is selected, using a trigger.
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="{x:Null}" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>

WPF Design Layout vs Compiled Layout

I'm getting differences between the design in VS2010 and the layout when compiled. See the images bellow:
Design View
Compiled
I have read this and I don't seem to be able to pick anything out that will help me. Why does this happen?
XAML:
<Window x:Class="iAdvert_Desktop.TemplateDesigner"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="622" Width="610" AllowsTransparency="False" Opacity="1" Background="White" ResizeMode="NoResize">
<Window.Resources>
<ResourceDictionary Source="Pages/BaseStyle.xaml" />
</Window.Resources>
<Grid>
<Canvas Height="281" VirtualizingStackPanel.VirtualizationMode="Standard" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="500" Background="#FF383838" PreviewMouseLeftButtonDown="canvas1_PreviewMouseLeftButtonDown" PreviewMouseMove="canvas1_PreviewMouseMove" PreviewMouseLeftButtonUp="canvas1_PreviewMouseLeftButtonUp" Margin="45,30,0,0" Panel.ZIndex="5"></Canvas>
<DataGrid AutoGenerateColumns="False" CanUserAddRows="False" CanUserResizeColumns="False" CanUserResizeRows="False" DataContext="{Binding}" HeadersVisibility="Column" Height="143" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" HorizontalGridLinesBrush="#ccc" Margin="45,356,0,0" Name="dataGrid1" VerticalAlignment="Top" VerticalGridLinesBrush="#ccc" VirtualizingStackPanel.VirtualizationMode="Standard" Background="#FFF6F6F6" Width="500">
<DataGrid.Resources>
<ResourceDictionary Source="Pages/DataGridStyle.xaml" />
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Delete">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Image Source="/iAdvert-Desktop;component/Images/icons/delete.png" Height="12" MouseLeftButtonUp="Image_MouseLeftButtonUp"></Image>
</ContentControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="0.5*" Binding="{Binding Path=TemplateCellID}" Header="ID"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellWidth}" Header="Width"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellHeight}" Header="Height"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellTop}" Header="Top"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellLeft}" Header="Left"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<Button Content="Add Cell" Height="23" Name="button1" Width="75" Click="button1_Click" Margin="470,317,43,243" />
<TextBox Style="{StaticResource TextBoxStyle}" Height="26" HorizontalAlignment="Right" Margin="0,504,271,0" Name="textBox1" VerticalAlignment="Top" Width="178" />
<TextBlock Style="{StaticResource TextDescription}" Height="26" HorizontalAlignment="Left" Margin="45,504,0,0" Name="textBlock1" Text="Template Name" VerticalAlignment="Top" />
<Button Content="Save Template" Height="23" HorizontalAlignment="Left" Margin="450,505,0,0" Name="button2" VerticalAlignment="Top" Width="95" Click="button2_Click" />
</Grid>
</Window>
BaseStyle:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TextHeader" TargetType="TextBlock">
<Setter Property="Background" Value="#FF333333" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Padding" Value="5" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="TextDescription" TargetType="TextBlock">
<Setter Property="Background" Value="#FF333333" />
<Setter Property="Padding" Value="5" />
<Setter Property="Foreground" Value="White" />
</Style>
<Style x:Key="ButtonStyle" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF333333" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Padding" Value="5" />
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="#FF333333" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="#FF333333" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="5" />
</Style>
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="BorderBrush" Value="#FF333333" />
<Setter Property="Height" Value="26" />
</Style>
</ResourceDictionary>
DataGridStyle:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type DataGrid}">
<Setter Property="ItemsControl.AlternationCount" Value="2" />
<Setter Property="BorderBrush" Value="#FF333333" />
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Control.Foreground" Value="White" />
<Setter Property="Control.Background" Value="#333" />
<Setter Property="Control.Padding" Value="5" />
</Style>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Control.Background" Value="#f1f1f1" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Control.Background" Value="#f9f9f9" />
</Trigger>
<Trigger Property="DataGridRow.IsSelected" Value="True">
<Setter Property="Control.Background" Value="#ccc" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Height" Value="20" />
</Style>
<Style x:Key="CenterCell" TargetType="{x:Type DataGridCell}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CenterTextCell" TargetType="{x:Type TextBlock}">
<Setter Property="TextAlignment" Value="Center" />
</Style>
</ResourceDictionary>

I think you'll find that this works better. It looks the same in the designer and when you run it.
All I have done is remove your margins and add rows/columns to your grid (and a stackpanel for the template label/textbox).
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="301"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Canvas Grid.Row="0" Background="#FF383838" ></Canvas>
<Button Grid.Row="1" Content="Add Cell" Height="23" Width="75" HorizontalAlignment="Right" Margin="0,10,0,10" />
<DataGrid Grid.Row="2" AutoGenerateColumns="False" DataContext="{Binding}" HeadersVisibility="Column"
HorizontalGridLinesBrush="#ccc" VerticalGridLinesBrush="#ccc" VirtualizingStackPanel.VirtualizationMode="Standard" Background="#FFF6F6F6" >
<DataGrid.Columns>
<DataGridTemplateColumn Header="Delete">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
</ContentControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="0.5*" Binding="{Binding Path=TemplateCellID}" Header="ID"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellWidth}" Header="Width"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellHeight}" Header="Height"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellTop}" Header="Top"></DataGridTextColumn>
<DataGridTextColumn ElementStyle="{StaticResource CenterTextCell}" Width="1*" Binding="{Binding Path=CellLeft}" Header="Left"></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<Grid Grid.Row="3" Margin="0,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource TextDescription}" Height="26" Name="textBlock1" Text="Template Name" />
<TextBox Style="{StaticResource TextBoxStyle}" Height="26" Name="textBox1" Width="178" />
</StackPanel>
<Button Grid.Column="1" Content="Save Template" Height="23" Width="95" />
</Grid>
</Grid>

The simplistic answer to this is that the engine used to render the display in Visual Studio has a bug in it that impacts rendering of your application. You would need to post your XAML code for others to check but it may be worth opening your XAML in Expression Blend to see if the rendering is closer to what you see in the compiled version.