How to set width to 100% in WPF

Question

Is there any way how to tell component in WPF to take 100% of available space?

Like

width: 100%;

in CSS

I've got this XAML, and I don't know how to force Grid to take 100% width.

<ListBox Name="lstConnections">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid Background="LightPink">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=User}" Margin="4"></TextBlock>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=Password}" Margin="4"></TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Path=Host}" Margin="4"></TextBlock>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

Result looks like

alt text http://foto.darth.cz/pictures/wpf_width.jpg

I made it pink so it's obvious how much space does it take. I need to make the pink grid 100% width.

@MartiniBianco I'm sorry, but this question is 8 years old. I don' even remember what was in the image, nor have I used WPF since then. — Jakub Arnold, Mar 11 '17 at 13:01

score 88 · Accepted Answer · edited Sep 27 '11 at 15:04

88

It is the container of the Grid that is imposing on its width. In this case, that's a ListBoxItem, which is left-aligned by default. You can set it to stretch as follows:

<ListBox>
    <!-- other XAML omitted, you just need to add the following bit -->
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

edited Sep 27 '11 at 15:04

answered Apr 24 '09 at 20:26

Kent Boogaart

175,602
35
392
393

15

A small note - if you're trying to do this in a windows store app, you have to actually set `HorizontalContentAlignment` using the same method as above – roryok Aug 12 '13 at 07:29

score 70 · Answer 2 · edited Jun 11 '13 at 03:06

70

You could use HorizontalContentAlignment="Stretch" as follows:

<ListBox HorizontalContentAlignment="Stretch"/>

edited Jun 11 '13 at 03:06

Dave Clemmer

3,741
12
49
72

answered Jun 10 '13 at 22:58

Giovanny Farto M.

1,557
18
20

score 0 · Answer 3 · answered Jun 21 '23 at 14:33

What worked for me, with a component inside a Grid with 2 columns and 2 rows, was to use Grid.ColumnSpan="2" Grid.RowSpan="2", to make it span across the columns:

<Grid Margin="50">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="4*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
  
    <!-- InputStackPanel -->
    <local:InputStackPanel Grid.ColumnSpan="2" Grid.RowSpan="2" InputsSource="{Binding droppedInputs}"/>

    
</Grid>

How to set width to 100% in WPF

3 Answers3

Linked