WPF: getting AccessText in ScrollViewer to wrap - wpf

I have a Grid containing a ScrollViewer containing AccessText. I want the AccessText to take up the full width of the ScrollViewer, which should take up the full width of the Grid, without any overflow. Currently, the contents of my AccessText are cut off on the right side of the screen instead of wrapping. I have tried setting AccessText.TextWrapping to Wrap, WrapWithOverflow, and I've also tried removing the property entirely. I switched to using a Grid instead of a StackPanel because I thought that might affect how the contents are sized, but that hasn't helped. Here's what I have:
<Grid MaxHeight="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto">
<AccessText Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>

When you set ColumnDefinition Width to Auto, the ScrollViewer within it won't be limited by the "visible Width" of the Column, so it will still take up as much horizontal space as it needs. With the xaml you posted, I think Width="*" will suit your needs. For the ScrollViewer, it seems like you don't want it to be able to Scroll horizontaly but only verticaly? In that case, set HorizontalScrollBarVisibility="Disabled". Otherwise you'll get a Horizontal ScrollBar.
<Grid MaxHeight="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<AccessText TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>

If you simply want the AccessText to wrap indefinitely, modify your second ColumnDefinition from Auto to * and move the AccessText outside of the ScrollViewer as seen below...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<AccessText Grid.Column="1" TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</Grid>
The reason the text would not wrap is because the second ColumnDefinition was set to Auto; which essentially does not force a bounds around the AccessText.
If you want to keep the ScrollViewer try this...
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Auto">
<AccessText TextWrapping="Wrap" Text="{Binding MyLongTextField}"/>
</ScrollViewer>
</Grid>

This ended up giving me what I wanted:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Whee a label:" Grid.Column="0"/>
<ScrollViewer Grid.Column="1" MaxHeight="40"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<AccessText Text="{Binding CRData.Error}" TextWrapping="Wrap"/>
</ScrollViewer>
</Grid>
Thanks to Meleak and Aaron for the suggestion of using * for the column width instead of Auto, and to Meleak for suggesting Disabled for the horizontal scrollbar instead of Auto.

Related

How to make a TextBlock resize horizontally in a LsitBox

I've got a window with a ListBox containing TextBlocks in the template:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
...
<ListBox x:Name="AnnotationsList" ScrollViewer.VerticalScrollBarVisibility="Visible" Grid.Row="1" Grid.ColumnSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding DateAdded}" Grid.Column="0"/>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I expected the TextBlock to adjust the size, with both elements in the template filling the width together in 1/20 proportions.
Instead, the TextBlock never gets smaller and ListBox gets a horizonal scrollbar.
How can I keep the list scrollable vertically and make sure the text gets narrower and wraps if I resize the window?
As Clemens answered in the comments, HorizontalScrollBarVisibility has an option of Disabled, which doesn't affect just the visibility, but actually triggers the children elements to get limited by the horizontal size of the container.

How to have WPF Grid columns width="*" but also have a dynamic minimum width so content doesn't get cropped

I have a 3 columns in wpf grid which needs to be proportional
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="Yellow"></Border>
<Border Grid.Column="2" Background="Yellow">
</Border>
<Border Grid.Column="1" Background="Green">
<Label Content="This is the Green Cell"></Label>
</Border>
</Grid>
The Result is
The issue is The text in green column is cropped. I can solve the issue by setting MinWidth = "150". But, the green column content will be dynamic, so I can't use value of 150. How can I fix this issue?
I think this does what you want: The Label is how horizontally aligned inside its border, so it sizes naturally to whatever it wants to be instead of stretching to its parent. I gave it a semi-transparent background so you can see which portion of its parent it actually occupies.
Then we bind Column 1's MinWidth to the ActualWidth of the Label. Column 1 can go as wide as it likes, but it can't get any narrower than the Label.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition
Width="2*"
MinWidth="{Binding ActualWidth, ElementName=FixedContent}"
/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="Yellow" />
<Border Grid.Column="2" Background="Yellow" />
<Border Grid.Column="1" Background="Green">
<Label
x:Name="FixedContent"
HorizontalAlignment="Left"
Content="This is the Green Cell"
Background="#882266aa"
/>
</Border>
</Grid>
If you want to wrap the text, use TextBlock instead of Label. Label does not support Text Wrapping.
<Border Grid.Column="1" Background="Green">
<TextBlock TextWrapping="Wrap" Text="This is the Green CellThis is the Green CellThis is the Green CellThis is the Green Cell"/>
</Border>

