CODEWITHSUNDEEP
wpflistviewlayout
heltonbiker
heltonbiker

Reputation: 27615

Laying out ListView Items vertically with uniform size

I am designing a UserControl in WPF to display multi-track audio signals. Tipically, I will open a file containing audio tracks, and the main window content would be filled with my UserControl, which in turn will contain one item for each audio track in the file. Each item whould stretch to occupy the whole width of the control, and have its height set so that the items are uniformly distributed.

This is more or less the desired result, for a file with 4 items (in gray). Note that each item occupies one fourth of the available height, and all of them have the same width:

enter image description here

Currently, I have this code (XAML):

<ListView
    ItemsSource="{Binding Tracks}"
    Width="{Binding ActualWidth, ElementName=UserControl}"
    Height="{Binding ActualHeight, ElementName=UserControl}"
    >
    <ListView.ItemTemplate>
        <DataTemplate DataType="{x:Type local:SoundTrack}">
            <Border BorderBrush="Black" BorderThickness="1">
                <local:TrackView/>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>        
</ListView>

And TrackView contains:

<Border BorderThickness="1" BorderBrush="Black">
    <Grid x:Name="LayoutRoot" Background="#FFFFDCF2">
        <Polyline Stretch="Fill" Points="{Binding Pontos}" Fill="#FFD60D0D"/>
    </Grid>
</Border>

Problem is: each ListViewItem from ListView is rendered with irregular proportions. Everything gets constrained to a few pixels at the left, and the height does not distribute (instead, it seems to be rendered in absolute units, which is undesired).

I would gladly use any other ItemsControl, but I would prefer to use a ready one instead of subclassing ItemsControl to build it myself.

Upvotes: 2

Views: 1074

Answers (1)

ndonohoe
ndonohoe

Reputation: 10250

This will give you a uniform grid as your item host, so they should all uniformly distribute their heights. 

        <ListView>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1" IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

Edit: Also get rid of the Height and Width Bindings on ListView and set the Horizontal/Vertical alignment and content alignments to Stretch

Upvotes: 3

Related Questions