Question

我有一个包含图片的列表框。我想要一个水平排的图像，它们之间没有间隙，所选项目比其余项目大。我尝试过使用变换来使所有其他图像变小但这似乎使项目容器保持相同的大小，所以我最终在图像之间留下了很大的间隙。我的源代码没有任何转换或触发器，如下所示。

<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

也许您将变换应用为RenderTransform而不影响布局，将其应用为LayoutTransform而应该有效。

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>

放大列表框中的选定项目/图像

1 个答案: