How can i take control of an element inside a template from outer template

Question

Hi folks,

Am facing hard time finding solution for this problem. I've a control template in which i've a content presenter and a Custom visual state manager with visual state Selected and UnSelected under SelectionStates group. Inside the content presenter's content template i've an ellipse whose Fill property i want to animate according to the visual state. This is not directly possible since the ellipse is residing inside the content presenter's content template. Is ther any indirect workaround possible to do the same. Below is my template

<Style TargetType="local:TabNavigationItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabNavigationItem">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#FF3B5A82"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="UnSelected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="Transparent"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <ContentPresenter>
   <ContentPresenter.ContentTemplate>
    <DataTemplate x:Key="tabNavigationItemTemplate">
     <Border Padding="1">
      <Ellipse x:Name="TabStripEllipse" 
       Fill="Transparent"
       Stroke="#FF3B5A82" Cursor="Hand" 
       Height="8" Width="8"/>
     </Border>
    </DataTemplate>
   </ContentPresenter.ContentTemplate>
  </ContentPresenter>

 </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Your thoughts and suggestions are appreciated..

you may also want to put my xaml file as below.. but the properties related to target type of outer template should be accessible by inner data template.

<Style TargetType="local:TabNavigationItem">
    <Setter Property="ItemContentTemplate" Value="{StaticResource contentTemplate}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabNavigationItem">
                <Grid>

                    <Border>
                        <ContentPresenter>
                            <ContentPresenter.ContentTemplate>

                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="SelectionStates">
                                        <vsm:VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabItemPresenter"
                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="#FF3B5A82"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="UnSelected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabItemPresenter"
                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <SolidColorBrush Color="Transparent"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </vsm:VisualState>
                                    </vsm:VisualStateGroup>
                                </vsm:VisualStateManager.VisualStateGroups>

                                <Border Padding="1">
                                    <Ellipse x:Name="TabStripEllipse" 
                                        Fill="Transparent"
                                        Stroke="#FF3B5A82" Cursor="Hand" 
                                        Height="8" Width="8"/>
                                </Border>

                            </ContentPresenter.ContentTemplate>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Perhaps you have a reason why you are using a ContentPresenter in this way. The normal use of a content presenter would be act as a place holder for content being bound to a property of the control. You wouldn't normally use ContentPresenter and then provide your own DataTemplate to it. Here is my version of your Xaml without the apparrently unnecessary content presenter:-

<Style TargetType="local:TabNavigationItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:TabNavigationItem">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#FF3B5A82"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="UnSelected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabStripEllipse"
                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="Transparent"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>    
     <Border Padding="1">
      <Ellipse x:Name="TabStripEllipse" 
       Fill="Transparent"
       Stroke="#FF3B5A82" Cursor="Hand" 
       Height="8" Width="8"/>
     </Border>    
 </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now your VSM should be able to find the Ellipse.