Wanderer
Topic Author
Posts: 168
Joined: 08 May 2017, 18:36

Resizable TextBox inside grid problem.

25 Aug 2017, 18:16

How can I have proper resizable TextBox inside grid?

Explanation:
I have TextBox where is short word "empty" and when user open file, "empty" is replace by file path "D:\path\to\file". I add in to TextBox
<TextBlock 
	Text="{Binding ContainerItem_NameSourceFull}" 
	Width="{Binding ActualWidth, ElementName=StackPanelLeft_FileNames}"
	TextWrapping="NoWrap" 
	TextTrimming="CharacterEllipsis"
	/>
and if file path is very long i will see "D:\path\to\longfi...". TextBox is inside grid which is divided in to 4 cells with
Width="*"
. User can resize UI and this reveal more text in TextBox. Problem is when gui is resized back. Text inside TextBox is not resized back, that means grid cell is resized to full text or now revealed text. If this code
Width="{Binding ActualWidth, ElementName=StackPanelLeft_FileNames}"
is not here, TextBox resize grid cell to text inside TextBox, if text is more wide then grid cell.
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Resizable TextBox inside grid problem.

30 Aug 2017, 12:35

Could you please attach the whole xaml, or at least the part with all the containers wrapping the TextBox and StackPanelLeft_FileNames element?
Your TextBox size depends on the Width of StackPanelLeft_FileNames, so without knowing how that element is measured I cannot evaluate what is happening to the TextBox.

Thanks.
 
Wanderer
Topic Author
Posts: 168
Joined: 08 May 2017, 18:36

Re: Resizable TextBox inside grid problem.

30 Aug 2017, 15:38

Of course:
(btw. before your post I little change code, but problem is still here)
<UserControl
	x:Class="ContainerItem"
	x:Name="ContainerItemName"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	
	UseLayoutRounding="True"
	>
	<Grid x:Name="ContainerItemGrid">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="60"/>	<!-- SelectButton -->
            <ColumnDefinition Width="*"/>	<!-- LeftSide -->
            <ColumnDefinition Width="*"/>	<!-- Middle -->
            <ColumnDefinition Width="*"/>	<!-- RightSide -->
        </Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
				<RowDefinition  Height="80"/>
		</Grid.RowDefinitions>
		<Grid 
			Grid.Column="1" 
			x:Name="CIG_LeftSide"
			>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="60"/>
			</Grid.ColumnDefinitions>
			<StackPanel 
				x:Name="StackPanelLeft_FileNames" 
				Grid.Column="0" 
				Orientation="Vertical" 
				>
				<TextBlock 
					Text="{Binding ContainerItem_NameSourceFull}" 
					TextWrapping="NoWrap" 
					TextTrimming="CharacterEllipsis" 
					MaxWidth="{Binding ActualWidth, ElementName=StackPanelLeft_FileNames}"
				/>
				<TextBlock 
					Text="{Binding ContainerItem_NameSourceShort}" 
					TextWrapping="NoWrap" 
					TextTrimming="CharacterEllipsis" 
					MaxWidth="{Binding ActualWidth, ElementName=StackPanelLeft_FileNames}"
				/>
			</StackPanel>
			<StackPanel 
				Grid.Column="1" 
				Orientation="Vertical"
				>
				<Button x:Name="Button_Select_Source" Focusable="False" Click="m_func_button_SelelctSource" >
					<TextBlock Text="OPEN" />
				</Button>
				<TextBlock Text="{Binding ContainerItem_SizeSourceNumber}" />
				<TextBlock Text="{Binding ContainerItem_SizeSourceText}" />
			</StackPanel>
		</Grid>
		<!--  //////////////////////////////////////////////////////////////////////////////////////////// MIDLE -->
		code ...
		<!--  //////////////////////////////////////////////////////////////////////////////////////////// RIGHT SIDE -->
		code ...
	</Grid>
</UserControl>
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Resizable TextBox inside grid problem.

30 Aug 2017, 18:17

I tried your xaml inside a resizable window and text gets trimmed or not depending on the available space. You can add a background color to the panels placed in each column to see how available space is distributed. By the way, you don't need to bind Width nor MaxWidth properties of the TextBlock because the parent StackPanel is already assigning a maximum width and trimming works correctly.

Maybe I don't fully understand what is your problem or what you want to accomplish.
 
Wanderer
Topic Author
Posts: 168
Joined: 08 May 2017, 18:36

Re: Resizable TextBox inside grid problem.

30 Aug 2017, 21:02

Imagine you have some space for textBox which depends on GridCell. There is word "empty". User add file and "empty" is changed to "C:\Path\To\Some\Long\Data\".
1. If there is no Width or MaxWidth, and text is wider then GridCell, width of GridCell is changed to text.
2. If there is only Width GridCell is stuck only for first size or only if resize is wider then GridCell. That means if GridCell is 200px wide, it never be less. If GUI is resized and GridCell is resized 300px for width, it never go back to 200px or less if GUI is resized back or less size. That happens for textBlock with and without text.
3. If MaxWidth is used, GridCell can be resized to any size only if there is no text in TextBlock. If long text is added, long text is trimmed but as GridCell is resized from 200px to 400px and reveal part of long text or reveal full text, it can't back to 200px or less as revealed text. That means text cant be hidden back.
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Resizable TextBox inside grid problem.

31 Aug 2017, 17:48