ItemsControl/ListBox items exceed available width

I want text in column 3 wrap and have no horizontal scrollbar. Why doesn't this work?
<ItemsControl x:Name="listMessages" ItemsSource="{Binding Messages}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column1"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column2"/>
<ColumnDefinition Width="*" SharedSizeGroup="Column3"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="Column4"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Text1" />
<TextBlock Grid.Column="1" Text="Text2" />
<TextBlock Grid.Column="2" Text="Very long text that should wrap to the next line, but it doesn't work" TextWrapping="Wrap"/>
<TextBlock Grid.Column="3" Text="Text4" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Items take more width than is available to ItemsControl. Same problem is with ListBox.
I tried to add ScrollViewer.HorizontalScrollbarVisibility=Disabled both on ItemsControl and Grid, but this doesn't help.
The text will be wrapped if you don't set the SharedSizeGroup property:
<ColumnDefinition Width="*"/>
Text wrapping and shared size groups don't go well together. You may want to specify a fixed MaxWidth for the ColumnDefinition or the TextBlock.

Treeview not stretching

I have a simple application with a Treeview and a main content area in a grid. The grid has a gridsplitter to resize, but this does not resize the Treeview.
I have read this is a bug,
but what is the simplest way to resize the Treeview?
<Window x:Class="TestGridSplitter.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0">
<TreeViewItem>
My Treeview
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1" Width="5"/>
<TextBlock Grid.Column="2">
Main Content Area
</TextBlock>
</Grid>
Setting horizontal alignment or contentalignment to Stretch, does not work!
Moreover, it is necessary to set other properties of GridSplitter such as ResizeDirection="Columns" and ResizeBehavior="PreviousAndNext" properties. For example:
<GridSplitter Grid.Column="1" Width="5" ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext"/>
Try the next approach:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Background="#feca00">
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">
Left Hand Side
</TextBlock>
</StackPanel>
<GridSplitter Width="4" Grid.Column="1" Background="Red" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
<Border Grid.Column="2" BorderBrush="#58290A" BorderThickness="5" CornerRadius="10">
<TextBlock FontSize="25" Foreground="#FECA00" TextWrapping="Wrap">
Right Hand Side
</TextBlock>
</Border>
</Grid>

Vertically align a WPF RadioButton bullet and stretch its contents

I want to use a grid, stretched across the entire available area, as the content for a RadioButton, and I want the RadioButton's bullet to be vertically aligned.
Getting the grid to stretch across the entire area is easy enough, I just set the HorizontalContentAlignment property on the RadioButton:
<RadioButton HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock>Foo</TextBlock>
<TextBox Grid.Column="1"/>
<TextBlock Grid.Row="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1"/>
</Grid>
</RadioButton>
And following Simon Weaver's answer to this older question, I can vertically align the radio button's bullet relatively easily:
<RadioButton HorizontalContentAlignment="Stretch">
<TextBlock Grid.IsSharedSizeScope="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock>Foo</TextBlock>
<TextBox Grid.Column="1"/>
</Grid>
<LineBreak/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1"/>
</Grid>
</TextBlock>
</RadioButton>
The trouble is, having done that, the content no longer stretches.
How can I get a vertically aligned bullet and a stretching grid?
The TextBlock is being stretched properly, but the grid inside it is not. Presumably that's just the way TextBlock works.
The following is a bit hacky, but it works:
<RadioButton HorizontalContentAlignment="Stretch">
<TextBlock Name="Text" Grid.IsSharedSizeScope="True">
<Grid Width="{Binding ElementName=Text, Path=ActualWidth}">
This would work for the visual effect. You didn't list any functional requirements so i'm not sure if it will work for you without some event mapping or not.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<RadioButton Grid.Column="0" Grid.RowSpan="2" Content=""/>
<TextBlock Grid.Column="1">Foo</TextBlock>
<TextBox Grid.Column="2"/>
<TextBlock Grid.Row="1" Grid.Column="1">The quick brown fox</TextBlock>
<TextBox Grid.Row="1" Grid.Column="2"/>
</Grid>

Resources