WPF Gridsplitter does not work with UseLayoutRounding - wpf

If the wpf application has set UseLayoutRounding to true for the window then a gridsplitter will no longer work for some window widths (it will be stuck at its original position), such as the example below.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="401"
UseLayoutRounding="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0">
long string that does not fit within the textblock - long string that does not fit within the textblock
</TextBlock>
<GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="50" Background="LightBlue" />
<TextBlock Grid.Column="2">
long string that does not fit within the textblock - long string that does not fit within the textblock
</TextBlock>
</Grid>
</Window>
Notice that for the example to generate the error the window Width must be 401, the text in the textboxes must be longer than the textbox and UseLayoutRounding must be true.
Anyone that knows how to avoid this or have any workaround? I don't want to set UseLayoutRounding to false since it causes rendering artifacts in my application.
Edit:
For others with the same problem, I found this user made component that solves the problem: http://blog.onedevjob.com/2011/12/11/fixing-wpf-gridsplitter/ Would still be nice if it could be solved with the default wpf components though.

Interesting problem. One obvious workaround is to set TextWrapping="WrapWithOverflow" for at least one of TextBlock elements but I'm sure this was not your intention.
Another workaround is to not to give a splitter it's own grid column and instead place it in the second, last column. Seems to do the trick:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0">
long string that does not fit within the textblock - long string that does not fit within the textblock
</TextBlock>
<GridSplitter Grid.Column="1" Margin="-25,0,0,0" HorizontalAlignment="Left" Width="50" Background="LightBlue" />
<TextBlock Grid.Column="1" Margin="25,0,0,0">
long string that does not fit within the textblock - long string that does not fit within the textblock
</TextBlock>
</Grid>

Related

Width of Textbox, which placed in grid column, extends when inserting long text

When I put a Textbox in a grid column like below
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="115"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="hello"/>
<TextBox Grid.Column="1" />
<Button Grid.Column="2" Content="push me"/>
</Grid>
</StackPanel>
I get proper result, i.e. textbox width is get from parent grid
But when I type a long text, the textbox starts exceeding its column and it stops extending after several extra letters
To .Net 4.6.2, I get same result but changing to .Net 4.7.2 the problem is solved i.e. the textbox width is not changing.
My software is compiled .Net 4.0, is there a solution to solve this for lower .net than 4.7.2?
Tried Pavel's first idea: removing stackpanel and adding another grid row in, still not working in .net 4.6.2
Tried Pavel's second idea: making the width of first column "Auto" instead of "1*". This works, the textbox doesn't extend (.net 4.6.2), however I really wanted the first and second column be responsive to resize.
You can solve this be removing the StackPanel and adding RowDefinition to Grid. You can also set TextWrapping="Wrap" for TextBox for wrapping a long text
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="hello" MinWidth="115"/>
<TextBox Grid.Column="1" TextWrapping="Wrap"/>
<Button Grid.Column="2" Content="push me"/>
</Grid>
StackPanel Y dimension is constrained to content, it will be automatically expanded to its content, more details can be found at panels overview
To me this is a bug that Textbox text size can change its parent width (grid width). This is happening in VS2019 .Net 4->4.6.2 but not in and after .Net 4.7.2.
For anybody faces this problem, I found below workaround by defining an invisible grid which contains textblocks. I get the widths of columns and give them to controls placed in a StackPanel.
<some container>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MinWidth="115"/>
<ColumnDefinition Width="3*" />
<ColumnDefinition MinWidth="90"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<TextBlock x:Name="C0" Grid.Column="0" />
<TextBlock x:Name="C1" Grid.Column="1" Margin="5"/>
<TextBlock x:Name="C2" Grid.Column="2" />
</Grid>
<StackPanel Orientation="Horizontal">
<TextBlock Width="{Binding ElementName=C0, Path=ActualWidth }" Text="hello" />
<TextBox Width="{Binding ElementName=C1, Path=ActualWidth }" Margin="5" />
<Button Width="{Binding ElementName=C2, Path=ActualWidth }" Content="push me"/>
</StackPanel>
</some container>
The margin should be the same for column in grid and control in StackPanel (see second column).

Within a Grid, how to set a textblock's width

I have a Grid, there are two columns, here is the definition.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Name="nText" Text="{Binding Name}" Grid.Column="0" />
<TextBlock Name="vText" Text="{Binding Value}" Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap"/>
</Grid>
My question is, for the vText, when the Text is too long, the text can not be wrapped, no matter the columndefinition width is auto or *. But if I set a definited value to the column 2 's width or to the vText 's width, the text will be wrapped.
How can I set the textblock's width so that the text content can be wrapped?
I have tried to bind to columnDefinition's width/ActualWidth, but also failed.
Great thanks.
To elaborate on BalamBalam's answer, changing
<ColumnDefinition Width="auto"></ColumnDefinition>
to
<ColumnDefinition Width="*"></ColumnDefinition>
will do what you want because "auto" mode expects to infer its size based on the child elements. In this case, your TextBlock doesn't have a Width defined, so there's no way for the ColumnDefinition to infer the width.
Because neither the ColumnDefinition nor the TextBlock have a width defined, the TextBlock's width will default to infinite, and the word wrap algorithm will never clip the text.
By contrast, "*" means to fill remaining space, which will either be defined by the grid (if you set a width on it), or one of its parents. Worst case, the "*" will be able to find a value at the top level, because a window always has a width/height set.
Hopefully this sheds a bit more light on how the layout engine does its magic with sizes!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Name="nText" Text="nText"/>
<TextBlock Grid.Column="1" Grid.Row="0" Name="vText" TextWrapping="Wrap">
vText vTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvText
vTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvText
vTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvTextvText
</TextBlock>
</Grid>

