Question

我试图在我的WPF应用程序中实现图像概述。现在，我所有的图像都在彼此之下，有机会滚动垂直，但我需要它们在3x（n / 3）图像的水平滚动网格内，其中n是图像的总量。

<UserControl.Resources>
    <Style TargetType="{x:Type ListBox}">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="4" CornerRadius="5" Margin="6" >
                        <Image Source="{Binding Path=UriSource}" Stretch="Fill" Width="100" Height="120" />
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<UserControl.DataContext>
    <ObjectDataProvider ObjectType="{x:Type local:FileCollection}" MethodName="LoadImages" />
</UserControl.DataContext>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="40"/>
    </Grid.RowDefinitions>

    <ListBox ItemsSource="{Binding}" Grid.ColumnSpan="3" />
</Grid>

实际定位是：

H
H
H
.
.
.

在我跟着pushprajs建议之后：

HHH...

我希望看到的是：

HHHH
HHH
HHH

再次使用真实图像：

现在的样子：

how it looks for now

我想看到的内容：

what i'd like to see

Answer 1

你去吧

<ListBox ItemsSource="{Binding}"
         Grid.ColumnSpan="3">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

想法是将项目面板更改为具有水平orinetation的堆栈面板

横跨3行 - ＆gt;垂直布局

<ListBox ItemsSource="{Binding}"
         Grid.ColumnSpan="3">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="3" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

3行垂直 - >跨布局

这有点复杂

<Grid xmlns:l="clr-namespace:CSharpWPF">
    <Grid.Resources>
        <l:CollectionSplitter x:Key="CollectionSplitter" />
    </Grid.Resources>
    <ListBox Grid.ColumnSpan="3"
             ItemsSource="{Binding Collection,Converter={StaticResource CollectionSplitter}}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="1"
                                         Rows="3" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black"
                                    BorderThickness="4"
                                    CornerRadius="5"
                                    Margin="6">
                                <Image Source="{Binding Path=UriSource}"
                                       Stretch="Fill"
                                       Width="100"
                                       Height="120" />
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

对于上面你也需要一个转换器

namespace CSharpWPF
{
    class CollectionSplitter:IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            List<IEnumerable<object>> result = new List<IEnumerable<object>>();
            IEnumerable<object> collection = (value as IEnumerable).OfType<object>();
            for (int i = 0; i < collection.Count(); i+=3)
            {
                result.Add(collection.Skip(i).Take(3));
            }
            return result;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

结果

result

如何在wpf中创建水平滚动图像网格

1 个答案: