如何在聚焦状态下更改元素的样式。为什么我的代码没有效果?

时间:2014-08-29 08:58:05

标签: xaml windows-phone-8 windows-phone

根据this question的建议,我尝试在聚焦状态下对元素应用不同的样式。这是App中定义的样式的代码。 XAML:

<Style x:Key="RadLoopingListStyle" TargetType="loopingList:LoopingListItem">
    <Setter Property="CacheMode" Value="BitmapCache" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="BorderThickness" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="loopingList:LoopingListItem">
                <Border x:Name="root"
                        Margin="{TemplateBinding Padding}"
                        Background="{StaticResource WhiteBrush}"
                        BorderBrush="{StaticResource PhoneInactiveBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2" />
                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="0" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".6" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DBlue}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DBlue}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource White}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".3" />
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="FocusStates">

                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="root"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To="1" />
                                    <DoubleAnimation Duration="0"
                                                        Storyboard.TargetName="contentPresenter"
                                                        Storyboard.TargetProperty="Opacity"
                                                        To=".6" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <ContentControl x:Name="contentPresenter"
                                    HorizontalContentAlignment="Center"
                                    VerticalContentAlignment="Center"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    DataContext="{TemplateBinding DataContext}"
                                    FontSize="64"
                                    Padding="{TemplateBinding Padding}">
                        <TextBlock DataContext="{TemplateBinding Content}"
                                    FontSize="64"
                                    Text="{Binding StringFormat='{0}'}" />
                    </ContentControl>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

所需页面上的元素定义:

<telerikPrimitives:RadLoopingList x:Name="StackyLoopingList"
                                                      Grid.Column="0"
                                                      IsCentered="True"
                                                      IsExpanded="False"
                                                      ItemHeight="130"
                                                      ItemWidth="130">
                        <telerikPrimitives:RadLoopingList.ItemStyle>
                            <StaticResource ResourceKey="RadLoopingListStyle" />
                        </telerikPrimitives:RadLoopingList.ItemStyle>
                    </telerikPrimitives:RadLoopingList>

我想要实现的是RadLoopingList元素在展开状态下与在聚焦状态下看起来相同。焦点事件被触发但元素的样式不会改变。

我还尝试以编程方式更改焦点事件的样式,但听起来不对,我也不成功。

有人能指出我做错了什么吗?感谢。

1 个答案:

答案 0 :(得分:1)

我没有找到确切的解决方案,但我使用了解决方法,在下面的代码中我手动将项目的CurrentVisualState更改为Expanded。

        foreach (var item in StackyLoopingList.ChildrenOfType<LoopingListItem>())
        {
            if (item.CurrentVisualState != "Selected") VisualStateManager.GoToState(item, "Expanded", true);
        }