如何從外部模板中控制模板內的元素

Question

我正面臨着爲此問題尋找解決方案的難題。我有一個控制模板，其中我有一個內容展示者和一個自定義視覺狀態管理器，其視覺狀態爲Selected和UnSelected，屬於SelectionStates組。在內容展示者的內容模板中，我有一個橢圓，其填充屬性需要根據視覺狀態進行動畫處理。這不是直接可能的，因爲橢圓位於內容展示者的內容模板中。是否有任何間接的解決方法可以做到這一點。下面是我的模板

<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> 

你的想法和建議都感激..

您可能還希望把我的XAML文件，如下..但目標外模板類型相關的特性應通過訪問內部數據模板。

<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

也許你有一個原因，你以這種方式使用ContentPresenter。內容展示者的正常使用將充當綁定到控件屬性的內容的佔位符。您通常不會使用ContentPresenter，然後爲其提供您自己的DataTemplate。這是我的XAML中的版本沒有apparrently不必要的內容演示： -

<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> 

現在你應該VSM能夠找到的橢圓。