WPF: TextBox resizes inside ScrollViewer [duplicate] - wpf

I have a problem.
I need to host grid with controls in ScrollViewer to prevent textbox from being either truncated or collapsed to zero-with at the UI. Also I want the with of textbox to be expanded when user change windows width.
I'm setting Window's content to following code
<DockPanel>
<TreeView DockPanel.Dock="Left" Width="150"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Name"
Margin="5"
VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
Text="Some Name"
Margin="5"
VerticalAlignment="Center"
MinWidth="200"/>
</Grid>
</ScrollViewer>
</DockPanel>
All work fine, but when user types very long text in TextBox it is being expanded and horizontal scroll appears.
Is there any easy way to limit TextBox maximum width and allow it to be expanded only when user changes window size.

The problem is that the parent elements are providing TextBox with as much space as it thinks it needs, and when more text is present it will expand instead of staying at the initial automatic size.
One solution here is to make another auto-sized element and bind the TextBox.Width to it:
<DockPanel>
<TreeView Width="150" DockPanel.Dock="Left"/>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="5" VerticalAlignment="Center" Text="Name"/>
<Border x:Name="b" Grid.Column="1" Margin="5"/>
<TextBox Width="{Binding ActualWidth, ElementName=b}"
MinWidth="200"
Grid.Column="1"
Margin="5"
VerticalAlignment="Center"
Text="Some Name"/>
</Grid>
</ScrollViewer>
</DockPanel>
Note that we set the Margin property of the auto-sizing element (the Border). This is important because if it's not set, there will be a loop:
Border width autosizes to Grid column width
TextBox width resizes to Border.ActualWidth
Grid column width resizes to TextBox width + TextBox margin
Border width autosizes to Grid column width again
By setting the Margin to the same as the TextBox, the resizing of the TextBox won't affect the Grid size.

Overriding TextBox.MeasureOverride like so worked for me:
protected override Size MeasureOverride(Size constraint)
{
Size origSize = base.MeasureOverride(constraint);
origSize.Width = MinWidth;
return origSize;
}

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).

How to make TextBox fill all available space without later resizing to its content?

I have the following Grid with a TextBox in it:
<UserControl ...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30px"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1px"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Grid.RowSpan="3" AcceptsReturn="True"
TextWrapping="Wrap" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<!-- content in other cells of the Grid's first column -->
</Grid>
</UserControl>
I want the TextBox to fill all space that is available on the control (width and height-wise) and should the user enter more text than fits into it I want its vertical scrollbar to become active, without resizing the TextBox. What happens instead is that the size of the TextBox changes to accomodate the content and the whole grid grows with it.
How do I achieve what I need?
Edit: Here's an illustration of what happens.
The above screenshot is of the situation when the content fits comfortably into the TextBox. The below screenshot is of the situation when there is not enough room to fit all content - the TextBox is then resized to fit it and this resizes also the grid that it is placed in, making it look broken.
Edit 2: The project that demonstrates this behavior is here.
I have managed to solve this by adding an invisible Border in the same cells of the Grid as the TextBox, then setting TextBox' Width and Height to ActualWidth and ActualHeight of that Border respectively:
<Border x:Name="b" Grid.Column="1" Grid.RowSpan="3"
HorizontalAlignment="Stretch"/>
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Grid.Column="1"
Grid.RowSpan="3" Width="{Binding ActualWidth, ElementName=b}"
Height="{Binding ActualHeight, ElementName=b}"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
This then caused the TextBox to stay of fixed Height regardless of its content, but there was another problem with its Width: it grew when the interface was expanded, but didn't shrink afterwards, because of the underlying ScrollViewer. The trick was to set that ScrollViewer's HorizontalScrollBarVisibility to Disabled, instead of Hidden as I had done previously.
I pushed changes of the example project to GitHub, so the solution is now available here.
The TextBox doesn't fill the Grid. You can confirm this yourself by specifying a Background for the Grid:
<UserControl>
<Grid Background="Yellow">
...
This is because the height of the Grid is 30 px + whatever the height of the TextBox is + 1 px. For the contents of the row 2 or 3 to fill the Grid, you need to change the Height of at least one of the RowDefinitions to *:
<UserControl>
<Grid Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="30px"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1px"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Grid.RowSpan="3" AcceptsReturn="True"
TextWrapping="Wrap" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</UserControl>

Custom ListViewItem with embedded Expander