The maximum available space for the TextBlock is specified by its containers, you don't have to set it explicitly if you want to have a resizable panel.

In your example, imagine you have a resizable Window that starts with 600px width. And the UserControl "ContainerItem" fills it completely.
That means that "ContainerItemGrid" will have the following column sizes: [Column 0: 60px] [Column 1: (600-60)/3 = 180px] [Column 2: (600-60)/3 = 180px] [Column 3: (600-60)/3 = 180px].
And "CIG_LeftSide" grid will haave the following column sizes: [Column 0: 180-60 = 120px] [Column 1: 60px].
It doesn't matter if the TextBlock doesn't have text, has a small text or a big text, it just will be trimmed depending if it fits in the space available in Column 0 of CIG_LeftSide (120px in this case).

If the whole Window is then resized to 720px width, the UserControl "ContainerItem" and its contents will be automatically resized as follows.
"ContainerItemGrid" column sizes : [Column 0: 60px] [Column 1: (720-60)/3 = 220px] [Column 2: (720-60)/3 = 220px] [Column 3: (720-60)/3 = 220px].
"CIG_LeftSide" grid column sizes: [Column 0: 220-60 = 160px] [Column 1: 60px].
TextBlock available size will be 160px.

So answering to your points:
1. Grid cell is not resized depending on its contents if you set the ColumnDefinition.Width as "*", that only occurs if you set it as "Auto".
2 and 3. Setting Width or MaxWidth of the TextBlock explicitly will limit its size, no matter what is the available space in the grid cell. So you don't want to do this if it needs to be resizable.
 
Wanderer
Topic Author
Posts: 168
Joined: 08 May 2017, 18:36

Re: Resizable TextBox inside grid problem.

31 Aug 2017, 20:59

I hope this video make it clear.
https://youtu.be/6yyC790X73I
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Resizable TextBox inside grid problem.

01 Sep 2017, 11:59

It is strange, what happens in time 0:20 is not what I expected and what I'm seeing in my tests.

Could you please use the following xaml as the View content instead of yours and tell me if trimming works fine? You can use the slider to resize the Grid, and TextBoxes to change TextBlock.Text values.
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Width="400" VerticalAlignment="Top" Margin="20">
        <Slider x:Name="width" Minimum="300" Maximum="1200" Value="600" Margin="5" IsMoveToPointEnabled="True"/>
        <TextBox Text="{Binding Text, ElementName=txtLong}" Margin="5"/>
        <TextBox Text="{Binding Text, ElementName=txtShort}" Margin="5"/>
    </StackPanel>
    <Grid Width="{Binding Value, ElementName=width}" Margin="20,150">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="Pink"/>
        <Grid Grid.Column="1" Background="Salmon">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Background="#20FF0000">
                <TextBlock x:Name="txtLong" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
                <TextBlock x:Name="txtShort" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
            </StackPanel>
            <Button Grid.Column="1" Content="Open" VerticalAlignment="Top" Margin="1,5"/>
        </Grid>
        <Grid Grid.Column="2" Background="LightYellow"/>
        <Grid Grid.Column="3" Background="LightGreen"/>
    </Grid>
</Grid>
If it works you can then remove the slider and the Grid.Width binding to use Window resize instead.
If it's still working, maybe you could start transforming it until you have the layout you want.
If at any point it starts to fail we can detect what is causing the Grid to grow enough to fit the TextBlock.

Thanks for your cooperation.
 
Wanderer
Topic Author
Posts: 168
Joined: 08 May 2017, 18:36

Re: Resizable TextBox inside grid problem.

01 Sep 2017, 13:09

If I remove slider and Grid.Width binding it is the same problem with TextBox. But I play with settings and this code is working as expected:
<UserControl
	x:Class="ContainerItem"
	x:Name="ContainerItemName"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	
	UseLayoutRounding="True"
	>
<Grid x:Name="ContainerItemGrid" >
	
    <Grid MaxWidth="{Binding ActualWidth, ElementName=ContainerItemGrid}" Margin="20,150">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Background="Pink"/>
        <Grid Grid.Column="1" Background="Salmon">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="60"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" Background="#20FF0000" x:Name="StackPanelLeft_FileNames">
                <TextBlock 
					x:Name="txtLong" 
					TextWrapping="NoWrap" 
					TextTrimming="CharacterEllipsis" 
					Text="{Binding ContainerItem_NameSourceFull}" 
					MaxWidth="{Binding ActualWidth, ElementName=StackPanelLeft_FileNames}" 
					/>
                <TextBlock x:Name="txtShort" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>
            </StackPanel>
            <Button Grid.Column="1" Content="Open" VerticalAlignment="Top" Margin="1,5" Click="m_func_button_SelelctSource" Focusable="False" />
        </Grid>
        <Grid Grid.Column="2" Background="LightYellow"/>
        <Grid Grid.Column="3" Background="LightGreen"/>
    </Grid>
</Grid>
</UserControl>
MaxWidth is need because if I add only Width, the grid is not resized back and if Width instead ActualWidth is used, grid get very long width out of ListBox view.
Also MaxWidth is needed for TextBox because if it is not here, after change text TextBox slightly change width.
This is how it working for me.

And thanks for inspiration to resolve my problem. But I think there is maybe a bug if TextBox and Grid is used without MaxWidth binding and TextBox is not resized back with text.

Who is online

Users browsing this forum: Semrush [Bot] and 74 guests