如何解决在Silverlight中样式化和混合DataTemplate和ControlTemplate项
|| 我有一个Silverlight 4应用程序。该应用程序使用Accordian。我正在尝试设置此手风琴的样式。为了做到这一点,我有以下几点: <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,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,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}\">
我希望将整个Accordian样式定义为可重用模板。我需要使用在ControlTemplate元素中创建的样式。我面临的挑战是,我不知道如何让我的Style使用那些ControlTemplates。有人可以显示如何将ControlTemplate集成到样式中吗?谢谢!
解决方法
您只需要以一种样式设置控件模板,例如
<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}\" />
我希望这有帮助。 :)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。