Animation border - Windows Store App

Question

I have the following XML that i use to change the background of selected items in a 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>

i want to do the same but using a border besides changing the Rectangle to Border, what should i use in the TargetProperty instead of

(Rectangle.Fill).(SolidColorBrush.Color)

i tried with (Border.BorderBrush).(SolidColorBrush.Color) , but doesnt seem to be working

Answer 1

What do you mean by not working? What behaviour do you expect and how does that  differ from the actual behaviour?

Is the borders BorderThickness large enough to be visible?

Answer 2

if i replace
(Rectangle.Fill).(SolidColorBrush.Color) with (Border.BorderBrush).(SolidColorBrush.Color)

i get this exception

"Cannot resolve TargetProperty (Border.BorderBrush).(SolidColorBrush.Color) on specified object."

what im trying to achieve is when i hover the items on my ListBox instead of chaging the background of the item , as it does now,  it just shows a border with a specific color.

Answer 3

Rather than writing the XAML yourself use Blend to set up the Visual States.

Open the project in Blend.

Edit the template you want to modify.

Choose the SelectedPointerOver stet in the Visual States pane.

Set the border to the colour you want it to be in that state.

Answer 4

someone at stackoverflow helped and i managed to fix my problem :)