Text box growing with data in WPF - wpf

From past 3-4 days i am trying to learn WPF.
As a sample xaml ,i tried to create a grid and place some controls in it in the form of textblocks and text boxes.
The problem i am facing is that when i keep on enter the texts in the text boxes ,then my text boxes width keep on increasing,which in turn will ruin my whole form.
Can anyone please help me fixing the issue.
Here is my sample XAML Code which consists of text boxes:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" FontSize="25" Margin="5 30 130 0"/>
<TextBox Grid.Row="2" FontSize="25" Grid.Column="1" Grid.ColumnSpan="2" Margin="5 30 130 0"/>
<TextBox Grid.Row="3" FontSize="25" Grid.Column="1" Margin="5 30 160 0"/>
<TextBox Grid.Row="5" FontSize="25" Grid.Column="1" Grid.ColumnSpan="2" Margin="5 30 130 0"/>
</Grid>
Please anyone help me with this regard.All sorts of help will be appreciated.

You can use AcceptsReturn and TextWrapping properties on TextBox to allow newlines and allow text to wrap when the text size exceeds the width of the TextBox respectively
e.g.
<TextBox TextWrapping="Wrap" AcceptsReturn="true" />
AcceptsReturn ensures that the user can press return instead of CTRL + Return to put a newline in the text box. Otherwise the textbox loses focus and the default button is pressed as per the standard behaviour. (I think if there is no default button a newline is inserted anyway)

Are you sure the TextBox is getting bigger or is it just filling up with text?
For test put a border brush on it and HorizontalContentAlignment="Stretch".
If you want to constrain the width then set width otherwise it is going to use all available space.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Text="text" BorderBrush="Red" BorderThickness="2" HorizontalContentAlignment="Stretch" />
</Grid>

Related

Fixed header and footer outside scrollview

I have a grid that has a header, content and a footer:
<Grid.RowDefinitions>
<RowDefinition Height="55"/> <!--HEADER-->
<RowDefinition Height="*"/> <!--CONTENT-->
<RowDefinition Height="55"/> <!--FOOTER-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3"></Rectangle>
<ScrollViewer Grid.Row="1" Grid.Column="1" >
<Grid>
...
</Grid>
</ScrollViewer>
<Rectangle Grid.Row="3" Grid.ColumnSpan="3"></Rectangle>
</Grid>
I want to have it so that the header and footer are fixed and the content is scrollable. Within the second nested grid there is a lot of content, hence the scroll view. When I run the application, the scrollviewer still scrolls with the header and footer! I can't figure out what I'm doing wrong, is there a better layout I should be using?
Please let me know! I'd rather not use C#.
Thanks!
Unless you are doing something strange either around the XAML you have posted or inside the nested Grid object, your XAML works as you intended.
I very slightly modified your XAML, just to visibly show your header and footer, and to add some content to your inner grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="55"/><!--HEADER-->
<RowDefinition Height="*"/><!--CONTENT-->
<RowDefinition Height="55"/><!--FOOTER-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3" Height="55" Fill="Red"/>
<ScrollViewer Grid.Row="1" Grid.Column="1" >
<Grid >
<ListBox ItemsSource="{Binding Path=myItems, FallbackValue='123456789abcdefghijklmno'}"/>
</Grid>
</ScrollViewer>
<Rectangle Grid.Row="3" Grid.ColumnSpan="3" Height="55" Fill="Blue"/>
</Grid>
Shown below is the result. Your ScrollViewer scrolls just fine while leaving the header and footer in place.
I'm not sure what else you have going on in your window, but this is the only XAML in the window I used for testing, and it works perfectly. As a note, I limited the height of the window to '400' so the inner grid did not continue to grow since it's height was set to *. You can achieve the same result by setting a maximum height on your outer Grid.

Unexpected auto grid column width

the code below is a small snippet of a big wpf Window I am using in my Project. It produces the linked wpf Window.
I am wondering why my last grid column is so wide. I am expecting that the width of the last column depends on the width of the button, because the column width is set to "Auto".
If I remove the columnspan of the StackPanel the column width will be correct but then the CheckBoxes are not aligned to right side.
I hope you have understood my problem. My aim is, that the last column is as small as possible, the checkboxes are at the right side and the rest stays at it is.
Because this snippet is part of a bigger wpf window I cannot remove any grid rows or columns.
Thank you very much for your help.
Best regards.
WPF Window
<Window x:Class="TestProject.Window1"
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"
d:DesignHeight="152.429" d:DesignWidth="403">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Image Grid.Column="0"
Grid.Row="2"/>
<StackPanel Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="2">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
You can put a grid inside another grid.
Here is the code that will help you achieve your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Grid Name="GridInsideAGrid"
Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" />
<StackPanel Grid.Column="1">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
</Grid>

