微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在Silverlight中样式化和混合DataTemplate和ControlTemplate项

如何解决在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 举报,一经查实,本站将立刻删除。