Using data triggers with a GridSplitter - xaml

Question

I am trying to create a GridSplitter which is mostly opaque, and then on mouseover, animates to become fully visible. Here's what I've tried:
Style:
<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Opacity" Value="0.2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
GridSplitter:
<GridSplitter
ResizeDirection="Columns"
Grid.Column="0"
Background="Red"
VerticalAlignment="Stretch"
Width="4"
Style="{StaticResource SplitterStyle}" />
I checked MSDN, and GridSplitter has all of the properties that I'm using, so it seems like it should be fine, but maybe I'm overlooking something obvious?
EDIT:
Is it possible to put a GridSplitter into another element? I changed my style to:
<Style x:Key="SplitterStyle" TargetType="{x:Type Border}">
<Setter Property="Opacity" Value="0.2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Then, I put the GridSplitter into a Border and applied the style to the border, instead:
<Border
Style="{StaticResource SplitterStyle}"
Background="{StaticResource WindowBorderBrush}"
VerticalAlignment="Stretch"
Width="4"
Grid.Column="0"
HorizontalAlignment="Right">
<GridSplitter ResizeDirection="Columns" Background="Red" ResizeBehavior="CurrentAndNext"/>
</Border>
The border works great! But now, the GridSplitter is nowhere to be found (the red background is no shown, the cursor doesn't change when I hover over the border, and there's nothing to drag to resize anything). Why is this?
EDIT:
OK, I found out that I have to specify a width for the GridSplitter. Also, I changed the background for the GridSplitter to transparent, because I was never planning on using red. Now, it displays and looks great, but it still doesn't actually resize anything :P How do I get it to actually be useful?

Answer 1

This is what I ended up with, which worked:
<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Opacity" Value="0.2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
and
<GridSplitter
Background="{StaticResource WindowBorderBrush}"
VerticalAlignment="Stretch"
Width="4"
Grid.Column="0"
ResizeDirection="Columns"
Style="{StaticResource SplitterStyle}" />
I thought I tried exactly that at least once before even posting the first time, but I guess not. Anyway, it works great now.