Viewbox containing a TextBlock seems to have minimum height

I'm trying to build a UI layout in WPF that can scale with the size of the window. The idea is to have a number of controls on the left, a number of controls on the right, and in the middle, have a line of text. It's OK if the line of text is cropped on the right. The main thing is that the aspect ratio of all of the controls is maintained.
That part is working fine. The problem is that the center line of text seems to have a minimum height; below this height, it will start clipping vertically. I want the text to keep shrinking if I make the window very thin. Even manually setting the FontSize on the TextBlock doesn't work.
Note that the controls on the left and right do not have a minimum width; they can shrink indefinitely.
My XAML is here. I'm using .NET 4.0.
<Window x:Class="TestWpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="75" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="UniformToFill" Margin="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">A</Button>
<Button Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">B</Button>
<Button Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">C</Button>
<Button Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">D</Button>
</Grid>
</Viewbox>
<Viewbox VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Stretch="UniformToFill" Margin="2">
<TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="UniformToFill" Margin="2">
<Button HorizontalAlignment="Center">X</Button>
</Viewbox>
</Grid>
</Window>
The problem is that you like the Viewbox clipping when it occurs horizontally but don't want any clipping vertically. In other words, you want UniformToFill until the horizontal clipping stops and then you want to switch to Uniform.
To get both of these behaviors you need an alternative to Viewbox. A while ago I wrote a prototype of just such a layout element in this Stack Overflow answer called ViewboxPanel:
Making a Viewbox scale vertically but stretch horizontally
I just tested it, and at least for your sample XAML, I think it does just what you want:
<local:ViewboxPanel VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Margin="2">
<TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
</local:ViewboxPanel>

How can I prevent the grid splitter from resizing a column outside of the window bounds?

I have the XAML shown below (for example). If you drag the grid splitter as far as it goes to the left, and keep dragging the mouse, the right-hand column will grow in size outside the bounds of the window - obviously not what I want.
The problem is that I can't set a hard MaxWidth on the right-hand column because the user can resize the window, thus increasing the available space for that column.
So far I think I need to bind the MaxWidth of the right-hand column to something like the window's client area minus the MinWidth of the left plus the width of the splitter column. But I'd like to avoid that if possible. Thoughts?
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="450"
Height="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="100" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" MinWidth="200" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button>Monkey</Button>
</Grid>
<GridSplitter Grid.Column="1" Width="7" ResizeBehavior="PreviousAndNext" />
<Grid Grid.Column="2" Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Header="Spaghetti" Margin="0, 0, 0, 5">
<ComboBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">Noodles</ComboBox>
</GroupBox>
<Expander Grid.Row="1" Header="Batman" IsExpanded="True" Margin="0, 0, 0, 5">
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch">Batman!</Button>
</Expander>
</Grid>
</Grid>
</Window>
I'm having the same problem. Maybe this will be a partial answer. I bound the MaxWidth of the column I'm expanding to the ActualWidth of its grid. The goal being that the splitter never exceed the size of its grid. The binding works correctly but it's not achieving the goal because once my grid splitter gets to the edge of the grid, the grid starts resizing larger as I drag the splitter. If we can make the grid not resize with the splitter, this should work.

WPF TextBlock Padding is cutting off text

I have a TextBlock in a Grid with its Padding attribute set to 5. Sometimes the last character is cut off, depending on what string the Text property is set to.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SomeClass">
<ScrollViewer Padding="5" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0" Grid.Column="0"
Content="SomeLabel"
HorizontalAlignment="Right"
HorizontalContentAlignment="Right"
VerticalAlignment="Center" />
<TextBlock
Grid.Row="0" Grid.Column="1"
HorizontalAlignment="Left"
Padding="5"
Text="0x0F"
TextWrapping="Wrap"
VerticalAlignment="Top" />
</Grid>
</ScrollViewer>
</UserControl>
When the Text is set to 0x0F the F is not visible. When it is set to 0xAB the string displays just fine. Setting the Padding to 0 also makes the string display just fine.
What you describe is obviously a layout bug in WPF (probably in the TextBlock). Whether or not the last letter is wrapped (and cut off) seems to depends on the actual width of the string and the size of the last letter in respect to the size of the padding.
I suggest you report the bug here.
To work around this issue you can use the following code (just put a border around you textblock and set the padding there instead):
<Border Padding="5" Grid.Row="0" Grid.Column="1">
<TextBlock HorizontalAlignment="Left"
Text="0x0F" TextWrapping="Wrap"
VerticalAlignment="Top" />
</Border>
Make the column of the grid that contains textblock auto size like this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.COlumn="0" Text="{Binding Path=SomeViewModelProperty}" />
</Grid>
If you set the height on the TextBlock to 100, does the F then get wrapped?
Just increase the Height of the ComboBoxItem , it should solve the problem.

Resources