Silverlight中的樣式和混合DataTemplate和ControlTemplate項目

我有一個Silverlight 4應用程序。此應用程序使用手風琴。我正在嘗試這種風格。試圖做到這一點，我有以下幾點：Silverlight中的樣式和混合DataTemplate和ControlTemplate項目

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

我想我的整個手風琴風格定義爲一個可重用的模板。我需要使用我在ControlTemplate元素中創建的樣式。我的挑戰是，我不知道如何讓我的風格使用這些ControlTemplates。有人可以展示如何將我的ControlTemplate集成到樣式中嗎？謝謝！

來源

2011-04-15 user70192

你只需要以一種風格設置控制模板，例如

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

，並在手風琴控制，指定上述

<toolkit:Accordion x:Name="myAccordian" ItemsSource="{Binding MyItems}" ItemContainerStyle="{StaticResource myItemStyle}" AccordionButtonStyle="{StaticResource myAccordionButtonStyle}" />

這些風格我希望這有助於。 :)

來源

2011-04-15 22:17:55

Silverlight中的樣式和混合DataTemplate和ControlTemplate項目

回答

相關問題