Develop Reference

Make texts look the same size in xaml

I write an XAML application and I have a problem with the size of text. How can I make the texts look complete but with the same size? (make it responsive).
This is a small example of my XAML code:
<!-- (0, 0) Availability -->
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform">
<Grid Grid.Column="0">
<TextBlock Style="{StaticResource OeeText}">Disponibilidad</TextBlock>
</Grid>
</Viewbox>
<Grid Grid.Column="1">
<TextBlock Style="{StaticResource OeeValues}">100%</TextBlock>
</Grid>
</Grid>
In the Window App, the text shows as:
How can I make all three texts look the same size?
Thanks )

You may define the size of a textBox in a responsive manner using the ViewBox Component but you have to use it inside the grid , in order to wrap the textBox Control
<Viewbox Stretch="Uniform" MaxWidth="200" MaxHeight="200" MinWidth="100" MinHeight="100">
<TextBox x:Name="MyTextBox" />
</Viewbox>
You may also control the size by setting its max/min of width and height as mentioned in the docs

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

WPF controls do not align

NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>

If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>

Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>

Creating a button Template

I'm trying to create a template for a button that I can use over and over again on a form.
The Button, I want it to contain a Grid with two rows and a custom piece of text within the bottom row.
This is what I've got so far, but I don't think it's right because I want to set the text from within the button element.
<ControlTemplate TargetType="Control">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97"></Grid>
<Grid Grid.Row="1" Background="#5898c0">
<TextBlock Grid.Row="1" FontFamily="Segoe UI" FontSize="12" Text="{TemplateBinding Content}" />
</Grid>
</Grid>
</ControlTemplate>
Then to call the template I was hoping I could go:
<Button Content="This is the text" />
But sadly this doesn't work. Is there some other template that I'm supposed to be using to pass the text value to it?

To make it work, there is a control called ContentPresenter. Place that inside your template wherever you want it to be. But remember, that it could be anything, a text, an image or a bunch of other controls, and your Button nor your ControlTemplate, should not care about what it is.
ControlTemplate TargetType="Control">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97"></Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter/>
</Grid>
</Grid>
</ControlTemplate>
The ContentPresenter, when used inside a ContentControl, like the button, automatically attaches to the Content, ContentTemplate and ContentTemplateSelector properties of the templated parent.
Now if you want to display more than just Text, or want to customize the text more, just pass a DataTemplate as your ContentTemplate directly to the specific button.
<DataTemplate x:Key="myButtonContentTemplate">
<TextBlock FontSize="18" Text="{Binding}"/>
</DataTemplate>
<Button ContentTemplate="{StaticResource myButtonContentTemplate}"/>

inter related stack panel sizing

I have a recursively defined user control that needs the following properties:
there are two columns
the first contains a single border around some text
the second column contains a stack of these same type of controls (the recursive part)
if the box in the first column is shorter than the total height of the stacked boxes in the second column, the box should expand to make both columns the same height.
If the total height of the second column is shorter than the box in the first column, then the last item in the second column's stack should expand so they are the same height.
so for example, it might look like this:
Ok, so far what I have done is create a horizontal stack panel where the first item is a dock-panel containing a border and text... the second column is a vertical stack panel bound to a sublist, creating the recursive user control... like this..
<StackPanel Orientation="Horizontal" Background="AliceBlue">
<local:TMRequirementView Requirement="{Binding Baseline}" />
<StackPanel Orientation="Vertical">
<ItemsControl ItemsSource="{Binding Requirements}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:TMGridView Baseline="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
Where the requirement looks like this:
<DockPanel>
<Border MinHeight="50"
BorderBrush="Black" BorderThickness="2">
<TextBlock Text="{Binding Description}"
TextWrapping="Wrap" Background="Transparent" Height="Auto" />
</Border>
</DockPanel>
Now this works great if the stacked column is taller, but it doesn't work if the first column is taller, and I get gaps. Any idea how to handle this mutual height dependency?
Update:
So by adding a border around the right columns stack panel, I was able to see that the stackpanel actually did receive the min-height changes. However, even though there was room to expand, the children of the stack panel didn't automatically update. If I fix the minheight of the stack panel before hand to something large, the children fill up. What I need to figure out is how to update the chidren's height based on changes to the stack panel's min-height.

I think the Grid in this layout does what you describe. I put it in a DockPanel so that you can see how it resizes. Try typing stuff into the text boxes and watch how it behaves:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel>
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="0" Grid.Column="1"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="1" Grid.Column="1"></TextBox>
<TextBox AcceptsReturn="True" Grid.Row="2" Grid.Column="1"></TextBox>
</Grid>
<TextBlock/>
</DockPanel>
</Page>
All three rows of the Grid will have the height of a TextBox at a minimum (when you replace the TextBoxes with other elements, you'll need to set minimum heights to keep them from vanishing if they're empty). Since the third row is star-sized, it will size itself to all remaining vertical space left after the first two rows are arranged. So if there's a bunch of content in the first column, the third row in the second column gets taller.
Edit
Actually, there's no reason to even screw around with a Grid in this case: What you're describing is really the behavior of the DockPanel:
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<DockPanel.Resources>
<Style TargetType="Label">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Background" Value="Lavender"/>
<Setter Property="Margin" Value="1"/>
</Style>
</DockPanel.Resources>
<DockPanel LastChildFill="True">
<Label>Foo</Label>
</DockPanel>
<DockPanel LastChildFill="True">
<Label>Foo</Label>
<Label>Bar</Label>
<Label>Baz</Label>
<Label>Bat</Label>
</DockPanel>
</DockPanel>
<Label/>
</DockPanel>