Cutted Control After Compilation (SizeToContent property)

Question

In edit mode, my textBlocks appear as I want. But when I run the code, the textBlock4 is cropped ! I would like to know why and how to correct this, thank you.

XAML :

<Window x:Class="CuttedControlAfterCompilation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CuttedControlAfterCompilation"
        mc:Ignorable="d"
        Title="Cutted Control After Compilation" Height="350" Width="525">

    <Grid>
        <StackPanel Orientation="Horizontal" Margin="0,50">
            <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
            <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
        </StackPanel>
    </Grid>

</Window>

Images :

textBlock4 with its full width in edit mode

textBlock4 with its width trimmed after execution

Answer 1

In some cases I had trouble using the SizeToContent property. But after several manipulations, I understand and use it much better now.

• Troubles

Trouble with a Grid

<Grid Margin="0,50">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="148*"/>
        <ColumnDefinition Width="148*"/>
        <ColumnDefinition Width="148*"/>
        <ColumnDefinition Width="75*"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Grid.Column="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Grid.Column="2" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Grid.Column="3" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</Grid>

Image : The SizeToContent property narrows the dimensions of the Grid.

Trouble with a StackPanel

<StackPanel Orientation="Horizontal" Margin="0,50">
    <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
</StackPanel>

Image : The SizeToContent property narrows the height of the StackPanel.

• Corrections

For the Grid

Possibility 1 : Specify the Width and Height of the Grid (Do not leave them in Auto.).

<Grid Width="519" Height="221" Margin="0,50">

Possibility 2 : Set the value of the row in Pixel, as well as the value of each column.

    <Grid.RowDefinitions>
        <RowDefinition Height="221"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="148"/>
        <ColumnDefinition Width="148"/>
        <ColumnDefinition Width="148"/>
        <ColumnDefinition Width="75"/>
    </Grid.ColumnDefinitions>

Possibility 3 : Specify the Width and Height of each TextBlock (Do not leave them in Auto.).

    <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" Height="221" Grid.Column="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" Height="221" Grid.Column="2" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" Height="221" Grid.Column="3" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>

Possibility 4 : Set the values of the MinWidth and MinHeight to the Width and Height (which are in Auto in this case) of the Grid.

<Grid Margin="0,50" MinWidth="519" MinHeight="221">

For the StackPanel

Possibility 1 : Specify the Height of the StackPanel (Do not leave it in Auto.).

<StackPanel Height="221" Orientation="Horizontal" Margin="0,50">

Possibility 2 : Specify the Height of each TextBlock (Do not leave it in Auto.).

    <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" Height="221" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="75" Height="221" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>

Possibility 3 : Set the value of the MinHeight to the Height (which is in Auto in this case) of the StackPanel.

<StackPanel Orientation="Horizontal" Margin="0,50" MinHeight="221">

• Conclusion

  It appears that the SizeToContent property ignores spaces that are not used in controls when the dimensions are floating (Star or Auto). This can be remedied by specifying the dimensions of the control that the Window contains or those of its children.

  So, to take the XAML code from the question, it may be corrected by setting the Grid MinHeight to 319 and setting the SizeToContent = "WidthAndHeight" property to the Window.

  <Window x:Class="CuttedControlAfterCompilation.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:local="clr-namespace:CuttedControlAfterCompilation"
  mc:Ignorable="d"
  Title="Cutted Control After Compilation" SizeToContent = "WidthAndHeight">
      <Grid MinHeight="319">
          <StackPanel Orientation="Horizontal" Margin="0,50">
              <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
              <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
              <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
              <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
          </StackPanel>
      </Grid>
  </Window>
  

I thank @PouyaAbadi very much for his contribution.

Answer 2

Why don't you just increase the width of the window?

<Window ... Title="Cutted Control After Compilation" Height="350" Width="533">

The other option would, as mentioned, be to set the SizeToContent property of the window to WidthAndHeight or just Width:

<Window ... SizeToContent="WidthAndHeight">

This should be a simple fix.

Answer 3

This is a standard window issue. You rely on calculated width values, but they gat messed by ThreeD window border sizes. You can make a window wider as Pouya Abadi mentioned, that would be perfect for this case. But it is not a good solution IMHO.

WPF is all about layout. I'd use DockPanel to make contols take up all the space available, or Grid Columns (1*,1*,1*,.75*) sizes. I'm not sure what you are going to make out of this.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width=".75*"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" FontSize="48" FontWeight="Bold" TextAlignment="Center" Grid.Column="1"/>
    <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" FontSize="48" FontWeight="Bold" TextAlignment="Center" Grid.Column="2"/>
    <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" FontSize="112" FontWeight="Bold" TextAlignment="Center" Grid.Column="3"/>
</Grid>

I personally don't like standard window and I use a custom one ModernUI.WPF by First Floor Software + my window style, that cleans up that modern madness and gives me full control on how it looks.

Answer 4

If you add WindowStyle="None" to your window you the textblock will no longer be cut. See Window.WindowStyle Property. I believe the reason is the window border is using some of the width

Alternatively set SizeToContent="WidthAndHeight" and you will be set. See Window.SizeToContent Property

So the code would be

<Window x:Class="CuttedControlAfterCompilation.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:CuttedControlAfterCompilation"
    mc:Ignorable="d"
    Title="Cutted Control After Compilation"
    SizeToContent="WidthAndHeight">
<Grid>
    <StackPanel Orientation="Horizontal" Margin="0,50">
        <TextBlock x:Name="textBlock1" Background="#FFDEE2E4" Text="1" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
        <TextBlock x:Name="textBlock2" Background="#FFC7CCD0" Text="2" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
        <TextBlock x:Name="textBlock3" Background="#FFAEB5B9" Text="3" Width="148" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>
        <TextBlock x:Name="textBlock4" Background="#FFB29AC5" Text="4" Width="73" FontSize="112" FontWeight="Bold" TextAlignment="Center"/>
    </StackPanel>
</Grid>