Why the following event triggers of grid MouseEnter/MouseLeave not working. As a workaround, I used IsMouseOver.
There are no errors, binding errors, simply it does not work without any idea what is the reason.
Any Idea?
Just to pass validation
Here is the code
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<Storyboard x:Key="OnGrdMouseEnter">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Item">
<EasingColorKeyFrame KeyTime="0" Value="#2097B5"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TimeFrameItemText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnGrdMouseLeave">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Item">
<EasingColorKeyFrame KeyTime="0" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TimeFrameItemText">
<EasingColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<StackPanel >
<!--MouseLeftButtonDown="MenuItem_MouseLeftButtonDown"
MouseLeftButtonUp="UIElement_OnMouseLeftButtonUp"-->
<Grid Cursor="Hand" Name="Item" IsEnabled="{Binding IsEnabled}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<!--<RowDefinition Height="1"></RowDefinition>-->
</Grid.RowDefinitions>
<Grid.InputBindings>
<MouseBinding Command="{Binding ItemCommand}" MouseAction="LeftClick"/>
</Grid.InputBindings>
<TextBlock x:Name="TimeFrameItemText" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"
Foreground="{StaticResource PopupForegroundBrush}" Height="22" Text="{Binding TimeFrameLabel}"
Width="{Binding ElementName=popup, Path=DataContext.OptionTextWidth,Converter={StaticResource DummyConverter}}">
<TextBlock>
</Grid>
<Rectangle Width="Auto" Height="1" Visibility="{Binding IsLast,Converter={StaticResource BoolVisibilityConverter},ConverterParameter=Inverse}" Fill="{StaticResource PopupSeparatorBrush}"/>
</StackPanel>
<DataTemplate.Triggers>
<!--<Trigger SourceName="Item" Property="IsMouseOver" Value="True">
<Setter TargetName="Item" Property="Background" Value="#2097B5"/>
<Setter TargetName="TimeFrameItemText" Property="Foreground" Value="White"/>
</Trigger>-->
<EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="Item">
<BeginStoryboard x:Name="OnGrdMouseEnter_BeginStoryboard" Storyboard="{StaticResource OnGrdMouseEnter}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="Item">
<BeginStoryboard x:Name="OnGrdMouseLeave_BeginStoryboard" Storyboard="{StaticResource OnGrdMouseLeave}"/>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Popup>
To make MouseEnter and MouseLeave event working for grid, set the background color of the grid to Transparent.
Related
I have a user control which contains an animation that I found here by HAdes (I have done some little changes, little color).
User Control:
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCBusy"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<Color x:Key="FilledColor" A="255" B="222" R="176" G="196"/>
<Color x:Key="UnfilledColor" A="0" B="222" R="176" G="196"/>
<!--<Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/>
<Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/>-->
<!-- Value="#7F000000"-->
<Style x:Key="BusyAnimationStyle" TargetType="Control">
<Setter Property="Background" Value="white" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<ControlTemplate.Resources>
<Storyboard x:Key="Animation0" BeginTime="00:00:00.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse0" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse6" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ellipse7" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/>
<SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsVisible" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Animation0}" x:Name="Storyboard0" />
<BeginStoryboard Storyboard="{StaticResource Animation1}" x:Name="Storyboard1"/>
<BeginStoryboard Storyboard="{StaticResource Animation2}" x:Name="Storyboard2"/>
<BeginStoryboard Storyboard="{StaticResource Animation3}" x:Name="Storyboard3"/>
<BeginStoryboard Storyboard="{StaticResource Animation4}" x:Name="Storyboard4"/>
<BeginStoryboard Storyboard="{StaticResource Animation5}" x:Name="Storyboard5"/>
<BeginStoryboard Storyboard="{StaticResource Animation6}" x:Name="Storyboard6"/>
<BeginStoryboard Storyboard="{StaticResource Animation7}" x:Name="Storyboard7"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="Storyboard0"/>
<StopStoryboard BeginStoryboardName="Storyboard1"/>
<StopStoryboard BeginStoryboardName="Storyboard2"/>
<StopStoryboard BeginStoryboardName="Storyboard3"/>
<StopStoryboard BeginStoryboardName="Storyboard4"/>
<StopStoryboard BeginStoryboardName="Storyboard5"/>
<StopStoryboard BeginStoryboardName="Storyboard6"/>
<StopStoryboard BeginStoryboardName="Storyboard7"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Canvas Height="60" Width="60">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15" />
<Setter Property="Fill" Value="#009B9B9B" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="ellipse0" Canvas.Left="1.75" Canvas.Top="21"/>
<Ellipse x:Name="ellipse1" Canvas.Top="7" Canvas.Left="6.5"/>
<Ellipse x:Name="ellipse2" Canvas.Left="20.5" Canvas.Top="0.75"/>
<Ellipse x:Name="ellipse3" Canvas.Left="34.75" Canvas.Top="6.75"/>
<Ellipse x:Name="ellipse4" Canvas.Left="40.5" Canvas.Top="20.75" />
<Ellipse x:Name="ellipse5" Canvas.Left="34.75" Canvas.Top="34.5"/>
<Ellipse x:Name="ellipse6" Canvas.Left="20.75" Canvas.Top="39.75"/>
<Ellipse x:Name="ellipse7" Canvas.Top="34.25" Canvas.Left="7" />
<Ellipse Width="39.5" Height="39.5" Canvas.Left="8.75" Canvas.Top="8" Visibility="Hidden"/>
</Canvas>
<Label Content="{Binding Path=Text}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--<Label Content="Waiting . . ." HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Control Style="{StaticResource BusyAnimationStyle}">
</Control>
<TextBlock Text="Waiting . . ." VerticalAlignment="Center" FontSize="20" Margin="10" />
</StackPanel>
</UserControl>
As you can see above in the last lines, I am trying to put a message "Waiting . . ." to the right of the animation so I have used a StackPanel and Orientation set as Horizontal. Ok, no problem until here.
Now I embed this user control into another user control (see below) and I want to overlap the entire content of a grid with the user control UCBusy so I set for it Panel.ZIndex="100". UCBusy appears at the front but only the spinner, the text on the right of the spinner does not appear. Why?
<UserControl x:Class="My.Apps.WPF.Demo.Controls.UCData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:My.Apps.WPF.Demo.Controls"
Width="700" Height="250">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- 6% -->
<ColumnDefinition Width="0.6*" />
<!-- 47% -->
<ColumnDefinition Width="*" />
<!-- 47% -->
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<controls:UCBusy Grid.Row="1" Grid.RowSpan="12"
Grid.ColumnSpan="3"
Panel.ZIndex="100"
Visibility="Visible"
Width="auto" Height="auto"/>
<!-- here grid components -->
</Grid>
</UserControl>
I'm new to WPF and I would like to change to color of the text and icon of a button template. But it seems I can only change the opacity.
I guess I should apply the style to the children of the button but I don't know how.
Here is the template:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFFFFFFF" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="#FFFFFFFF" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
And here is the style:
<Style x:Key="AppButton" TargetType="{x:Type Button}">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="Foreground" Value="#FFFF9966" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="Green" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.25" Duration="0:0:0:0.3" />
<!--<ColorAnimation Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:0:0.3" />-->
<ColorAnimationUsingKeyFrames Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Storyboard.TargetProperty="(TextBox.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="White" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Thanks for your help.
Bind the Foreground property of the TextBlock and the Icon in the ControlTemplate using a {TemplateBinding}:
<Button x:Name="btnApp1" Width="56" Height="66" Margin="0,0,0,0" Style="{StaticResource AppButton}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<iconPacks:PackIconMaterial Kind="StarOutline" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom"
Foreground="{TemplateBinding Foreground}" FontWeight="Bold">PVIE</TextBlock>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
I am creating a dashboard in WPF with a bunch of key performance indicators, each of which consists of three values.
Whenever the values change I would like the user control to blink for 5 seconds. I would like to make the background color of the control to switch the foreground color of the textblock, and the textblock foreground color to change to the background color of the user control.
This whole WPF animation is new to me, so any help would be much appreciated!
My user control looks like:
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="TitleTextBlock" Text="Title" FontSize="32" HorizontalAlignment="Center" Grid.Row="0" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Bottom" />
<TextBlock x:Name="Value1TextBlock" Text="0" FontSize="192" HorizontalAlignment="Center" Grid.Row="2" FontFamily="OCR-A II" VerticalAlignment="Center" Foreground="White" />
<TextBlock x:Name="Value2TextBlock" Text="0" FontSize="32" HorizontalAlignment="Center" Grid.Row="4" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Top" />
</Grid>
To make a TextBlock blink when its Text Changes you can use ColorAnimationUsingKeyFrames. Text is binding to a property called TextTitle.
<Window.Resources>
<Storyboard x:Key="blinkAnimation" Duration="0:0:5" >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="TitleTextBlock"
AutoReverse="True">
<ColorAnimationUsingKeyFrames.KeyFrames>
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="White"/>
<DiscreteColorKeyFrame KeyTime="0:0:1" Value="Black"/>
<DiscreteColorKeyFrame KeyTime="0:0:2" Value="White"/>
<DiscreteColorKeyFrame KeyTime="0:0:3" Value="Black"/>
<DiscreteColorKeyFrame KeyTime="0:0:4" Value="White"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="TitleTextBlock"
AutoReverse="True">
<ColorAnimationUsingKeyFrames.KeyFrames>
<DiscreteColorKeyFrame KeyTime="0:0:0" Value="Black"/>
<DiscreteColorKeyFrame KeyTime="0:0:1" Value="White"/>
<DiscreteColorKeyFrame KeyTime="0:0:2" Value="Black"/>
<DiscreteColorKeyFrame KeyTime="0:0:3" Value="White"/>
<DiscreteColorKeyFrame KeyTime="0:0:4" Value="Black"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid Name="grid" Background="Black">
<TextBlock x:Name="TitleTextBlock" Text="{Binding TextTitle, NotifyOnTargetUpdated=True}" FontSize="32" HorizontalAlignment="Center" Grid.Row="0" FontFamily="OCR-A II" Foreground="White" VerticalAlignment="Bottom" Background="Black">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<EventTrigger.Actions>
<BeginStoryboard>
<StaticResource ResourceKey="blinkAnimation"/>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</Grid>
This will make the TextBlock blink everytime its Text changes. Note that you must set Background and Foreground explicitly on the TextBlock before using the blinkAnimation, otherwise you'll recieve a System.InvalidOperationException: 'Background' property does not point to a DependencyObject in path '(0).(1)'.
Update
To start this animation from code behind you can do this.
Storyboard blinkAnimation = TryFindResource("blinkAnimation") as Storyboard;
if (blinkAnimation != null)
{
blinkAnimation.Begin();
}
I don't know how to link successfully a StoryBoard to a TranslateTransform that is part of a ContentControl. I always get the following error when I try to run my StoryBoard:
'RenderTransform' property does not point to a DependencyObject in path '(Children).[0].(Content).(0).(1)'.
I guess I don't know how to define a TargetProperty properly! I tried many different paths but always failed. Here is a simplified version of my code:
The DataTemplate:
<DataTemplate x:Key="bdAnswer">
<Border>
<Border.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Border.RenderTransform>
</Border>
</DataTemplate>
The Canvas where the DataTemplate is used:
<Canvas x:Name="cnvGame">
<ContentControl ContentTemplate="{StaticResource bdAnswer}" />
<ContentControl ContentTemplate="{StaticResource bdAnswer}" />
</Canvas>
And my StoryBoard:
<Storyboard x:Key="sbGame">
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="cnvGame"
Storyboard.TargetProperty="(Children)[0].(Content).(UIElement.RenderTransform).(TranslateTransform.Y)" />
</Storyboard>
Many thanks!
That all depends on how you intend to trigger that Storyboard. You were kind of vague, so it might not fit your situation. Everything is contained within the DataTrigger, everything is within the same scope and ascertaining that translate Y property is easy this way.
<DataTemplate x:Key="bdAnswer">
<DataTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Border x:Name="border" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="10"/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock Text="A Bar of Foo"/>
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Here is an example of something I have used
<DataTemplate x:Key="PM_ORDERSTemplate">
<DataTemplate.Resources>
<Storyboard x:Key="OnChecked1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnUnchecked1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnLoaded1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<RadioButton x:Name="radioButton" GroupName="OrderSelect" BorderThickness="1,1,1,1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Style="{DynamicResource RadioButtonOrderPicker}" Checked="RadioButton_Checked" Template="{DynamicResource RadioButtonControlTemplate1}" Margin="5,5,5,0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Border x:Name="bOrderPicker" BorderThickness="5,5,5,5" BorderBrush="{DynamicResource DNP-MediaPlayerBorderColor}" CornerRadius="10,10,10,10" BitmapEffect="{DynamicResource DNP-OrderPickerShadow}" MinHeight="45" Padding="5" d:LayoutOverrides="Width, Height, GridBox" >
<Border.Background>
<LinearGradientBrush EndPoint="125000,1704.038" StartPoint="125000,0" MappingMode="Absolute" SpreadMethod="Pad">
<GradientStop Color="#19FFFFFF" Offset="0"/>
<GradientStop Color="#34FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="image" Width="40" Height="40" Source="Res/Branding/icon_check.png" Margin="2"/>
<Grid Margin="0,0,0,0" d:LayoutOverrides="Width" Grid.Column="1" >
<Label Content="{Binding ORDER_ID.Value" />
</Grid>
</Grid>
</Border>
</RadioButton>
<DataTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="radioButton">
<BeginStoryboard x:Name="OnUnchecked1_BeginStoryboard1" Storyboard="{StaticResource OnLoaded1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="radioButton">
<BeginStoryboard Storyboard="{StaticResource OnChecked1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="radioButton">
<BeginStoryboard x:Name="OnUnchecked1_BeginStoryboard" Storyboard="{StaticResource OnUnchecked1}"/>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
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.