XAML to change background opacity without changing color
It took me a little while to think of the best way to do this... it turns out that it was trickier than I had first thought. All the same, it is possible, but it does involve quite a lot of code. In order to be able to target the actual Opacity
property of the Background Brush
object, you'll need to use a StoryBoard
... that's why this code example is so verbose.
Because we need to use a Storyboard
object in the DataTrigger
, that means that we must use the DataTrigger.EnterActions
as a Storyboard
cannot be used in the normal DataTrigger.Setters
collection. This follows that we must also use the DataTrigger.ExitActions
to provide another Storyboard
that sets the Opacity
property back to its original value. Try this:
<Grid Name="YourGrid">
<Grid.Background>
<SolidColorBrush Color="Green" Opacity="0.2" />
</Grid.Background>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=YourGrid}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)">
<LinearDoubleKeyFrame Value="0.7" KeyTime="0:0:0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Background.(SolidColorBrush.Opacity)">
<LinearDoubleKeyFrame Value="0.2" KeyTime="0:0:0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
Despite the amount of code required to implement this method, it does do exactly what you were after. However, there is a simpler way to get the same overall effect, but with slightly less code. You could simply add a Rectangle
into the back of each Grid
cell, or division and set the colours and opacity on that instead. Using this method, you could simply set the Rectangle.Opacity
value directly, although you would be using extra controls... the choice is yours.