locked
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

    Thursday, October 23, 2014 12:23 PM

Answers

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

    Thursday, October 23, 2014 1:55 PM
    Owner
  • someone at stackoverflow helped and i managed to fix my problem :)

    Thursday, October 23, 2014 2:18 PM

All replies

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

    Thursday, October 23, 2014 1:39 PM
    Owner
  • 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.


    • Edited by Thought2 Thursday, October 23, 2014 1:45 PM
    Thursday, October 23, 2014 1:42 PM
  • 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.

    Thursday, October 23, 2014 1:55 PM
    Owner
  • someone at stackoverflow helped and i managed to fix my problem :)

    Thursday, October 23, 2014 2:18 PM