I'm creating a simple file browser where it's display will mimic that of the Windows (7) Explorer "Content" display mode. I envision a ListView control whose ItemsSource will be bound to a collection of FileSystemInfo objects. Each of the ListViewItems will show filename, last modified date/time, etc. However, I also want them to have an Expander which, when a user clicks it, will expand vertically to show the file's contents.
Below is my XAML code that I created with Expression Blend. This is the general template of what I want the ListViewItem to be. However, the Expander won't cause the Border's vertical height to expand out to match the additional space required by the Expander's Grid content (in this example a ScrollViewer that has a height of 500 -- obviously each file may have different dimensions depending on content -- image, plain text, etc).
So, what am I doing wrong here? Furthermore, I'm wondering if the ListView control will even behave properly by having its Item elements vertically expand/contract.
This is the ControlTemplate I wish to use for the ListItemView:
<Border BorderBrush="Black" BorderThickness="1" Background="Beige">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.50*"/>
<ColumnDefinition Width="0.25*"/>
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="FileName" d:LayoutOverrides="Height" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Text="FileType" d:LayoutOverrides="Width, Height" VerticalAlignment="Center"/>
<TextBlock Grid.Column="2" TextWrapping="Wrap" Text="DateTime Last Modified" VerticalAlignment="Center" d:LayoutOverrides="Width" Grid.RowSpan="2" HorizontalAlignment="Center"/>
<Expander Header="Expander" d:LayoutOverrides="Width" Grid.ColumnSpan="3" Grid.Row="2">
<Grid>
<ScrollViewer Content="File Contents" Height="500"/>
</Grid>
</Expander>
</Grid>
</Border>

Set height and width of controls wihtin window size wpf

I have a following xaml file
<Window x:Class="NodeXL_Graph_Drawer.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns:controls="clr-namespace:Technewlogic.Samples.WpfModalDialog"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" DataContext="{Binding RelativeSource={RelativeSource Self}}"
Title="NodeXL Graph" xmlns:my="clr-namespace:Smrf.NodeXL.Visualization.Wpf;assembly=Smrf.NodeXL.Control.Wpf" Loaded="Window_Loaded">
<Grid>
<Grid x:Name="ModalDialogParent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="col1"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" >
<my:NodeXLControl Name="nodeXLControl1" HorizontalAlignment="Left" EdgeSelectedColor="Red" VertexSelectedColor="Red" ShowVertexToolTips="True" VertexClick="nodeXLControl1_VertexClick" SelectionChanged="nodeXLControl1_SelectionChanged" MouseMode="Select" MouseAlsoSelectsIncidentEdges="False" ContextMenuOpening="nodeXLControl1_ContextMenuOpening" GraphLaidOut="nodeXLControl1_GraphLaidOut">
</my:NodeXLControl>
</StackPanel>
<!--<ComboBox Height="23" Margin="39,12,119,0" Name="comboBox1" VerticalAlignment="Top" SelectionChanged="comboBox1_SelectionChanged" />-->
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<StackPanel Grid.Column="2">
<toolkit:DataGrid AutoGenerateColumns="True" Margin="0,62,0,0" Name="grdGraphDetails" ItemsSource="{Binding GraphDetail}" IsReadOnly="True"
HorizontalAlignment="Right" Width="109" MouseLeftButtonUp="grdGraphDetails_MouseLeftButtonUp"
SelectedValuePath="Key" Height="179" />
</StackPanel>
</Grid>
<controls:ModalDialog x:Name="ModalDialog"></controls:ModalDialog>
<controls:ModalDialog1 x:Name="ModalDialog1"></controls:ModalDialog1>
</Grid>
Here i have two controls NodeXlControl1 and Datagrid1 on page seprated by grid seprator. when window loads NodeXlControl1 does not come within the grid column width and height. i want nodexlcontrol1 should be shown with in the grid column width and height. and i if it goes beyond the limits of width and height of column, scroll bar should come.
If your my:NodeXLControl internally has some scroll viewer (like some ItemsControl or ScrollViewer based child) then simply wrapping my:NodeXLControl in a Grid would do the trick.
StackPanel expands to overflow the children. Grid expands to outer's container's availability of space.
<Grid>
<my:NodeXLControl ... />
Should do the trick.
But if you my:NodeXLControl has no scroll viewer in it then you would need to wrap it inside one and provide absolute width or height to it or wrap it inside a Grid for it to bound to its avilable space and show scrollbars accordingly.
e.g.
<Grid>
<ScrollViewer ...>
<my:NodeXLControl ...>

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.

Resources