2

我想要实现的是在 WPF 窗口的最右侧创建带有框架的垂直照片列表。图像是绑定到 ObservableCollection 的数据，并且图像列表应该能够由用户使用 GridSplitter 调整大小。

当前代码如下：

    <ListBox Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" ItemsSource="{Binding Sheet.Images}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border Background="#CCC" BorderThickness="8" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}">
                    <Image Source="{Binding Contents}"/>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Width="2" Background="Transparent"/>

它有一个问题 - 无论图像数量如何，水平滚动条始终可见，并且右边框的一部分被隐藏，除非通过滚动发现。当我绑定到 ActualWidth 时，问题更加明显，因为滚动条宽度没有从父容器宽度中减去。

如何创建这样一个垂直滚动条在需要时可见且水平滚动条从不可见的图像垂直列表，同时看到整个边框？

还有一个小问题：如何在两个连续图像的边界之间添加距离？

4

1 回答 1

1

我找到了解决这个问题的方法，虽然不是很优雅。由于某种原因，似乎 ViewportWidth 比报告的窄 2 个像素（或带图像的边框宽 2 个像素）。无论如何，我使用了可以在这里找到的 MathConverter 。

最终结果是：

    <ListBox Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" ItemsSource="{Binding Sheet.Images}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Background="#CCC" BorderThickness="8" Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}},
                        Path=ViewportWidth,
                        Converter={converters:MathConverter},
                        ConverterParameter=@VALUE-2}">
                        <Image Source="{Binding Contents}"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
    </ListBox>

    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Width="2" Background="Transparent"/>

如果有人有更好的解决方案，或者至少说明为什么这 2 个像素首先会导致问题，请随时分享。

于 2013-04-19T09:01:01.543 回答