Bottom Border of Mahapps Metro TextBox not visible when placed in specific Row

I'm developing a resolution independent application in WPF. I am using mahapps metro controls in my application. I have a grid which is divided into rows and columns in * and 4 TextBoxes are occupying specific rows and columns in that grid.
The problem is that the TextBox is not occupying the row as in the bottom border of
Textbox is not visible but when I change style to x:Null the problem disappears. Is this a problem specific to metro TextBox?. I tried VerticalAlignment = "Stretch" but this does'nt help.
Also the bottom part is visible in higher resolution like 1440 X 900 but not in 1366 X 768. What am I missing?
<Grid Background="Azure">
<Grid.RowDefinitions>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="18.4210*"/>
<RowDefinition Height="4.8157*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0"
Grid.RowSpan="12"
Grid.Column="0"
Grid.ColumnSpan="3">
<Border BorderBrush="Black"
BorderThickness="1"/>
</Grid>
<TextBox x:Name="txt_1"
Controls:TextBoxHelper.Watermark="Textbox 1"
Style="{x:Null}"
Grid.Row="2"
Grid.Column="1"/>
<TextBox x:Name="txt_2"
Controls:TextBoxHelper.Watermark="Textbox 2"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="4"
Grid.Column="1"/>
<TextBox x:Name="txt_3"
Controls:TextBoxHelper.Watermark="Textbox 3"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="6"
Grid.Column="1"/>
<TextBox x:Name="txt_4"
Controls:TextBoxHelper.Watermark="Textbox 4"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
Grid.Row="8"
Grid.Column="1"/>
<Grid Grid.Row="10"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32.5*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="32.5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_add"
Content="Add"
Grid.Row="8"
Grid.Column="1"
Click="btn_add_Click"/>
</Grid>
<StackPanel Background="#C0F368"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3">
</Grid>`

How to have TextBlocks with same scale?

I have a problem trying to adjust the size of TextBlocks. I have a grid with 3 columns and 6 rows, in the second column I have a TextBlock in each row, each TextBlock text has different length so when I resize the window some texts looks larger or smaller than the others.
Is there a way to have the same scale in each TextBlock when I resize the window? I would like all the TextBlock look the same size when I resize the window.
This is the code I have:
<Grid Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="1">
<TextBlock x:Name="txt1" Text="Some long text 12345" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="1">
<TextBlock x:Name="txt2" Text="Some longer text 1234567890" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="2">
<TextBlock x:Name="txt3" Text="Text3" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="3">
<TextBlock x:Name="txt4" Text="Text4" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="4">
<TextBlock x:Name="txt5" Text="Text5" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="5">
<TextBlock x:Name="txt6" Text="Text6" FontSize="20" />
</Viewbox>
Thanks in advance,
Alberto
Place the TextBlock directly in the gird, no need of viewBox
Set instead of *
There is one more option you can set in ColumnDefination or RowDefination "SharedSizeGroup"
the rows or columns with same name will share the same height or width

WPF: avoid redrawing of groupbox to fit content

I'm using a page with a grid with 3 rows where every row contains a groupbox. The groupboxes also contain different grids with different content.
I would like to have all of my groupboxes to fit the same width. Initially that's the case. But when the content of the first group box is updated from code behind, the group box gets redrawn for a very short moment (width is smaller), but a second later it again fits to the width.
Initially it is: "not connected" which changes to "connected", so width is smaller.
The Width of my window is set to maximize, I don't want to set fix width and height for the page and the grids. Is there a way I can only update the content, without the box trying to fit to the content?
Example ( 2 rows):
<Grid Grid.IsSharedSizeScope="True" Name="globalGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="globalCol"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
</Grid.RowDefinitions>
<GroupBox Header="Connection status"
Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Name="Connected"
Style="{StaticResource iconConnectStyle}"
DataContext="{Binding DeviceConnection}"
Grid.Row="0" Grid.Column="0" />
<TextBlock Text="device 1:"
Grid.Row="0" Grid.Column="1"
Style="{StaticResource statusText}"/>
<TextBlock Name="dev1" Grid.Row="0" Grid.Column="2"
Style="{StaticResource statusText}" />
</Grid>
</GroupBox>
<GroupBox Header="processing status"
Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock x:Name="processState" Style="{StaticResource statusText}"/>
<ProgressBar x:Name="progressState"/>
</StackPanel>
</GroupBox>
</Grid>
I'm now using a UniformGrid, that solved the problem...

Resources