动画边框 - Windows应用商店应用

Question

我使用以下XML来更改ListBox中所选项目的背景

<Style x:Key="ItemStyle" TargetType="ListBoxItem">
    <Setter Property="Height" Value="60" />
    <Setter Property="Width" Value="60" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates" >
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0" To="{StaticResource AccentColor}" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="{StaticResource AccentColor}" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="{StaticResource AccentColor}" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="{StaticResource AccentColor}" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="fillColor" IsHitTestVisible="False"  Margin="5"
                               Width="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"
                               Height="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}" />
                    <ContentPresenter Content="{Binding}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想做同样但使用边框 除了将Rectangle更改为Border之外，我应该在TargetProperty中使用什么而不是

(Rectangle.Fill).(SolidColorBrush.Color)

我试过（Border.BorderBrush）。（SolidColorBrush.Color），但似乎没有工作

Answer 1

你应该使用（Border.Background）。（SolidColorBrush.Color）

修改

<Style x:Key="ItemStyle" TargetType="ListBoxItem">
    <Setter Property="Height" Value="60" />
    <Setter Property="Width" Value="60" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates" >
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="00:00:03" To="Azure" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="Azure" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="Azure" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="0"  To="Azure" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="fillColor" IsHitTestVisible="False"  
                       Width="{Binding Width, RelativeSource={RelativeSource TemplatedParent}}"
                       Height="{Binding Height, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="Green" BorderThickness="4"/>
                    <ContentPresenter Content="{Binding}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>