I am trying to get the first label and text box to align to the left side of the screen, and the second label and text box to align to the right side of the screen. What am I missing here? The second set of controls will not align to the right.
Thanks in advance!
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<StackPanel Orientation="Horizontal">
<Label Content="Active Profile"></Label>
<TextBox Name="activeProfileName" Width="100" Height="20"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Label Content="Create A New Profile"
HorizontalAlignment="Right"></Label>
<TextBox Name="activeProfileNamey"
Width="100" Height="20"
HorizontalAlignment="Right"></TextBox>
</StackPanel>
</StackPanel>
</Grid>
The outter StackPanel is your problem. Use Grid instead. Your question is actually a duplicate of the Aligning controls on both left and right side in a stack panel in WPF
Here is the code with Grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Label Content="Active Profile"></Label>
<TextBox Name="activeProfileName" Width="100" Height="20"></TextBox>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" >
<Label Content="Create A New Profile"
HorizontalAlignment="Right"></Label>
<TextBox Name="activeProfileNamey"
Width="100" Height="20"
HorizontalAlignment="Right"></TextBox>
</StackPanel>
</Grid>
</Grid>
Related
I have defined the following XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="500" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="2,2,5,2">
<GroupBox Header="Computer">
<DockPanel>
<ComboBox MinWidth="100" Name="cmbComputerNames" IsEditable="True" DockPanel.Dock="Left" HorizontalAlignment="Stretch" Width="auto" />
<Button Content="Connect" Name="bConnect" Width="65" HorizontalAlignment="Right" />
</DockPanel>
</GroupBox>
</StackPanel>
<Button Grid.Column="1" Content="Two" Margin="1,2,5,2" />
<Button Grid.Column="2" Content="Three" Margin="1,2,2,2" />
<GridSplitter Height="100" Width="4" Grid.Column="0"/>
<GridSplitter Height="100" Width="4" Grid.Column="1"/>
</Grid>
So, the left grid column is resizable. I want the "Connect" button to remain right-aligned and with same width. The combobox however, should be left-aligned and the width should grow as the column is resized, so the distance to the connect button remains the same.
Doesn't work:
Can anyone tell me how I can achieve that?
Since this is too long for a comment
Replace DockPanel with Grid and try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GroupBox Header="Some text here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox MinWidth="100"/>
<Button Grid.Column="1" Content="A button" Margin="5"/>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Width="10"/>
<Button Content="some button" Grid.Column="2"/>
</Grid>
#Andy, if you could produce an answer then I will delete mine.
I have a Xaml view where I'm trying to display Textbox inside a grid which is inside an Exander.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
However, there is a problem with the Textbox which has a anormal height even if my text is just "aa"...
First, I thought that the problem was with the Grid.Row and the Textbox only fit it so I tried to add a StackPanel which doesn't fit the Grid.Row but it doesn't work. It seems that the problem is in the textbox.
With a TextBlock, I don't have this problem but I need the Textbox to display my text.
You can try RichTextBox.
When I want to use TextBox, I have the same problem under a certain height. I solved the problem by using RichTextBox instead of TextBox.
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}" <!-- For the test -->
Background="Transparent"
Foreground="{StaticResource ActiveForegroundBrush}"
IsExpanded="False">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<RichTextBox
Margin="10"
Background="Transparent"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
Foreground="{StaticResource ActiveForegroundBrush}"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="{Binding FormatedParameters, Mode=OneWay}"
TextWrapping="Wrap" />
</StackPanel>
[...]
</Grid>
</Expander>
As others mentioned, I'm a little unsure what you are trying to achieve. I added a couple of horizontal and vertical layouts to your example:
<Expander DataContext="{Binding DiagnosticCategories[0].DiagnosticResults[0]}"
Background="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200"
IsExpanded="False">
<Grid Margin="10" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="*" SharedSizeGroup="A" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<StackPanel
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Top">
<TextBox
Margin="10"
Background="Orange"
BorderThickness="0"
FontSize="13"
FontWeight="Light"
IsReadOnly="True"
Opacity="0.8"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
SelectionBrush="Black"
Text="Test Text"
TextWrapping="Wrap"
/>
</StackPanel>
</Grid>
</Expander>
And I get the following:
Closed:
Open:
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 the following window with some input textboxes. But these textboxes will not expand to fill the remaining space of the second column. Furthermore when the window resizes the textboxes doesn't resize accordingly,
Here is my window
Here is my XAML markup
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="28"></RowDefinition>
</Grid.RowDefinitions>
<Label Content="First Name" Grid.Column="0" Grid.Row="0"></Label>
<Label Content="Last Name" Grid.Column="0" Grid.Row="1"></Label>
<Label Content="Street Name" Grid.Column="0" Grid.Row="2"></Label>
<Label Content="Suburb" Grid.Column="0" Grid.Row="3"></Label>
<Label Content="City" Grid.Column="0" Grid.Row="4"></Label>
<TextBox Width="313" Grid.Column="1" Margin="3" HorizontalAlignment="Left"/>
<TextBox Width="313" Grid.Column="1" Grid.Row="1" Margin="3"
HorizontalAlignment="Left" ></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="2" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="3" Margin="3"
HorizontalAlignment="Left"></TextBox>
<TextBox Width="313" Grid.Column="1" Grid.Row="4" Margin="3"
HorizontalAlignment="Left"></TextBox>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="5"
HorizontalAlignment="Right">
<Button Content="Save" Grid.Column="1" Grid.Row="5" Width="100" Margin="3" />
<Button Content="Exit" Grid.Column="1" Grid.Row="5" Width="100"
HorizontalAlignment="Right" Margin="3"></Button>
</StackPanel>
<!--<TextBox Width="313" Grid.Column="1"></TextBox>-->
</Grid>
</Window>
Is there away to expand the textboxes to fill the remaining space in the second column?
Is there away to make the textboxes resize with the form resize?
You have the Width hardcoded, so it is always going to stay the same. Remove it, and change the alignment to stretch
<TextBox Grid.Column="1" Margin="3" HorizontalAlignment="Stretch">
Just a note, if somebody facing with the same problem:
For me the problem was that I use the SharedSizeGroup on the grid for both of my 2 columns.
If i deleted the sharedsizegroup="b" on the columns what is *, the problem solved.
<StackPanel Orientation="Vertical"
Grid.IsSharedSizeScope="True">
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Size (m): " />
<TextBox x:Name="RealObjSize"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjSize_OnTextChanged" />
</Grid>
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="a" />
<ColumnDefinition Width="*" **SharedSizeGroup="b"**/>
</Grid.ColumnDefinitions>
<TextBlock Text="Distance (m): " />
<TextBox x:Name="RealObjDist"
Grid.Column="1"
MinWidth="50"
HorizontalAlignment="Stretch"
TextChanged="RealObjDist_OnTextChanged" />
</Grid>
</StackPanel>
just put HorizontalAlignment="Stretch" and remove the Width
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.