none
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:

    <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
    
            <!-- 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">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
              
                <TextBlock Grid.Column="0" Text="{Binding Name,UpdateSourceTrigger=PropertyChanged}" 
                           TextWrapping="Wrap" HorizontalAlignment="Left"
                           VerticalAlignment="Center" 
                           Padding="5" 
                           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"
                           VerticalAlignment="Center" 
                           Padding="5" 
                           Foreground="{DynamicResource AppNameArea}" FontSize="12" FontFamily="Segoe UI" TextAlignment="Left" />
                    </Border>
                </Grid>
            </Border>
            
            <!--Content control to diplay product belonging to selected categoriy -->
            <Border x:Name="_ItemsPhotoControl" Grid.Column="2" Grid.RowSpan="2" Width="0"/>
          
        </Grid>

    Any idea what could be wrong ?

    regards

    Friday, March 28, 2014 2:22 PM

All replies