Develop Reference

How to automatically constraint rows/columns minimal size when using proportional grid sizing (*)?

Assuming we have a simple window:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Width="300" Height="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="2,2,2,2">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
<Button Grid.Row="1" Content="Button 2" Margin="2,2,2,2" />
</Grid>
</Window>
Seems ok. However, after resizing, the upper button's content is cropped:
The desired layout should look like this:
In text: make the row height behave as proportional (*) with MinHeight equal to it's Auto height. In other words, have the Height to be Max(1*,Auto).
I assume that if WPF is capable of determining size of row automatically when set to Auto, then there should be a way to make it respect that size when proportionally sizing.
I found somewhat related questions (1, 2) but was unable to adapt techniques used there to my case.
The only result achieved at the moment is
Bind Button.MinHeight to nested TextBlock.ActualHeight
In code behind: enumerate all grid's childs placed in the first row, find maximal MinHeight, set it as RowDefinition.MinHeight. Looks crappy because the button is bigger then the text block.
May be something related to Measure & Arrange is needed? Or it is not worth the effort and it would be better to just place MinHeight manually (and also have some problems with the localization strings lenght differences)?

Here's a quick and easy trick.
Duplicate the control (and hide it) and use its measurements to find the MinHeight:
<Grid>
<Grid x:Name="dummyControl" VerticalAlignment="Center">
<Button Grid.Row="0" Margin="2,2,2,2" Visibility="Hidden" IsHitTestVisible="False">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="{Binding ElementName=dummyControl, Path=ActualHeight}" Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="2,2,2,2">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
<Button Grid.Row="1" Content="Button 2" Margin="2,2,2,2" />
</Grid>
</Grid>
VerticalAlignment of dummyControl should be anything other than Stretch

Add canvas that takes all window size, and a button in bottom left corner, margined by percentage

I am trying to have a canvas that takes all window size upon resizing, and a button over it, in the bottom left corner, but which resizes with the window(up to some max size, maybe), and the margin from the button to left and bottom resizes with the window as well.
I have tried to achieve it with a grid like this:
<Canvas Background = "LightGray" x:Name="PaintCanvas"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Height="auto" Width="auto">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="8*" />
<RowDefinition Height="20*" />
<RowDefinition Height="62*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="87*" />
</Grid.ColumnDefinitions>
<Button x:Name="testBut" Content="TEST"
Grid.Column="1" Grid.Row="1"
MaxHeight="150" MaxWidth="50"
/>
</Grid>
</Canvas>
Edit: it seems that i have to fill the canvas with the grid.

So, here's how i handled it:
Added my grid(with predefined empty cells that serve as margins) as the only child of Window. Then added Canvas as child of grid, but specified it to span across all its rows and columns - filling whole grid(and Window):
<Canvas Background="WhiteSmoke" x:Name="PaintCanvas"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Grid.RowSpan="3" Grid.ColumnSpan="3"/>
Finally,i put the button in needed cell

WPF How do I make a Border width expand to fill available space in a DockPanel

I have a custom control ButtonRow which will end up going into a different control.
It is very simple, it has one Border, on label and one button.
I need to make it so that the border will extend its width to fill up to where the button is.
This is not happening as you can see in the below image:
The XAML can be found below. I have tried fiddling about with the horizontal alignment of both he label and the border, but they will only ever re-size to fit the text content of the label.
I know there are existing question with very similar problems and names, but none have needed to do quite the same thing or have helped me solve my problem.
I have tried using a StackPanel in horizontal alignment but all it did was make the button go next to the border.
How can I make the border expand to fill the available space?
<Grid>
<DockPanel Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="dockPanel1" VerticalAlignment="Top" Width="Auto">
<Border BorderBrush="#FFDADFE1" Background="#FFECF0F1" BorderThickness="1" Height="20" Name="bdrFilter" HorizontalAlignment="Stretch">
<Label Content="Filter..." FontStyle="Italic" Foreground="#FF6C7A89" Height="20" Name="lblFilter" Padding="5,0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" />
</Border>
<Button Style="{StaticResource FlatButtonStyle}" Content="+" Height="20" HorizontalAlignment="Right" Name="btnAddFilter" VerticalAlignment="Top" Width="20" Foreground="#FF6C7A89" ForceCursor="True" BorderBrush="{x:Null}" />
</DockPanel>
</Grid>
(The button style does not affect its alignment or any other relevant properties)

