Animating list box selected item RRS feed

  • Question

  • Dear all,

    Initially, I have a list box of items define as below :

    Items are define with a visible picture as shown above and with a white border which is not visible here as its width is set to 0 at this stage. The idea is that when I click on a select item, I am animated the border width of the selected item in order that it shows internal content of selected item. Effect is looks like a fan.

    Lets imagine that click on item 2, what I would like to get is that the left side of item 2 gets stick to left of item 1 while expending the border and Item 3 left side should remain close to the expended border.

    By trying to doing so here is what I get :


    As you can see, the Item which has been click display correctly the expended white border but at the same time the Left position of item 2 does not remains close to Item 1.

    Here is the used layout of an item inside the main listbox:

                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            <!-- Card vertical label color -->
            <Rectangle Grid.Column="0" Grid.RowSpan="2" Fill="{Binding Color,UpdateSourceTrigger=PropertyChanged}" Width="10" Margin="0,0,5,0"/>
            <!-- picture side scene-->
            <Image x:Name="photo1" Grid.Column="1" Grid.RowSpan="2"  Source="{Binding ImagesProperty,UpdateSourceTrigger=PropertyChanged}" Style="{StaticResource imgRenderTransformStyle}" Width="250" Height="180"  Stretch="UniformToFill" Opacity="1"/>
            <!-- Card bottom label -->
            <Border Background="{DynamicResource AppNameArea}" Grid.Column="1" Grid.Row="1" MinHeight="40"  VerticalAlignment="Bottom" Opacity="0.8" Width="250">
                        <ColumnDefinition Width="40"/>
                <TextBlock Grid.Column="0" Text="{Binding Name,UpdateSourceTrigger=PropertyChanged}" 
                           TextWrapping="Wrap" HorizontalAlignment="Left"
                           Foreground="White" FontSize="12" FontFamily="Segoe UI" TextAlignment="Left" />
                    <Border Grid.Column="1" Background="White">
                        <TextBlock Grid.Column="1" Text="{Binding ProductItemsCount,UpdateSourceTrigger=PropertyChanged}" 
                           TextWrapping="Wrap" HorizontalAlignment="Center"
                           Foreground="{DynamicResource AppNameArea}" FontSize="12" FontFamily="Segoe UI" TextAlignment="Left" />
            <!--Content control to diplay product belonging to selected categoriy -->
            <Border x:Name="_ItemsPhotoControl" Grid.Column="2" Grid.RowSpan="2" Width="0"/>

    Any idea what could be wrong ?


    Friday, March 28, 2014 2:22 PM

All replies

  • Without seeing your animation it is impossible to help.

    Lloyd Sheen

    Friday, March 28, 2014 4:24 PM
  • Everything seems to be in order in code shown, I think your animation is the problem so please show that.

    noorbakhsh حميد نوربخش

    Friday, March 28, 2014 10:27 PM
  • Where's your animation?

    JP Cowboy Coders Unite!

    Friday, March 28, 2014 11:11 PM