Enlarge Selected Item/Image In A Listbox

Question

I have a listbox with images inside it. I want a horizontal row of images with no gap between them, with the selected item being larger than the rest. I've tried playing with transforms to makes all the other images smaller but this seemed to keep the item container the same size so I ended up with large gaps inbetween the images. My source code without any transforms or triggers is below.

<ListBox ItemsSource="{Binding Images}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.Template>
            <ControlTemplate>
                <Grid>
                    <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Grid>
            </ControlTemplate>
        </ListBox.Template>            
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Poster}" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, Path=ActualHeight}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 1

Maybe you applied the transform as RenderTransform which does not affect layout, apply it as LayoutTransform instead and it should work.

---

e.g.

<ListBox.ItemTemplate>
    <DataTemplate>
        <Image Source="{Binding Poster}">
            <Image.LayoutTransform>
                <ScaleTransform x:Name="st" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}"/>
            </Image.LayoutTransform>
        </Image>
        <DataTemplate.Resources>
            <CubicEase x:Key="ease" EasingMode="EaseOut"/>
        </DataTemplate.Resources>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="0:0:0.3"
                                EasingFunction="{StaticResource ease}"
                                Storyboard.TargetName="st"
                                Storyboard.TargetProperty="ScaleX"
                                To="1.5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Duration="0:0:0.3"
                                EasingFunction="{StaticResource ease}"
                                Storyboard.TargetName="st"
                                Storyboard.TargetProperty="ScaleX"
                                To="1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListBox.ItemTemplate>