Storyboard in Style

Question

In my application I have a lot of very large DataGridTemplateColumn-Definitions. For each column I'm defining a style. The style for example of two columns looks like:

<DataGridTemplateColumn.CellStyle>
    <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
        <Setter Property="IsEditing" 
                Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, 
                                Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.VariantPath}}" />
        <Setter Property="BorderBrush" Value="Blue" />      
        <Style.Triggers>
            <DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.VariantPath}">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
                                <ThicknessAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseOut"/>
                                </ThicknessAnimation.EasingFunction>
                            </ThicknessAnimation>
                            <ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
                                <ThicknessAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseOut"/>
                                </ThicknessAnimation.EasingFunction>
                            </ThicknessAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="VariantPath"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGridTemplateColumn.CellStyle>

-

<DataGridTemplateColumn.CellStyle>
    <Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource BaseDataGridCellStyle}">
        <Setter Property="IsEditing" 
                Value="{Binding CurrentEditTarget, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, 
                                Converter={converters:EditConverter}, ConverterParameter={x:Static component:EditTarget.OriginalPath}}" />
        <Setter Property="BorderBrush" Value="Blue" />      
        <Style.Triggers>
            <DataTrigger Binding="{Binding CurrentEditTarget}" Value="{x:Static component:EditTarget.OriginalPath}">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ThicknessAnimation Storyboard.TargetProperty="(Border.BorderThickness)" FillBehavior="HoldEnd" From="4" To="0" Duration="0:0:0.5" >
                                <ThicknessAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseOut"/>
                                </ThicknessAnimation.EasingFunction>
                            </ThicknessAnimation>
                            <ThicknessAnimation Storyboard.TargetProperty="(Border.Margin)" FillBehavior="HoldEnd" From="-20,0,20,0" To="0" Duration="0:0:0.5" >
                                <ThicknessAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseOut"/>
                                </ThicknessAnimation.EasingFunction>
                            </ThicknessAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <Setter Property="attachedProperties:DataGridExtensions.FocusOnEditingColumn" Value="OriginalPath"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</DataGridTemplateColumn.CellStyle>

I was wondering if there is a way to extract the Storyboard into a style or resource or something else. Because this is the part of the style which is always the same for each DataGridTemplateColumn

Sounds like a [style inheritance](http://www.wpftutorial.net/StyleInheritance.html) job. Create base style where you add trigger with animation and then all new cells are `BasedOn` it. — Sinatr, Nov 04 '15 at 15:34
The problem is, that the value of the datatrigger is always different — Tomtom, Nov 04 '15 at 15:35

score 1 · Accepted Answer · answered Nov 04 '15 at 15:36

How about this:

<Application.Resources>
    <Storyboard x:Key="SB_Height" x:Shared="False">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)"
                Storyboard.TargetName="{DynamicResource AnimationTarget}">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90">
                <EasingDoubleKeyFrame.EasingFunction>
                    <CircleEase EasingMode="EaseOut" />
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Application.Resources>


<Button Name="mybutton" Content="Test" Height="20">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard Storyboard="{StaticResource SB_Height}"/>
        </EventTrigger>
    </Button.Triggers>
</Button>

Please [reference an author](http://stackoverflow.com/a/7028200/1997232) whenever copy/pasting code from another answer. — Sinatr, Nov 04 '15 at 15:50

Storyboard in Style

1 Answers1