Стилизация и смешивание элементов DataTemplate и ControlTemplate в Silverlight - PullRequest
Новая
       5

Стилизация и смешивание элементов DataTemplate и ControlTemplate в Silverlight

0 голосов
/ 15 апреля 2011

У меня есть приложение Silverlight 4.Это приложение использует аккордеон.Я пытаюсь стилизовать этот аккордеон.В попытке сделать это у меня есть следующее: 

    <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 в стиль?Спасибо!

1 Ответ

1 голос
/ 16 апреля 2011

вам просто нужно установить шаблон элемента управления в стиле, например, 

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

и в элементе управления Accordion укажите эти стили выше 

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

Надеюсь, это поможет.:)

...