在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,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}\">
我希望将整个Accordian样式定义为可重用模板。我需要使用在ControlTemplate元素中创建的样式。我面临的挑战是，我不知道如何让我的Style使用那些ControlTemplates。有人可以显示如何将ControlTemplate集成到样式中吗？谢谢！     
2020-05-23 2 条评论
分享

没有找到相关结果

    已邀请:

    骨乏唯瓜

    您只需要以一种样式设置控件模板，例如 
        <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}\" />
    我希望这有帮助。 :)     
    2020-05-23 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.035713911056519