I have the following XAML which shows a textblock in a grid. The problem is that it just stretches out, it even stretches itself greater than the windows width.
<Grid Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Padding="0" FontWeight="Bold" Margin="0,0,5,0">Description:</Label>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Description}" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Grid>
You need to restrict the width of the second column to make the text wrap -
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Related
My DataGrid is not taking the whole space when I maximize the window in my WPF application. This is how I created the layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Width="265">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Date From:" />
<Label Grid.Row="1" Grid.Column="0" Content="Date To:" />
<DatePicker Grid.Column="1" Grid.Row="0" Margin="3" x:Name="DateFrom" />
<DatePicker Grid.Column="1" Grid.Row="1" Margin="3" x:Name="DateTo" />
<Button Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right"
MinWidth="80" Margin="3" Content="Send" Click="PopulateGrid" x:Name="BtnPopulateGrid"/>
</Grid>
<StackPanel Grid.Row="0" Grid.Column="1">
<DataGrid Width="Auto" x:Name="Grid" Height="553"
Padding="10 0 0 0" VerticalScrollBarVisibility="Visible" Margin="10,0,-707,0" />
</StackPanel>
</Grid>
and this is how it looks like on regular size:
and this is how it looks like when window is max:
What can I try next? I am new to WPF.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Date From:" />
<Label Grid.Row="1" Grid.Column="0" Content="Date To:" />
<DatePicker Grid.Column="1" Grid.Row="0" Margin="3" x:Name="DateFrom" />
<DatePicker Grid.Column="1" Grid.Row="1" Margin="3" x:Name="DateTo" />
<Button Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send" Click="PopulateGrid" x:Name="BtnPopulateGrid"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<DataGrid x:Name="Grid" Padding="10 0 0 0" VerticalScrollBarVisibility="Visible" />
</Grid>
</Grid>
Firstly if you wanna make your datagrid fill a container automatically, you need to use Grid, not StackPanel also your datagrid sizes need to be set auto.
Edit:
As #Erjon said : You don't have to use a container when you have a single DataGrid.But if you have more components with your DataGrid, Grid will be a better container choice instead of StackPanel.
Your main GridDefination sizes were set as Auto, that was wrong.You need to work with "*" if you want a resposive design.Auto means that "Set this control's size with its children".
Try adding in the datagrid ColumnWidth="*"
It will expand all columns to avaiable space and the datagrid will fill it's parent
The second ColumnDefinition of the first grid should be <ColumnDefinition Width="*" />
And as #Zacos said in my answers comment you have to remove Width
I have some issues with getting the grid splitter to work properly.
I have placed the GridSplitter between two grids but the problem is that the grid splitter attaches to left grid which is the only one I can move with the splitter. If I move the left grid towards the right grid, the right grid will get smaller but if I move it away from the right grid it will not expand more than its initial size.
How can I place the GridSplitter in such a way that it allows me to adjust the width of the right grid and then reducing the width of the left grid if it is dragged that way.
I did add a SharedSizeGroup to one of the child grids of the right grid but I'm not sure if that is relevant to my problem, removing it didn't solve anything.
I have also tried to play around with the ResizeBehavor of the GridSplitter also without luck.
I hope it makes sense.
XAML:
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0" Grid.Column="0" VerticalContentAlignment="Center" Margin="5"/>
<ComboBox Grid.Row="0" Grid.Column="1" MinWidth="200px"/>
<Label Grid.Column="2" VerticalContentAlignment="Center" Margin="10 5 5 5"/>
<ComboBox Grid.Row="0" Grid.Column="3" IsEditable="True" MinWidth="250px"/>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2" Grid.Column="0">
<TextBlock/>
</Grid>
<!-- The "Left" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="0">
<WebBrowser></WebBrowser>
</Grid>
<GridSplitter HorizontalAlignment="Stretch" ResizeDirection="Columns" Width="10" Grid.Row="1" Grid.Column="1" ResizeBehavior="PreviousAndNext"/>
<!-- The "Right" Grid -->
<Grid Grid.Row="1" Grid.RowSpan="2" Grid.Column="2" Panel.ZIndex="2" MinWidth="200" HorizontalAlignment="Right">
<Border BorderBrush="Blue" BorderThickness="1" MinWidth="200" Background="#4C808080" >
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True" />
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1" Margin="5,7" VerticalAlignment="Center" IsReadOnly="True"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center" IsReadOnly="True"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
</Grid>
Have a look at this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="3"></TextBlock>
<Label Grid.Row="0"
Grid.Column="0"
VerticalContentAlignment="Center"
Margin="5" />
<ComboBox Grid.Row="0"
Grid.Column="1"
MinWidth="200px" />
<Label Grid.Column="2"
VerticalContentAlignment="Center"
Margin="10 5 5 5" />
<ComboBox Grid.Row="0"
Grid.Column="3"
IsEditable="True"
MinWidth="250px" />
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
<Grid Grid.Column="0"
Background="Aqua">
</Grid>
<GridSplitter HorizontalAlignment="Stretch"
ResizeDirection="Columns"
Width="10"
Grid.Column="1"
ResizeBehavior="PreviousAndNext" />
<!-- The "Right" Grid -->
<Grid Grid.Column="2"
Panel.ZIndex="2"
MinWidth="200"
Background="Yellow">
<Border BorderBrush="Blue"
BorderThickness="1"
MinWidth="200"
Background="#4C808080">
<GroupBox MinWidth="200">
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center"
IsReadOnly="True" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
IsReadOnly="True" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</Border>
</Grid>
</Grid>
<!--Below grid only shown when errors are present. Not relevant for problem -->
<Grid Grid.Row="2">
<TextBlock />
</Grid>
</Grid>
I changed the Grid "logic" a bit. As I understand you correct you want the GridSplitter for the middle part. Thats why I put the top and bottom part in extra rows to keep them away from the GridSplitter. I had to remove the HorizontalAlignment="Right" from your right Grid, too. Otherwise it would have not changed it's size.
Just to be sure the GridSplitter is working I removed the WebBrowser and added Background colors to the left and right Grid. You can replace that. Thought maybe it would be helpfull for you to see if it's working like expected.
/edit added width relation
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<!-- The "Left" Grid -->
This means when you start the application the first column will take twice the size then the third.
This should be a decent showcase, it's exactly the same for columns, just sideways.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="300"/> //sets the height of the first row
<RowDefinition Height="*"/> //* sets the remainder of the height, doesn't work like auto!
</Grid.RowDefinitions>
<Grid Grid.Row="0"
HorizontalAlignment="Left"
Width="400"
Background="Green" />
<Grid Grid.Row="0"
Margin="400,0,0,0"
Background="Red"/>
<Grid Grid.Row="1"
Background="Blue"/>
<GridSplitter Grid.Row="0"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Height="2.5"
Background="Black" />
</Grid>
I have a problem with fitting grid row to parent grid width. So the code is (table header):
<Grid Height="Auto" Margin="20" VerticalAlignment="Top" >
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" >Word</Label>
<Label Grid.Column="1" Grid.Row="0" >Class</Label>
<Label Grid.Column="2" Grid.Row="0" >Match case</Label>
<Label Grid.Column="3" Grid.Row="0" >Regular expression</Label>
<Label Grid.Column="4" Grid.Row="0" >Commands</Label>
</Grid>
The problem is: if all columns based on Width="Auto" the resulting rows will not fit parent grid. I know that I can fix this by setting Width="*" on one of the columns, but it's not what I want.
I need auto size on all columns with fitting to grid width (which can be much bigger then calculated auto-size of a row). How can I archive that?
Use Viewbox if you don't want to set Width="Auto", it is properly fitting the grid.
<Viewbox Stretch="Uniform" VerticalAlignment="Top">
<Grid Height="Auto" Margin="20">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" >Word</Label>
<Label Grid.Column="1" Grid.Row="0" >Class</Label>
<Label Grid.Column="2" Grid.Row="0" >Match case</Label>
<Label Grid.Column="3" Grid.Row="0" >Regular expression</Label>
<Label Grid.Column="4" Grid.Row="0" >Commands</Label>
</Grid>
</Viewbox>
You could use the SharedSizeGroup property to share sizing properties between several different ColumnDefinitions that belongs to different Grids: https://msdn.microsoft.com/en-us/library/system.windows.controls.definitionbase.sharedsizegroup(v=vs.110).aspx
<Grid Height="Auto" Margin="20" VerticalAlignment="Top" >
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="a" />
<ColumnDefinition SharedSizeGroup="b" />
<ColumnDefinition SharedSizeGroup="c" />
<ColumnDefinition SharedSizeGroup="d" />
<ColumnDefinition SharedSizeGroup="e" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" >Word</Label>
<Label Grid.Column="1" Grid.Row="0" >Class</Label>
<Label Grid.Column="2" Grid.Row="0" >Match case</Label>
<Label Grid.Column="3" Grid.Row="0" >Regular expression</Label>
<Label Grid.Column="4" Grid.Row="0" >Commands</Label>
</Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="a" />
<ColumnDefinition SharedSizeGroup="b" />
<ColumnDefinition SharedSizeGroup="c" />
<ColumnDefinition SharedSizeGroup="d" />
<ColumnDefinition SharedSizeGroup="e" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" TextWrapping="Wrap">Some long word.....</TextBlock>
<!-- -->
</Grid>
In the WPF grid below, the middle column is not 6. Text B is all the way to the right instead of 6 away from Text A. I have tried * instead of Auto for the other columns but the result is the same.
How do I make the middle column 6? Is there a workaround? Why is it happening? Is it intended behaviour or a bug?
I make my grids this way so that I don't have to set a margin on every element.
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="6" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="3" Grid.Column="0" HorizontalAlignment="Left">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
<TextBlock Grid.Row="2">Text A</TextBlock>
<Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" />
<TextBlock Grid.Row="2" Grid.Column="2" Background="LightCoral">Text B</TextBlock>
</Grid>
</ScrollViewer>
Note: My window width is Auto.
Edit:
Using #flq's solution but added a scrollviewer with horizontal scrolling, the problem is back. It's probably the same reason as why the solution doesn't show properly in the designer, something to do with WPF not knowing how to calculate widths without a constraining width.
I cannot confirm that setting the third column to * does not work. With the following XAML:
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="6" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="3" Grid.Column="0" HorizontalAlignment="Left">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
<TextBlock Grid.Row="2">Text A</TextBlock>
<Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" />
<TextBlock Grid.Row="2" Grid.Column="2" Background="LightCoral">Text B</TextBlock>
</Grid>
I get this:
I think you want to use "*" on the other columns that are not a fixed length
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
How do I make the middle column 6? Is there a workaround?
Solved by setting a MaxWidth inside the ScrollViewer (I used the largest double value).
Why is it happening? Is it intended behaviour or a bug?
In a ScrollViewer (or the designer), there is no maximum width. Somewhere in the layout calculations it is assigning the column width as 6 + *.
I think ultimately it is a bug because the column width can be calculated without needing a max width (it is specified as a fixed value and does not even need to be calculated).
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<Grid MaxWidth="1.79769E308">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="6" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="6" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.ColumnSpan="4">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
<TextBlock Grid.Row="2">Text A</TextBlock>
<Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" />
<TextBlock Grid.Row="2" Grid.Column="2" Background="LightCoral">Text B</TextBlock>
</Grid>
</ScrollViewer>
How do I make TextBlock to resize to accomodate only available space in StackPanel?
StackPanel limited to my Grid layout. I just illustrated issue but in my real project it's little more complex, so ideally solution should be simple :)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" Grid.Row="1"
Orientation="Horizontal">
<Button Content="Test" />
<TextBlock Text="Test test" />
<Button Content="Test 2" />
<TextBlock Width="Auto">
Some text that I want to trim with ellipse
</TextBlock>
</StackPanel>
</Grid>
You would better make the StackPanel another Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Test" />
<TextBlock Grid.Column="1" Text="Test test" />
<Button Grid.Column="2" Content="Test 2" />
<TextBlock Grid.Column="3" Text="Some text that I want to trim with ellipse"/>
</Grid>
</Grid>
I changed your 'main' grid some because it looks odd having only one row and column (starting at index=0) and setting the StackPanel to Grid.Row="1" and Grid.Column="1"
Proper answer is to use DockPanel instead of StackPanel. Last item in DockPanel will be sized to fit remaining space which is exactly what I needed.