在Windows Phone中選擇時如何將顏色或紋理圖像應用於LoopingSelector？

Question

如何在LoopingSelector中應用顏色或背景圖像？ 屬性中沒有此控件的選項。 然后我們如何將顏色應用於此控件，如下圖所示。

Answer 1

一個選項是讓您修改loopingselector樣式，在樣式模板中修改Grid背景

<Style TargetType="primitives:LoopingSelectorItem">
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Padding" Value="6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border x:Name="root" Opacity="0" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}">

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">

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

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
                                    <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To=".6" Duration="0"/>
                                </Storyboard>
                            </VisualState>

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

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border.RenderTransform>
                        <TranslateTransform x:Name="Transform"/>
                    </Border.RenderTransform>

                    <Grid>
                        <Rectangle x:Name="background" Margin="2" Opacity="0" Fill="{StaticResource PhoneInactiveBrush}" CacheMode="BitmapCache"/>

                        <Border BorderThickness="2" BorderBrush="{StaticResource PhoneInactiveBrush}">
                            <ContentPresenter x:Name="contentPresenter" CacheMode="BitmapCache"/>
                        </Border>
                    </Grid>

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

Answer 2

與Storyboad混合，可以輕松實現這些效果