title: Styling and Mixing DataTemplate and ControlTemplate Items in Silverlight
body: <p>I have a Silverlight 4 application. This application uses an Accordian. I am trying to style this accordian. In an attempt to do this, I have the following:</p>
  
  <pre><code>    &lt;ControlTemplate TargetType="toolkitPrimitives:AccordionButton" x:Key="myAccordianHeader"&gt;
          &lt;Grid Background="Transparent"&gt;
              &lt;vsm:VisualStateManager.VisualStateGroups&gt;
                  &lt;!-- ExpansionStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="ExpansionStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="0"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Collapsed"&gt;
                          &lt;Storyboard&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Expanded"&gt;
                          &lt;Storyboard&gt;
                              &lt;Storyboard&gt;
                                  &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"&gt;
                                      &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent" /&gt;
                                  &lt;/ColorAnimationUsingKeyFrames&gt;
                              &lt;/Storyboard&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- CheckStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="CheckStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="00:00:00"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Checked"&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Unchecked"/&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- CommonStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="0"/&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="00:00:00.1" From="MouseOver" To="Normal"/&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Normal"/&gt;
                      &lt;vsm:VisualState x:Name="MouseOver"&gt;
                          &lt;Storyboard&gt;
                              &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)"&gt;
                                  &lt;SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/&gt;
                              &lt;/ColorAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Pressed"&gt;
                          &lt;Storyboard&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Disabled"&gt;
                          &lt;Storyboard&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- FocusStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="FocusStates"&gt;
                      &lt;vsm:VisualState x:Name="Focused"&gt;
                          &lt;Storyboard&gt;
                              &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility"&gt;
                                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/&gt;
                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Unfocused"/&gt;
                  &lt;/vsm:VisualStateGroup&gt;
              &lt;/vsm:VisualStateManager.VisualStateGroups&gt;
  
              &lt;Border x:Name="MouseOverBackground" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"&gt;
                  &lt;Border x:Name="background" Background="Transparent"&gt;
                      &lt;Grid Background="Transparent" Margin="{TemplateBinding Padding}"&gt;
                          &lt;ContentControl x:Name="header" Grid.Column="1" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"&gt;
                          &lt;/ContentControl&gt;
                      &lt;/Grid&gt;
                  &lt;/Border&gt;
              &lt;/Border&gt;
              &lt;Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Stroke="Green" StrokeDashArray="1 2" StrokeThickness="1" Visibility="Collapsed"/&gt;
          &lt;/Grid&gt;
      &lt;/ControlTemplate&gt;
  
      &lt;ControlTemplate TargetType="toolkit:AccordionItem" x:Key="myAccordianItem"&gt;
          &lt;Grid Background="Transparent"&gt;
              &lt;vsm:VisualStateManager.VisualStateGroups&gt;
                  &lt;!-- CommonState --&gt;
                  &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="0"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Normal"/&gt;
                      &lt;vsm:VisualState x:Name="Disabled"&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- FocusStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="FocusStates"&gt;
                      &lt;vsm:VisualState x:Name="Focused"&gt;
                          &lt;Storyboard&gt;
                              &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility"&gt;
                                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/&gt;
                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;!-- Unfocused --&gt;
                      &lt;vsm:VisualState x:Name="Unfocused"/&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- ExpansionStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="ExpansionStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="0"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Collapsed"&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)"&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="0"/&gt;
                              &lt;/DoubleAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Expanded"&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)"&gt;
                                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="1"/&gt;
                              &lt;/DoubleAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                  &lt;/vsm:VisualStateGroup&gt;
                  &lt;!-- ExpansionStates --&gt;
                  &lt;vsm:VisualStateGroup x:Name="LockedStates"&gt;
                      &lt;vsm:VisualStateGroup.Transitions&gt;
                          &lt;vsm:VisualTransition GeneratedDuration="0"/&gt;
                      &lt;/vsm:VisualStateGroup.Transitions&gt;
                      &lt;vsm:VisualState x:Name="Locked"&gt;
                          &lt;Storyboard&gt;
                              &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled"&gt;
                                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="False"/&gt;
                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                      &lt;vsm:VisualState x:Name="Unlocked"&gt;
                          &lt;Storyboard&gt;
                              &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled"&gt;
                                  &lt;DiscreteObjectKeyFrame KeyTime="0" Value="True"/&gt;
                              &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;/Storyboard&gt;
                      &lt;/vsm:VisualState&gt;
                  &lt;/vsm:VisualStateGroup&gt;
              &lt;/vsm:VisualStateManager.VisualStateGroups&gt;
              &lt;Border x:Name="Background" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"&gt;
                  &lt;Grid&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="Auto"/&gt;
                          &lt;RowDefinition Height="*"/&gt;
                      &lt;/Grid.RowDefinitions&gt;
  
                      &lt;toolkitPrimitives:AccordionButton Template="{StaticResource myItemHeader}" x:Name="ExpanderButton" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" IsChecked="{TemplateBinding IsSelected}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Padding="4" Margin="0" FontFamily="{TemplateBinding FontFamily}" FontSize="14" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="Bold" Foreground="#FF000000" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/&gt;
                      &lt;toolkitPrimitives:ExpandableContentControl x:Name="ExpandSite" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Percentage="0" Background="#FFD3DEEF" RevealMode="{TemplateBinding ExpandDirection}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Padding="2" Margin="1" FontFamily="{TemplateBinding FontFamily}" FontSize="12" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="DarkGray" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" VerticalAlignment="Stretch" VerticalContentAlignment="Top"/&gt;
                  &lt;/Grid&gt;
              &lt;/Border&gt;
              &lt;Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/&gt;
              &lt;Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3"&gt;
                  &lt;Border.BorderBrush&gt;
                      &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
                          &lt;GradientStop Color="#FFA3AEB9"/&gt;
                          &lt;GradientStop Color="#FF8399A9" Offset="0.375"/&gt;
                          &lt;GradientStop Color="#FF718597" Offset="0.375"/&gt;
                          &lt;GradientStop Color="#FF617584" Offset="1"/&gt;
                      &lt;/LinearGradientBrush&gt;
                  &lt;/Border.BorderBrush&gt;
              &lt;/Border&gt;
          &lt;/Grid&gt;
      &lt;/ControlTemplate&gt;
  
      &lt;Style x:Key="myItemStyle" TargetType="toolkit:AccordionItem"&gt;
          &lt;Setter Property="HeaderTemplate"&gt;
              &lt;Setter.Value&gt;
                  &lt;DataTemplate&gt;
                      &lt;TextBlock Text="Text goes here" /&gt;
                  &lt;/DataTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;                
      &lt;/Style&gt;     
  
  &lt;toolkit:Accordion x:Name="myAccordian" 
    ItemsSource="{Binding MyItems}"
    ItemContainerStyle="{StaticResource myItemStyle}"&gt;
  </code></pre>
  
  <p>I want my entire Accordian style defined as a reusable template. I need to use the styles I've created in the ControlTemplate elements. My challenge is, I don't know how to get those ControlTemplates to be used by my Style. Can someone show how to integrate my ControlTemplate into the Style? Thanks!</p>