CODEWITHSUNDEEP
wpflistviewdatagrid
koxy
koxy

Reputation: 123

DataGrid inside ListView as item template

I'm having some trouble displaying ListView with DataGrids inside it (as item templates). The problem is that column widths in DataGrid are getting wrong size and not stretching to fill whole control width.

Code: 

<Window x:Class="WpfTest1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTest1"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <x:Array x:Key="ListViewItems"
                 Type="{x:Type system:String}">
            <system:String>1</system:String>
            <system:String>2</system:String>
        </x:Array>

        <x:Array x:Key="DataGridItems"
                 Type="{x:Type system:String}">
            <system:String>1</system:String>
            <system:String>2</system:String>
            <system:String>3</system:String>
        </x:Array>

        <DataTemplate x:Key="TemplateWidthDataGrid">
            <DataGrid ItemsSource="{StaticResource DataGridItems}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Column1"
                                        Width="*" />
                    <DataGridTextColumn Header="Column2"
                                        Width="*" />
                </DataGrid.Columns>
            </DataGrid>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListView ItemTemplate="{StaticResource TemplateWidthDataGrid}"
                  ItemsSource="{StaticResource ListViewItems}" />
    </Grid>
</Window>

Result looks like this: MainWindow screenshot

How can i get columns to fill the control width in this scenario?

UPDATED

Following Ciccio's answer I have set the HorizontalContentAlignment property at ListViewItem.

    <ListView ItemTemplate="{StaticResource TemplateWithDataGrid}"
              ItemsSource="{StaticResource ListViewItems}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment"
                        Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

The result is stil not satisfying: Another screenshot

(I also had to set AutoGenerateColumns="False" for DataGrid.)

Compare this with the same DataGrid put outside of the ListView like this:

<Grid>
    <DataGrid ItemsSource="{StaticResource DataGridItems}"
              AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Column1"
                                Width="*" />
            <DataGridTextColumn Header="Column2"
                                Width="*" />
        </DataGrid.Columns>
    </DataGrid>
</Grid>

Third screenshot

Upvotes: 2

Views: 2053

Answers (1)

Babbillumpa
Babbillumpa

Reputation: 1864

The problem is that ItemPanel doesn't stretch its content. You should fix it setting the property HorizontalContentAlignment for the ListBoxItem:

<Grid>
    <ListView ItemTemplate="{StaticResource TemplateWidthDataGrid}"
              ItemsSource="{StaticResource ListViewItems}" >
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

EDIT:

According with what i've found Here, probably you'll fix this problem using a workaround: (binding the Width of the datagrid to the ActualWidth of the ListViewItemPresenter and adjusting the Margin)

    <x:Array x:Key="ListViewItems" Type="{x:Type system:String}">
        <system:String>1</system:String>
        <system:String>2</system:String>
    </x:Array>

    <x:Array x:Key="DataGridItems" Type="{x:Type system:String}">
        <system:String>1</system:String>
        <system:String>2</system:String>
        <system:String>3</system:String>
    </x:Array>

    <DataTemplate x:Key="TemplateWidthDataGrid">
        <DataGrid AutoGenerateColumns="False" ItemsSource="{StaticResource DataGridItems}" Margin="-5,0,0,0"
                  Width="{Binding ActualWidth, Mode=OneWay, 
                  RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsPresenter}}}"
                  HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Column1" Width="*" />
                <DataGridTextColumn Header="Column2" Width="*" />
            </DataGrid.Columns>
        </DataGrid>
    </DataTemplate>

</Window.Resources>

<Grid>
    <ListView ItemTemplate="{StaticResource TemplateWidthDataGrid}" ItemsSource="{StaticResource ListViewItems}">

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>
</Grid>

Upvotes: 3

Related Questions