I know the title of this question is really confusing and also it is pretty hard to explain so I painted the following picture to explain what I am trying to reach.
My layout has to have three columns with the same width (*). In each column there are going to be many different groups with static content. I want the group title to extend over all three column if it is too long. Then there is also the checkbox on the right of every group title in each column that is then supposed to displayed under the title but still on the right side.
I've tried many different ways to achieve this and even ended up trying out datatriggers to set the grid row.
My current approach was having the subtitle columnspan on 3 again and try to have the checkboxes move out of the way if there's no space.
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="Title 0"/>
<TextBlock Grid.Column="1" Text="Title 1"/>
<TextBlock Grid.Column="2" Text="Title 2"/>
<TextBlock Grid.ColumnSpan="3" Background="LawnGreen" Grid.Row="1"
HorizontalAlignment="Left" Text="Subtitle 1"/>
<CheckBox Grid.Row="1" HorizontalAlignment="Right" Content="Check"/>
<CheckBox Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Content="Check"/>
<CheckBox Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Content="Check"/>
</Grid>
Thanks for the help, even if the answer is that this isnt possible. ^^
There isn't any straight forward solution that I know of. One workaround is to have the group title TextBlock and CheckBox in different Grid.Row
<TextBlock Grid.ColumnSpan="3" Background="LawnGreen" Grid.Row="1"
HorizontalAlignment="Left" Text="Subtitle 1"/>
<CheckBox Grid.Row="2" HorizontalAlignment="Right" Content="Check"/>
<CheckBox Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" Content="Check"/>
<CheckBox Grid.Row="2" Grid.Column="2" HorizontalAlignment="Right" Content="Check"/>
Related
I am trying to achieve the following view in downloads section of my app. But I cant seem to get it right.
I also tried to Google it but came up with nothing.
I know this is ListView and I can use a Grid but then I have to create multiple Columns in it and give them fixed width to get a good view but it doesn't seem right because it is supposed to be an adaptive view so how fixed width will help?
And if I provide * as width the Column goes to 0 and it doesn't work as I expect it to.
I also used RelativePanel mixed with StackPanel but that only worsens the view because when I resize the window the list doesn't get resized but stays at its original size.
Any help in this regard will be appreciated.
Update 13-Dec-2016
Downloads.xaml
<ListView Grid.Row="2"
x:Name="DownloadListView"
ItemsSource="{x:Bind DownloadList, Mode=OneWay}">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}"
FontWeight="Bold"
TextTrimming="CharacterEllipsis"
Grid.ColumnSpan="2"/>
<TextBlock Text="{Binding Type}"
TextWrapping="Wrap"
Grid.Row="2"/>
<StackPanel Orientation="Horizontal"
Grid.Row="3"
Grid.ColumnSpan="2">
<TextBlock Text="MBs Received:"
Width="100"/>
<TextBlock Text="{Binding BytesReceived}"
HorizontalAlignment="Right"
/>
</StackPanel>
<StackPanel Orientation="Horizontal"
Grid.Row="4"
Grid.ColumnSpan="2">
<TextBlock Text="Total MBs:"
Width="100"/>
<TextBlock Text="{Binding TotalBytesToReceive, Mode=OneWay}"
HorizontalAlignment="Right"/>
</StackPanel>
<ProgressBar Value="{Binding Progress}"
Height="10"
Width="200"
HorizontalAlignment="Left"
Grid.Column="0"
Grid.ColumnSpan="3"
Grid.Row="5"/>
<Button Grid.Column="3"
Grid.Row="1"
Grid.RowSpan="2"
HorizontalAlignment="Center"
Background="Transparent"
Width="80"
Click="PauseResumeButton_Click"
Content="{Binding PauseResume, Mode=OneWay}"/>
<Button Grid.Column="3"
Grid.Row="3"
Grid.RowSpan="2"
Width="80"
HorizontalAlignment="Center"
Background="Transparent"
Click="CancelButton_Click"
Content="Cancel"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is only the ListView part of the page.
This doesn't work as the above image but it's somewhat close to it. This list view is only wide enough to put the items in it. It is not responsive as the UI changes but it's usable on mobile (I haven't checked on mobile) and pc. As it can be seen within the XAML design interface.
I'm trying to add a border to some controls in XAML - the problem is, whenever I apply wrapping a certain element it wraps the whole window, probably on the first grid element?
This also happens when I try to use it around the WebBrowser. Any suggestions?
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RAT-t00l" Height="850" Width="700">
<Grid x:Name="BigGrid" HorizontalAlignment="Right" Width="682">
<TextBox Name="txt_Log" HorizontalAlignment="Left" Height="657" Margin="4,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="417" IsReadOnly="True"/>
<Button Name="btn" Click="btn_Connect_Click" Background="LightGreen" Content="Connect" HorizontalAlignment="Left" Margin="266,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_disc" Click="btn_Disconnect_Click" Background="Pink" Content="Disconnect" HorizontalAlignment="Left" Margin="346,680,0,0" VerticalAlignment="Top" Width="75"/>
<Button Name="btn_fetch" Click="btn_Fetch_Click" Content="Fetch data" HorizontalAlignment="Left" Margin="266,707,0,0" VerticalAlignment="Top" Width="155" Height="24"/>
<Button Name="btn_eraseLog" Click="btn_EraseLog_Click" Content="Erase log from target" HorizontalAlignment="Left" Margin="266,736,0,0" VerticalAlignment="Top" Width="155" Height="25"/>
<WebBrowser
Name="map"
HorizontalAlignment="Left"
Height="347"
Margin="426,10,0,0"
VerticalAlignment="Top"
Width="246"
LoadCompleted="wb_LoadCompleted"
/>
Here's the border. Meaning to wrap only the grid inside.
<Border Name="mask" CornerRadius="20" Height="auto" Width="auto" BorderThickness="1" BorderBrush="Black">
<Grid x:Name ="GeneralGrid" Margin="426,362,10,291" ShowGridLines="True" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="61*" ></ColumnDefinition>
<ColumnDefinition Width="185*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Name="IP">IP</TextBlock>
<TextBlock Name="ISP" Grid.Row="1">ISP</TextBlock>
<TextBlock Name="Location" Grid.Row="2">Location</TextBlock>
<TextBlock Name="Longitude" Grid.Row="3">Longitude</TextBlock>
<TextBlock Name="Latitude" Grid.Row="4">Latitude</TextBlock>
</Grid>
</Border>
</Grid>
</Window>
I would recommend that you do NOT continue to use the Visual Studio Designer as you have been. It does a very poor job of creating the XAML that we actually want. For example, your UI elements have all got an exact Margin set on them (thanks to the VS Designer I imagine) and this can make things awkward for you later on.
WPF was really designed to enable developer to use resizable controls so that the UI can resize itself when the user resizes the application. Different Panels provide different sizing abilities to their child controls and you can find out more about that from the Panels Overview page on MSDN. However, back to your question regarding the Grid class.
Because you have used the Visual Studio Designer, your controls have not ended up in the Grid cells that you wanted, instead just being placed 'on top of', or 'in front of' them. In order to place a control into a particular Grid cell, you need to set the Grid.Row and/or Grid.Column Attached Properties. See this example taken from the last linked page from MSDN:
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" ShowGridLines="True" Width="250" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="20" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="0">2005 Products Shipped</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="0">Quarter 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="1">Quarter 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Bold" Grid.Row="1" Grid.Column="2">Quarter 3</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">50000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">100000</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">150000</TextBlock>
<TextBlock FontSize="16" FontWeight="Bold" Grid.ColumnSpan="3" Grid.Row="3">Total Units: 300000</TextBlock>
</Grid>
You appear to have placed all your BigGrid elements into a single cell of that layout grid, and the only thing stopping them from appearing on top of each other is the fact you've defined margins. You have not defined a margin for your border, but then defined margins for its children, which means they'll be offset.
Really, for best layout, you want to avoid margins as much as possible and divide your BigGrid into rows and columns. Then place your UI into those cells. If your border is within its own cell you will not have it appear to wrap everything.
Here is the usercontrol which is used in my WP8 app. It displays current time. The fontsize is specified by the screen which uses this control. I want AM to be on top but with inline with the text.
Here is my XAML code for control. Also note that Typography.Variants is not supported in WP8
<TextBlock Text="{Binding BindingHour}" FontWeight="Bold" Name="txtHour"
Grid.Row="0" Grid.Column="0"
FontSize="{Binding BindingHourFontSize}" />
<TextBlock Text=":" FontWeight="ExtraLight"
Grid.Row="0" Grid.Column="1"
FontSize="{Binding BindingColonFontSize}" />
<TextBlock Text="{Binding BindingMinute}" FontWeight="Thin"
Grid.Row="0" Grid.Column="2"
FontSize="{Binding BindingMinuteFontSize}"/>
<TextBlock Text="{Binding BindingAmPm}" FontWeight="SemiBold" Grid.Row="0" Grid.Column="3" />
<TextBlock Grid.Row="1" HorizontalAlignment="Center" FontWeight="SemiBold"
Text="{Binding BindingFreeText}" Grid.ColumnSpan="5"/>
Here is how it looks on the screen where i use above control.
Here is how i want it to look but not able to do it in XAML. Also, superscript and subscript is not supported in WP XAML. odd.
Well, it appears that you can do it the same way it is done via WPF, through the Typography.Variants attached property.
http://msdn.microsoft.com/en-us/library/windowsphone/develop/system.windows.documents.typography.variants(v=vs.105).aspx
which allows you to specify superscript/subscript variants of the font. However, that's not really what you want. Your AM/PM appears vertically aligned within the grid control. If it appears too high relative to neighboring characters, simply push it down via its Margin.
Here is an example of the layout
<Grid
Width="auto"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
Grid.Row="0"
FontSize="80"
Text="09"/>
<TextBlock
Grid.Column="1"
Grid.Row="0"
VerticalAlignment="Center"
FontSize="50"
Text=":"/>
<TextBlock
Grid.Column="2"
Grid.Row="0"
FontSize="80"
Text="11"/>
<TextBlock
Margin="0 20 0 0"
Grid.Column="3"
Grid.Row="0"
FontSize="20"
Text="AM"/>
</Grid>
And a snapshot of how it looks
To keep relative positions the same while stretching/compressing to fill existing space, use ViewBoxes.
If you create the following, and paste the grid into each of the following ViewBoxes
<Grid
Width="auto"
Height="auto"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Viewbox Grid.ColumnSpan="2"></Viewbox>
<Viewbox Grid.Row="1"></Viewbox>
<Viewbox Grid.Row="1" Grid.Column="1"></Viewbox>
</Grid>
you get the following
In the following XAML, I am trying to wrap the TextBlock which binds to "PortfolioCodes" and "CommentaryText" but it seems that "Wrapping" doesn't work for TextBlock. I tried every possible suggestion I could find on this web site but all in vain. Can someone please help.
<Grid>
<ListBox ItemsSource="{Binding Path=Summaries}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" BorderBrush="LightGray" BorderThickness="1" Padding="4" Margin="4">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">No Of Security</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Path=PortfolioSecurityCount}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1">Portfolio Code(s)</TextBlock>
<Grid Grid.Column="2" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="{Binding Path=PortfolioCodes}"></TextBlock>
</Grid>
<TextBlock Grid.Column="0" Grid.Row="2">Commentary Text</TextBlock>
<Grid Grid.Column="2" Grid.Row="2" >
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="{Binding Path=CommentaryText}"></TextBlock>
</Grid>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Based on Guge response, I have changed xaml as below and now its working.
<Grid x:Name="LayoutRoot">
<ListBox x:Name="SummaryListBox" ItemsSource="{Binding Path=Summaries}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" BorderBrush="LightGray" BorderThickness="1" Padding="4" Margin="4">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="15"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">No Of Security</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="{Binding Path=PortfolioSecurityCount}"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1">Portfolio Code(s)</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Path=PortfolioCodes}" ></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2">Commentary Text</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" TextWrapping="Wrap" Text="{Binding Path=CommentaryText}"></TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Change the width of your third ColumnDefinition from "Auto" to "*", that way it only takes up whatever is left of your horizontal space.
To try to explain this:
Screen area in WPF is distributed in a two pass algorithm. First each visual element asks each child how much space it needs, with an indication of how much is available. These children do the same for their children.
Then each visual element tells each child how much they are actually going to get. These children, again, do the same for their children.
Your code failed to do what you wanted because the Grid in the DataTemplate told its third column children they could have all the horizontal space they wanted ("auto") in the first run. Those textboxes then thought that they wouldn't have to wrap. So they just reported back their desired width, and one line worth of height.
In the second run the Grid found that "auto" turned out to be a little less than what those children wanted. And the Grid still only gave them one line worth of height, so wrapping was out of the question. The children then had no other option left to them but to truncate the text.
When the third column width is set to "*", the grid will tell the children in the that column exactly how many horizontal pixels are left after the first column got their "auto" and the second column got their 15. Now the textboxes can figure out that they may want to wrap, and they report back "Ok, Dad, I'll make do with those measly horizontal pixels, but at least give me what I want in verticals". There is no limit to the vertical space, so they get what they need to present all their glorious content.
Try to give width to your TextBlock, by default TextBlock takes all available space and doesn't wrap text
Ok, I'm using the grid to list various content. How can I get specific colums to resize while others stay fixed.
That is, form pops up with specifc Initial column sizes for the controls... if the user RESIZES the form... i want certain 'memo' like fields to expand. How to do that? i seem to only be able to get ALL 'second' columns to expand in height... not just 1 (last one)... or specific ones.
Thanks for any help!!
Here is the layout... how can i make the 'long' text resizeable with form resize, and keep the button glued to the bottom of the form??? tx
<DockPanel VerticalAlignment="Top">
<Grid DockPanel.Dock="Top" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition MinHeight="80" Height="Auto"></RowDefinition>
<RowDefinition ></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Height="Auto" Grid.Column="1" Grid.Row="0" />
<TextBox Height="Auto" Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Height="Auto" Grid.Column="1" Grid.Row="2" />
</Grid>
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Right" MinHeight="20" Margin=" 0,0,10,10">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</DockPanel>
(added after 1st 'answer')
Now, if i remove the bottom stackpanel (Ok, Cancel buttons) out of equation to make this easier and i set the 1st and 2nd rows to a fixed value... i seem to be able to get this working (don't want to have to set a max height though) ... oh and i need to change the verticalAlignment to 'stretch'. But as soon as i add the StackPanel for the buttons again... the stretching no longer works... so here is the next revised version...
<DockPanel VerticalAlignment="Stretch">
<Grid DockPanel.Dock="top" VerticalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="30"></RowDefinition>
<RowDefinition MinHeight="80" Height="*"></RowDefinition>
<RowDefinition MaxHeight="30"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Grid.Column="1" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Grid.Column="1" Grid.Row="2" />
</Grid>
<StackPanel DockPanel.Dock="Bottom" VerticalAlignment="Bottom" HorizontalAlignment="Right" Orientation="Horizontal" MinHeight="20" Margin=" 0,0,10,10">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</DockPanel>
So I'm still having problems...
Use * for the column width instead of Auto, which tells the column to take up whatever space is left after the other columns are set.
If you need multiple columns to share the available space in different percentages, you can prefix the * with a number, as in "2*" and "3*". By default, "" means 1.
HTH,
Berryl
I seem to only be able to solve the problems by incorporting the StackPanel in its own grid row, and column. Here is my solution. Not sure if dock panel is necessary in this case... but without tinkering more ... that's my current solution. If any one can explain to me how to get it working with the stack panel OK, Cancel buttons 'outside' the grid, i'd love to know. Meanwhile, this solution is available for those of you looking into this sort of problem. As you see you need to use Auto in all the other row definitions. * where u want it to expand.
<DockPanel VerticalAlignment="Stretch">
<Grid DockPanel.Dock="top" VerticalAlignment="Stretch" Grid.Column="0" Margin="10,10,10,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition MinWidth="150" Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition MinHeight="80" Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Test1"/>
<Label Grid.Column="0" Grid.Row="1" Content="Test2 -Long notes"/>
<Label Grid.Column="0" Grid.Row="2" Content="Test3"/>
<TextBox Grid.Column="1" Grid.Row="0" />
<TextBox Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
<TextBox Grid.Column="1" Grid.Row="2" />
<StackPanel Grid.Column="1" Grid.Row="3" VerticalAlignment="Bottom" HorizontalAlignment="Right" Orientation="Horizontal" MinHeight="20" Margin=" 0,10,0,0">
<Button Content="OK" Margin="0,0,10,0" Width="75" IsDefault="True"/>
<Button Content="Cancel" Width="75" IsCancel="True" />
</StackPanel>
</Grid>
</DockPanel>
If you want to be able to re-size only one of the squares made by the Row and Column Definitions you should add a Grid or whichever container element inside of one the squares. Then you'll make the Grid inside the square re-size accordingly. This way all the Definitions won't re-size, instead the grid and it's elements inside will re-size and thus not changing the other elements. It's not common but you can have as many stack panels and grids and set their visibility when needed. Sometimes when something doesn't work stick them inside something else and experiment with it. You might just get it by accident, but you'll still get it.