Question

I Have a custom TabControl with a custom DependencyProperty named SelectionChanging. Well, I want to access the TabItem to animate it, but I don’t know how to access it. This code throws an Exception saying that can’t find “tabItem”

How can I reference this element “tabItem” from the EventTrigger?

<DataTemplate x:Key="WorkSpaceTemplate">
    <aero:SystemDropShadowChrome>
        <controls:PinardTabControl IsSynchronizedWithCurrentItem="True"
                    Margin="0"
                    Padding="0"
                    BorderThickness="2"
                    BorderBrush="{StaticResource WorkspaceBorderBrush}"
                    Background="{StaticResource WorkspaceBackgroundBrush}"
                    ItemsSource="{Binding}" SnapsToDevicePixels="True">
            <controls:PinardTabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template" Value="{StaticResource ClosableTabItemTemplate}" />
                </Style>
            </controls:PinardTabControl.Resources>
            <controls:PinardTabControl.Template>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    **<Grid x:Name="tabItem"** 
                        ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TabPanel x:Name="HeaderPanel" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                        <Border x:Name="ContentPanel" CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                            <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>

            </controls:PinardTabControl.Template>
            <controls:PinardTabControl.Triggers>
                <EventTrigger RoutedEvent="controls:PinardTabControl.SelectionChanging">
                    <BeginStoryboard>
                        <Storyboard Name="FormFade">
                            <DoubleAnimation  Name="FormFadeAnimation"
                                        **Storyboard.TargetName="tabItem"**
                                        Storyboard.TargetProperty="(UIElement.Opacity)"
                                        From="0.0" To="1.0" Duration="0:0:0.25"
                                        AutoReverse="False" RepeatBehavior="1x"
                                     />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </controls:PinardTabControl.Triggers>
        </controls:PinardTabControl>
    </aero:SystemDropShadowChrome>
</DataTemplate>

Answer 1

Elements inside templates have a different scope, you cannot access them from the outside. Maybe you could try to move the animation parts into the template as well (ControlTemplate.Triggers).