A DockPanel is not the correct Panel to use for this requirement... like a StackPanel, it does not resize its contents. Instead, just use a regular Grid (which also uses less resources than a DockPanel):
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border BorderBrush="#FFDADFE1" Background="#FFECF0F1" BorderThickness="1"
Height="20" Name="bdrFilter" VerticalAlignment="Top">
<Label Content="Filter..." FontStyle="Italic" Foreground="#FF6C7A89"
Height="20" Name="lblFilter" Padding="5,0" />
</Border>
<Button Grid.Column="1" Content="+" Height="20" HorizontalAlignment="Right"
Name="btnAddFilter" VerticalAlignment="Top" Width="20" Foreground="#FF6C7A89"
ForceCursor="True" BorderBrush="{x:Null}" />
</Grid>
Please see the Panels Overview page on MSDN for more information about the different Panels in WPF.

This might help you out. Setting LastChildFill=True inside a DockPanel does exactly what the name suggests.

Attach element position to another that has dynamic height WPF

I have two elements inside a Grid, the first one has a dynamic height and the second has a fixed height. When the user resizes the window the first element is supposed to grow bigger until the scrollbar does not show. Here's the code:
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ScrollViewer>
<!-- MORE STUFF HERE -->
</ScrollViewer>
</Grid>
<Button Grid.Row="1" Width="126" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
And when it's small looks like this:
When it's big it looks like this:
How can I attached the Button the bottom of the first element, or make the first element stop growing after the content is displayed?

Set the Grid's VerticalAlignment to Top instead of Stretch:
<Grid VerticalAlignment="Top">
...
</Grid>

How to have a control fill all available space

I have a xaml code:
<Grid>
<WrapPanel>
<TextBox ></TextBox>
<Button Content="GetIt" />
</WrapPanel>
</Grid>
How i can to get all available space for textBox?
i want to do something like that:
|[____________________][GetIt]|

There are a number of ways this can be achieved, including this one:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox />
<Button Grid.Column="1">GetIt</Button>
</Grid>

Try this:
<Grid>
<TextBox HorizontalAlignment="Stretch" Margin="2,2,102,2"></TextBox>
<Button HorizontalAlignment="Right" Width="100" Content="GetIt" />
</Grid>
Just make the button the desired width and the text box will fill up the rest.
Thanks for the catch; corrected above to properly handle margin on right. This does, however, require you to update the margin when the button width changes. Two columns is a better solution if you plan to change the spacing often. Using the margin is cleaner if you have several controls in the grid and don't want to create nested grids to handle this kind of split.

The simplest way is to use a DockPanel instead of a Grid (the default for LastChildFill is true but I also added it here for clarity):
<DockPanel LastChildFill="True">
<Button Content="GetIt" DockPanel.Dock="Right" />
<TextBox ></TextBox>
</DockPanel>

Here's a way to achieve the layout that you're looking for:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="2"/>
</Style>
</Page.Resources>
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<!-- Because the Button is fixed in size, you can divide the row it's
in using a DockPanel: the Button is docked to the right edge, and the
TextBox fills up the remaining available space. -->
<Button Margin="2" Padding="2" DockPanel.Dock="Right">GetIt</Button>
<TextBox />
</DockPanel>
<!-- Because the TextBoxes *aren't* fixed in size, you can't use docking,
as it won't size them. So put them in a Grid and use star sizing to
divide the grid's vertical space into two equal parts. The Grid will
fill up the remainder of the (outer) DockPanel. -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0">Another TextBox</TextBox>
<TextBox Grid.Row="1">Yet another TextBox</TextBox>
</Grid>
</DockPanel>
</Page>