Styling and Mixing DataTemplate and ControlTemplate Items in Silverlight_问答_开发者

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!

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. :)