Как сделать 2 колонных представления списка в WPF?

Question

Я делаю новостное приложение WPF. У меня есть представление списка новостных лент, и у него есть собственный шаблон элемента. Этот шаблон 300px; сетка 400px. Ширина ListView составляет 610 пикселей. Теперь, как я могу сделать этот список View 2 колонным? Я хочу вот так [picture]

Answer 1

Всякий раз, когда вам нужно нарисовать список элементов в WPF, вы должны начать с ItemsControl и прикрепить элементы с помощью привязки данных, после этого вам просто нужно настроить шаблоны элементов и панелей на то, что вам нужно для выполнения работы. Вы также должны всегда выбирать наиболее легкую панель макетов, которую вы можете; Сетка слишком тяжелая для этого конкретного случая, UniformGrid прекрасно справится с этой задачей:

<Border BorderBrush="Black" BorderThickness="5">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="NEWS FEED" FontSize="40" Foreground="Black" Background="Orange" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextAlignment="Center" />
        <Rectangle Stroke="Black" StrokeThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
        <Border Background="Yellow" Padding="0,2.5,5,2.5">
            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="2" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <ItemContainerTemplate>
                        <Border Height="300" BorderBrush="Black" BorderThickness="2.5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,2.5,0,2.5" >
                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="White">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="1*" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="3*" />
                                </Grid.ColumnDefinitions>
                                <Rectangle Width="40" Height="40" Stroke="Black" StrokeThickness="1" Margin="5"/>
                                <Path Grid.Row="1" Stroke="Black" StrokeThickness="1" Data="M 0,40 20,0 40,40 Z" HorizontalAlignment="Center" Margin="5,5,5,2.5" />
                                <Path Grid.Row="2" Stroke="Black" StrokeThickness="1" Data="M 0,0 20,40 40,0 Z" HorizontalAlignment="Center" Margin="5,2.5,5,5" />
                                <Rectangle Grid.RowSpan="4" Grid.Column="1" Stroke="Black" StrokeThickness="1" Margin="5"/>
                            </Grid>
                        </Border>
                    </ItemContainerTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Border>
    </StackPanel>
</Border>

Правильно установите привязку «Предметы», и вы получите следующее: