CODEWITHSUNDEEP
c#wpfxaml
Timmoth
Timmoth

Reputation: 510

How can i make a ListView's items take up all the available height?

I am trying to make a column chart using WPF. For the Y axis I have a list of values which I would like to display on the control.

I have a ListView bound to the collection. How can I get the items to spread over the entire length of the list view rather then squish together at the top? And is the ListViewthe correct control to use for this?

Here is a sample of my Xaml:

<ListView Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" 
          ItemsSource="{Binding YAxisValues}" 
          Background="Gray" VerticalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Label Content="{Binding Path=Value}" 
                       Foreground="White" 
                       HorizontalAlignment="Left" 
                       FontSize="12" Width="50"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Desired ListView

On the left is the list view as i currently have it. On the right is my desired result.

How can I change my ListView to get there? Or do I need to use a different control entirely?

Upvotes: 2

Views: 1547

Answers (2)

ASh
ASh

Reputation: 35646

with UniformGrid used as ItemsPanel items get equal height

<ListView Name="Axis" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" 
        ItemsSource="{Binding YAxisValues}"
        Background="Gray" VerticalContentAlignment="Stretch"              
        ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="1"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <!--no changes-->
    </ListView.ItemTemplate>
</ListView>

there can be a issue when ListView doesn't have enough height for all elements. In that case I would put ListView into ViewBox

Upvotes: 3

Nitin Purohit
Nitin Purohit

Reputation: 18580

Set HorizontalContentAlignment to Stretch for items.

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

Upvotes: 0

Related Questions