Styling and Mixing DataTemplate and ControlTemplate Items in Silverlight - silverlight

Question

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:
<ControlTemplate TargetType="toolkitPrimitives:AccordionButton" x:Key="myAccordianHeader">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="ExpansionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Collapsed">
<Storyboard>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Expanded">
<Storyboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- CheckStates -->
<vsm:VisualStateGroup x:Name="CheckStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="00:00:00"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Checked">
</vsm:VisualState>
<vsm:VisualState x:Name="Unchecked"/>
</vsm:VisualStateGroup>
<!-- CommonStates -->
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" From="MouseOver" To="Normal"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
<vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0030000" Storyboard.TargetName="MouseOverBackground" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="Transparent"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- FocusStates -->
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="MouseOverBackground" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Border x:Name="background" Background="Transparent">
<Grid Background="Transparent" Margin="{TemplateBinding Padding}">
<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}">
</ContentControl>
</Grid>
</Border>
</Border>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Stroke="Green" StrokeDashArray="1 2" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
<ControlTemplate TargetType="toolkit:AccordionItem" x:Key="myAccordianItem">
<Grid Background="Transparent">
<vsm:VisualStateManager.VisualStateGroups>
<!-- CommonState -->
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- FocusStates -->
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<!-- Unfocused -->
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="ExpansionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpandSite" Storyboard.TargetProperty="(ExpandableContentControl.Percentage)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3" KeySpline="0.2,0,0,1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<!-- ExpansionStates -->
<vsm:VisualStateGroup x:Name="LockedStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0"/>
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Locked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unlocked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="IsEnabled">
<DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Background" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<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"/>
<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"/>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
<Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderThickness="1" CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="myItemStyle" TargetType="toolkit:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Text goes here" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<toolkit:Accordion x:Name="myAccordian"
ItemsSource="{Binding MyItems}"
ItemContainerStyle="{StaticResource myItemStyle}">
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!

Answer 1

you just need to set the control template in a style, e.g.
<Style x:Key="myItemStyle" TargetType="toolkit:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="Text goes here" />
</DataTemplate>
</Setter.Value>
</Setter>
**<Setter Property="Template" Value="{StaticResource myAccordianItem}"/>**
</Style>
<Style x:Key="myAccordionButtonStyle" TargetType="toolkit:AccordionButton">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="IsTabStop" Value="True"/>
<Setter Property="TabNavigation" Value="Once"/>
**<Setter Property="Template" Value="{StaticResource myAccordianHeader}"/>**
</Style>
and in the Accordion control, specify these styles above
<toolkit:Accordion x:Name="myAccordian" ItemsSource="{Binding MyItems}" ItemContainerStyle="{StaticResource myItemStyle}" AccordionButtonStyle="{StaticResource myAccordionButtonStyle}" />
I hope this helps. :)