如何在WPF中制作2列列表视图?

时间:2018-11-04 16:40:39

标签: c# wpf listview

我正在制作WPF新闻应用程序。我有一个新闻源列表视图,并且它具有自己的项目模板。此模板为300px; 400px网格。 ListView的宽度为610px。现在,如何使该列表的“视图2”列化?I want like this[picture]

1 个答案:

答案 0 :(得分:0)

每当需要在WPF中绘制项目列表时,都应从ItemsControl开始并通过数据绑定附加元素,此后,只需将Item和Panel模板设置为完成工作所需的任何东西即可。您还应该始终选择最轻量的布局面板。对于这种特殊情况,网格太重了,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>

正确设置“项目”绑定,您将获得以下信息:

enter image description here