WPF, fluid width and StackPanel or Grid

Question

We have a WPF layout with 3 columns and I want the center column to be fluid and the out columns to be static widths.

The center column holds a Textblock. When I set the center column to Width="Auto", it still is having issues not being a fluid width.

My XAML is currently below and I have attached an image capture of what it currently looks like in blend. The center Textblock should be fluid, but it seems to be taking some width someplace else before it wraps. I have no other widths set on it.

<Grid Style="{DynamicResource showAttendeesItemGrid}" Margin="0" MinWidth="640">
 <Grid.ColumnDefinitions>
    <ColumnDefinition Width="300" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="220" />
</Grid.ColumnDefinitions>
        <Rectangle Grid.ColumnSpan="3" Style="{DynamicResource showAttendeesItemGridBackgroundRectangle}" MinWidth="640" RenderTransformOrigin="0.684,0.56"/>
        <StackPanel Grid.Column="0" x:Name="LeftPanel" Margin="10,0,0,0" Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Left">
            <TextBlock x:Name="Title" TextWrapping="Wrap" Text="Non-Member Toddler" FontWeight="Bold" FontSize="26.667"/>
            <TextBlock x:Name="SubTitle" TextWrapping="Wrap" VerticalAlignment="Top" Text="Ages 0-3" FontFamily="Futura" FontSize="13.333" Margin="0,2,0,0" HorizontalAlignment="Left"/>
        </StackPanel>

        <TextBlock Grid.Column="1" x:Name="Description" TextWrapping="Wrap" FontSize="16" Margin="0,0,0,0" Visibility="Visible" Text="Max based on attendee selection: 1. this gets even long er now taht that shis is why what?" Height="50" MinWidth="50" MaxWidth="300"/>

        <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">                
             <TextBlock x:Name="Price" TextWrapping="Wrap" Text="$7.00" Margin="0" Foreground="Green" VerticalAlignment="Center" FontSize="24" Width="70" HorizontalAlignment="Left"/>
             <local:ucQuantityIncrementer Grid.Column="3" x:Name="Count" VerticalAlignment="Center" Margin="0" ButtonSize="33" NumberSize="34" FontSize="48" NumberBoxWidth="60" ButtonIconSize="32" HorizontalAlignment="Right" Width="140"/>           
        </StackPanel>


<!--
    <StackPanel Style="{DynamicResource showAttendeesItemContentStackPanel}" MaxWidth="1240" MinWidth="0" Width="640">

    </StackPanel>-->
    <Path x:Name="TopLine" Data="M368,17.7 L367,87.7" Margin="0,1,0,0" Stretch="Fill" Stroke="#FF898989" VerticalAlignment="Top" Height="1"/>
    <Path x:Name="BottomLine" Data="M368,17.7 L367,87.7" Margin="0,1,0,0" Stretch="Fill" Stroke="#FF898989" VerticalAlignment="Bottom" Height="1"/>

</Grid>

enter image description here

Rachel Rachel · Accepted Answer · 2015-05-07T15:17:15

A width of Auto means "resize this column to whatever size the children of this column wants". Since your TextBlock has a MaxWidth of 300, it means the size the column's children want is 300, so that is going to be the size of the column.

A width of * means "resize this column to take up all available space, split proportionally between all other star-sized columns". Since you'd only have 1 Star-sized column, the middle column would take up all available space.

 <Grid.ColumnDefinitions>
    <ColumnDefinition Width="300" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="220" />
 </Grid.ColumnDefinitions>

WPF, fluid width and StackPanel or Grid

2 Answers