I have <ItemsControl> which create view for my <custom:Pack> list:
<ItemsControl ItemsSource="{Binding List}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:ShelfPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="local:ShelfPanel.Exact" Value="{Binding Exact}"/>
// Default ZIndex is set 1, when Active it should be higher, hence will be over others.
<Setter Property="Panel.ZIndex" Value="1" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:Pack Background="Red" Width="150" Height="150" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MyStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Yellow" Duration="0:0:0.5" />
</Storyboard>
</VisualState>
<VisualState x:Name="Active">
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="Green" Duration="0:0:0.5" />
// How to animate ZIndex on ContentPresenter ?
<Int32Animation Storyboard.TargetProperty="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ContentPresenter}}, Path=(Panel.ZIndex)}" To="3" Duration="00:00:0.2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</custom:Pack>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The <local:ShelfPanel> is designed that way <custom:Pack> is overlapping each other. Now when you select one <custom:Pack> it's state change to Active and object should be over all others.
Currenty I get expection:
You must specify TargetProperty for "System.Windows.Media.Animation.Int32 Animation
To achive this I need set ZInedx on ContentPresenter, how to do it?
Related
After looking at several examples on this site it appears that the type of animation I wanted here is not that hard. Right now I've this in my xaml:
<ItemsControl ItemsSource="{Binding MyCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Name="Info">
<TextBlock Text="{Binding ItemName}"/>
<TextBlock Text="{Binding Quantity}"/>
<TextBlock Text="{Binding Price}"/>
</StackPanel>
<DataTemplate.Resources>
<Storyboard x:Key="Anim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info"
Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource Anim}" />
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
an in code, I'm adding last item in first place in this way:
MyCollection.Insert(0, new Transaction()
{
Name = ItemName + " ",
Quantity = QuantityTraded,
Price = AtPrice
});
With all these new item fades in on the left corner and pushes all existing items to the right BUT the behavior is snappy! I want a translate instead of opacity and for that I've to have this in StackPanel inside DataTemplate:
<StackPanel.RenderTransform>
<TransformGroup>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
What do I have to have in Storyboard for TranslateTransform?
Will it animate all existing items or those will snap to their target position as they do with these code?
I've tried with blend which inserted these:
<b:Interaction.Behaviors>
<b:FluidMoveBehavior Duration="0:0:5" AppliesTo="Children">
<b:FluidMoveBehavior.EaseY>
<BackEase EasingMode="EaseOut"/>
</b:FluidMoveBehavior.EaseY>
<b:FluidMoveBehavior.EaseX>
<BackEase EasingMode="EaseIn"/>
</b:FluidMoveBehavior.EaseX>
</b:FluidMoveBehavior>
</b:Interaction.Behaviors>
inside ItemsControl but that didn't change the behavior!
As a starting point, you could animate the Width property of the StackPanel from 0 to its maximum width. This will indeed push all items to the right as the first item grows.
<Storyboard x:Key="Anim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Info"
Storyboard.TargetProperty="Width">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="100" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
But animating the Width might not be the visual effect you intend.
You could elaborate on that and instead animate the Width of an outer element that will crop your inner StackPanel:
<DataTemplate>
<StackPanel x:Name="Outer" Margin="5">
<StackPanel x:Name="Info" Orientation="Vertical" HorizontalAlignment="Right" Width="50">
<TextBlock Text="{Binding ItemName}"/>
<TextBlock Text="{Binding Quantity}"/>
<TextBlock Text="{Binding Price}"/>
</StackPanel>
</StackPanel>
<DataTemplate.Resources>
<Storyboard x:Key="Anim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Outer"
Storyboard.TargetProperty="Width">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource Anim}" />
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
You might have to do some adjustments from here to remove any hardcoded values in the animations.
I have stack panel in hyperlink button on button click i have to change stack panel background
<HyperlinkButton Name="WhereToStayButton" Margin="0,0,0,0" Grid.Row="5" Click="WhereToStayButton_Click">
<HyperlinkButton.Template>
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock Text="{Binding Path=LocalizedResources.menu_where_stay, Source={StaticResource LocalizedStrings}}" VerticalAlignment="Center" Margin="5,10" FontSize="26" Foreground="Black" FontFamily="{StaticResource CustomLucidaGrandStyle}"/>
</StackPanel>
</ControlTemplate>
</HyperlinkButton.Template>
</HyperlinkButton>
Try this
use this name space using System.Windows.Media; and in button click event write this
private void WhereToStayButton_Click(object sender, RoutedEventArgs e)
{
stackpanelname.Background = new SolidColorBrush(Colors.Red);
}
You can do that by applying Storyboard on Click event trigger:
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="Green" Storyboard.TargetName="sp1"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
For Windows Phone 7, use Visual State:
<ControlTemplate TargetType="HyperlinkButton">
<ControlTemplate.Resources>
<SolidColorBrush x:Key="PhoneBackgrounBrush" Color="Green"/>
</ControlTemplate.Resources>
<StackPanel Orientation="Horizontal" x:Name="sp1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="Background"
Storyboard.TargetName="sp1">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource PhoneBackgrounBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
</ControlTemplate>
As Rohit said, Make use of Visual states to achive your requirement..,
<ControlTemplate TargetType="HyperlinkButton">
<StackPanel Orientation="Horizontal" Background="#EBEBEB" x:Name="sp1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="sp1">
<EasingColorKeyFrame KeyTime="0" Value="#FFE91818"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="/Assets/Menu/wheretostay.png" Stretch="None"/>
<TextBlock />
</StackPanel>
</ControlTemplate>
I want the items added to my ItemsControl to animate the height when they're added. The following sample, using triggers, did the job, but I couldn't get it to work with a non-fixed height for the items (50 in this case).
<ItemsControl ItemsSource="{Binding Notifications}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type Notifications1:Notification}">
<Button x:Name="ItemButton"
ClipToBounds="True"
Height="0">
<Button.Template>
<ControlTemplate>
<Notifications:NotificationTile />
</ControlTemplate>
</Button.Template>
</Button>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"
SourceName="ItemButton">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height"
Storyboard.TargetName="ItemButton"
Duration="0:0:0.5"
To="50" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.Resources>
I then tried to use the VisualStateManager to perform the animations, so the tiles would grow to whatever height they required. In the example below, the items are added at the correct size, but no animation is performed. I assume the EventTrigger isn't even being fired?
Any ideas much appreciated!
<ItemsControl ItemsSource="{Binding Notifications}"
Width="230"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type Notifications1:Notification}">
<Button x:Name="ItemButton"
ClipToBounds="True"
Command="{Binding DataContext.ItemClicked, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
CommandParameter="{Binding}"
Visibility="{Binding IsVisible, Converter={StaticResource boolToVisibilityConverter}}">
<Button.Template>
<ControlTemplate>
<Notifications:NotificationTile />
</ControlTemplate>
</Button.Template>
<VisualStateManager.CustomVisualStateManager>
<is:ExtendedVisualStateManager />
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup is:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:2" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemButton"
Duration="0"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
Storyboard.TargetName="ItemButton">
<DiscreteDoubleKeyFrame KeyTime="0"
Value="NaN" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<i:Interaction.Triggers>
<i:EventTrigger SourceName="ItemButton"
EventName="(FrameworkElement.Loaded)">
<is:GoToStateAction StateName="Expanded" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</DataTemplate>
</ItemsControl.Resources>
Maybe this is a bit off-topic, sorry for that. I'm not sure I understood your question fully.
Anyway, it generally cannot be recommended to have an animation with only "To", as the "From" is originally set to a Double.NaN, and the DoubleAnimation doesn't work in this case.
I am trying to use a DataTemplate for ListBox.ItemTemplate for a simple TODO list.
The template for each ListBoxItem is a grid and I want the content for my 2nd column to stretch the remaining width of the listbox. No amount of HorizontalAlignment="Stretch" etc. etc. seems to do the trick and I think I need to modify the template. I've looked at the ListBox extracted Xaml template but cannot see what I need to change.
In this XAML sample you can see a green box that is supposed to stretch the remaining width of the listboxitem, but doesn't.
In XamlPad / WPF this code actually DOES render as expected.
In Silverlight though the box won't stretch.
<ListBox Width="360" Height="150" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="3,0,3,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
<Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
<TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<s:String>Take out trash</s:String>
<s:String>Clean car</s:String>
<s:String>Finish TODO list program</s:String>
<s:String>Sleep</s:String>
</ListBox>
You can achieve what you want by defining a ItemContainerStyle for your ListBox :
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Stretch" Margin="3,0,3,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="URGENT" Foreground="Red" Margin="5,0,10,0" Grid.Column="0" VerticalAlignment="Center"/>
<Border BorderBrush="Green" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Stretch" Margin="0,2">
<TextBlock Margin="5,2" Text="{Binding}" FontWeight="Bold" />
</Border>
</Grid>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then use this style in your listbox like this :
<ListBox Width="360" Height="150" x:Name="lb" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" />
In what you are trying to do , the problem is your grid width is not equivalent to the listbox item.
The problem is the Grid inside the DataTemplate, if you increase its size, you'll start to see that the border grows with it.
When the user clicks on a row in the datagrid (or uses the keyboard), that row is selected, but the specific cell they clicked on is also given its own special focus. This is fine for a data editing grid, but I am trying to create something more like an open dialog that shows properties for each item in the list, so...
Is it possible to configure a (readonly) DataGrid so that the user can only select or focus on entire rows, not individual fields.
If that is not possible, is there a elegant way of making only the first element selectable - for example in the standard Windows Open dialog, if you change to Details view there are several columns for each row (Filename, Created Date, Size, etc), but you can only highlight items in the filename column.
Here is my (lame) version that adds a black background on the selected row and grey background on the current row. I had to overwrite the styles because I was painting the cells individually and the row selected was hidden.
Just add the pasted code to you DataGrid instance:
<local:DataGrid.RowStyle>
<Style TargetType="local:DataGridRow">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:DataGridRow">
<localprimitives:DataGridFrozenGrid Name="Root">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Normal AlternatingRow">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Storyboard x:Key="DetailsVisibleTransition">
<DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" />
</Storyboard>
</Grid.Resources>
<Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9"/>
<Rectangle x:Name="BackgroundRectangleSelected" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="Black"/>
<localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridCellsPresenter Margin="2" Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" />
<localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" />
<Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" />
</localprimitives:DataGridFrozenGrid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</local:DataGrid.RowStyle>
you can change the style of the DataGridCell
Here is a post that will help
http://leeontech.wordpress.com/2009/06/29/hilighting-entire-rows-in-datagrid/
You could create an style in like these samples to highlight and align I have:
<!-- Right Aligned Cell -->
<Style x:Key="RightAlignedCell" TargetType="{x:Type dg:DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type dg:DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="dg:DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="#356815" />
<Setter Property="Foreground" Value="#e2fce2" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Center Aligned Cell -->
<Style x:Key="CenterAlignedCell" TargetType="{x:Type dg:DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type dg:DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="dg:DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="#356815" />
<Setter Property="Foreground" Value="#e2fce2" />
</Trigger>
</Style.Triggers>
</Style>
later you put:
<dg:DataGrid x:Name="dg" AutoGenerateColumns="False"
xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" ItemsSource="{Binding}"
SelectionMode="Single" ...>
<dg:DataGridTextColumn Header="Total Amount" Width="110" CellStyle="{StaticResource RightAlignedCell}"
Binding="{Binding Total,StringFormat={}\{0:N0\}}" IsReadOnly="True"/>
<dg:DataGridTextColumn Header="Enter Date" Width="110" CellStyle="{StaticResource CenterAlignedCell}"
Binding="{Binding EnterDate,StringFormat={}\{0:dd/MM/yyyy\}}" IsReadOnly="True"/>
....
I hope this works for anyone who's wandering how to highlight a full row in WPF DataGrid.