0

I'm making a WPF news app. I have a News Feed list view and it has own item template. This template is 300px;400px grid. ListView's width is 610px. Now, how can i make this list View 2 columned?I want like this[picture]

Alvan Rahimli
  • 348
  • 4
  • 10
  • You will have to use a GridView. See [this](https://stackoverflow.com/questions/15865829/add-items-to-columns-in-a-wpf-listview). But this will add column headers. Consider using a normal Grid with StackPanals inside. – Michael Nov 04 '18 at 17:09
  • Thanks maan, it is what i was searching for :). <3 Ty :) – Alvan Rahimli Nov 04 '18 at 17:42

1 Answers1

0

Whenever you need to draw a list of items in WPF you should start with an ItemsControl and attach the elements via data binding, after that it's just a matter of setting your Item and Panel templates to whatever you need to do the job. You should also always choose the most light-weight layout panel that you can; Grid is a bit too heavy for this particular case, a UniformGrid will do the job just fine:

<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>

Set up your 'Items' binding correctly and you'll get this:

enter image description here

Mark Feldman
  • 15,731
  • 3
  • 31
  • 58