Stop WPF TextBox from growing - wpf

I have spent two hours researching how to avoid that my WPF TextBox Control grows when a long text has been typed in, but I have not been able to do it, even I have read some answers about it like these ones:
stopping-wpf-textbox-from-growing-with-text
wpf-allow-textbox-to-be-resized-but-not-to-grow-on-user-input
wpf-how-to-stop-textbox-from-autosizing
My code is the following:
<Grid>
<TextBox Margin="6,6,8,28" Name="textBox1" AcceptsTab="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" AcceptsReturn="True"/>
<CheckBox Content="Case sensitive" HorizontalAlignment="Left" Margin="7,0,0,2" Name="checkBox1" Height="16" VerticalAlignment="Bottom" />
</Grid>
One thing that I tried was:
MaxWidth={Binding ElementName=MyGrid, Path=ActualWidth}
But it did not work for me.
I also tried to add the following property to the Grid:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Or
<Border x:Name="b" Grid.Column="1"/>
<TextBox Width="{Binding ActualWidth, ElementName=b}" ....... />
But it did not work either.
I need my control to grow when the user stretches the window, but not to when a long text is inserted.
Do you have a different answer for this problem that I might try?
UPDATE!
I have noticed something very strange: If I stretch manually the window, the textbox stops growing when a long text is inserted. That's fine. But I need to achieve this without having to stretch the window every time I run the program

Remove TextBox border and put it into ScrollViewer.

Try to do next:
<ScrollViewer MaxHeight={Binding ElementName=MyGrid, Path=ActualWidth} BorderThickness="0">
<TextBox Margin="6,6,8,28" Name="textBox1" AcceptsTab="True" TextWrapping="Wrap" AcceptsReturn="True"/>
</ScrollViewer>

Related

What does controls:TextBoxHelper.IsWaitingForData do?

I have a small WPF application that is using mahapp.metro for styling. There are 7 textboxes in the window with code similar to the examples below. When I run the application, it takes a lot of cpu, more than 90% if possible. When I deleted the controls:TextBoxHelper.IsWaitingForData="True", cpu usage dropped to almost 0% and I have not been able to find any issues. What does the TextBoxHelper.IsWaitingForData really mean?
<Canvas Grid.Column="0" Grid.Row="1">
<TextBox x:Name="SecurityStatusTextBox" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" IsReadOnly="True" Text="{Binding SelectedSecurityStatus, Mode=OneWay}"
Margin="50,50,0,0" Height="50" Width="250" FontSize="16"
controls:TextBoxHelper.ClearTextButton="True"
controls:TextBoxHelper.IsWaitingForData="True"
controls:TextBoxHelper.UseFloatingWatermark="True"
controls:TextBoxHelper.Watermark="{x:Static properties:Resources.SecurityStatus}"/>
<TextBox x:Name="BagTypeTextBox" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" IsReadOnly="True" Text="{Binding SelectedBagType, Mode=OneWay}"
Margin="325,50,0,0" Height="50" Width="250" FontSize="16"
controls:TextBoxHelper.ClearTextButton="True"
controls:TextBoxHelper.IsWaitingForData="True"
controls:TextBoxHelper.UseFloatingWatermark="True"
controls:TextBoxHelper.Watermark="{x:Static properties:Resources.BagType}"/>
</Canvas>
When the IsWaitingForData property is set to true an Effect is applied to the border of the TextBox and animation is applied to the Opacity property: https://github.com/MahApps/MahApps.Metro/blob/8a87a1b6ee7376e22930e465e8f3e85f4c5a73bc/src/MahApps.Metro/MahApps.Metro/Styles/Controls.TextBox.xaml
If you pay attention you will see that the TextBox gets a slight shadow that fades in and out when the IsWaitingForData property is set to true.
If this causes any issues for you should probably just set this property back to false.
You may also want to report the issue at GitHub: https://github.com/MahApps/MahApps.Metro/issues

My rowSpan doesn't take 2 lines

I got a weird problem with the rowSpan property of a grid.
I got a text that will take more than one line, so I told his stack spanel, RowSpan="2", so the text can be on multiple line, using Wrapping to, like this :
<StackPanel Grid.Row="0"
Grid.RowSpan="2"
Orientation="Horizontal">
<TextBlock x:Name="tbConfirm"
Text={Binding TextConfirm}
HorizontalAlignment="Center"
TextWrapping="Wrap"
VerticalAlignment="Center"
Grid.RowSpan="2"
FontSize="12">
</TextBlock>
</StackPanel>
The property TextConfirm contains a text that should take two lines (I tried with the text without binding to see if it fills.
But, despite my RowSpan and my TextWrapping, it still on one line, and don't understand why.
When I make a column span, it will take the number of column define, but why row span doesn't work?
There is in the Grid, 5 column(width auto) and 5 row(height auto) define.
If I want to have one textblock, one textbox, and another one textblock.
How can I tell to go in the new line automatically?
Undefined width for the two textblocks, and define width for the textbox.
This is just an example, I don't wrote it at the moment.
<StackPanel Grid.Row="0"
Grid.RowSpan="2"
Orientation="Horizontal">
<TextBlock x:Name="tbConfirm"
Text={Binding TextConfirm}
HorizontalAlignment="Center"
TextWrapping="Wrap"
VerticalAlignment="Center"
Grid.RowSpan="2"
FontSize="12">
</TextBlock>
<textBox width ="200"/>
<TextBlock x:Name="tbConfirm2"
Text={Binding TextConfirm2}
HorizontalAlignment="Center"
TextWrapping="Wrap"
VerticalAlignment="Center"
Grid.RowSpan="2"
FontSize="12">
</TextBlock>
</StackPanel>
Will this, go automatically at the new line if necessary? Or do I need to define lines and colums in the xaml?
Thank you.
I'm not sure if i understand the question correctly but to get the text wrapping you don't need to span accross multiple rows. From what i've read you have set the column width to auto so it will let the TextBlock "grow" freely. If you want to get the wrapping working you should define a fixed width either on the column or on the TextBlock itself (and keep the TextWrapping="Wrap").
try binding the width of the textblock to that of the parent as you wont want it to exceed that
<TextBlock x:Name="tbConfirm"
Text="asasddadsa adassdasd asdasdasdsa asdasdssd asdasdasjdahsjakdhksajdhjsaalskasj skjdsajkdhajhasaskjhdsahsakdasjdhsajdhasjdhkjsad"
HorizontalAlignment="Center"
Foreground="Black"
Width="{Binding ActualWidth, ElementName=stackPanelParent}"
TextWrapping="Wrap"
VerticalAlignment="Center"
FontSize="12">
</TextBlock>
I gave my own content to test. In case it overflows let me know.

WP7 An Image over the full display

I am developing an application where i want to browse images like native WindowsPhone form.
I have used Pivot control. Everything works, but there is one unwanted thing. The image does not fill all display area. There is a gap on the top of page. I have set margin and padding everywhere where it is possible. And the result is still the same. :(
Here is my XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid
x:Name="LayoutRoot"
Background="Transparent"
Margin="0">
<toolkit:PerformanceProgressBar
VerticalAlignment="Top"
HorizontalAlignment="Left"
IsIndeterminate="{Binding IsBusy}"
Visibility="{Binding IsBusy, Converter={StaticResource BoolToVisibilityConverter}}"
/>
<controls:Pivot
x:Name="PhotoPivot"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
IsHitTestVisible="True"
ItemsSource="{Binding Photos}"
Margin="0"
Padding="0"
>
<controls:Pivot.HeaderTemplate>
<DataTemplate/>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate >
<controls:PivotItem
x:Name="PhotoPivotItem"
Margin="0"
>
<Image
x:Name="PhotoPicture"
Source="{Binding}"
Stretch="Uniform"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0"
/>
</controls:PivotItem>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
</Grid>
Are you talking about the system tray?
To remove the system tray use the following code:
shell:SystemTray.IsVisible="False"
Update:
I'm not real sure why that extra space is there.
I created a simplified version of your example and the only thing I could think of is to use negative margins. There is probably a better solution that I am just overlooking, but for now you can just use the following:
<controls:PivotItem x:Name="PhotoPivotItem" Margin="0,-10,0,0">
Although, from your posted image, it looks as if you have a bigger gap than I did, so you might need to decrease the margin.

How to add a border to the Text inside a TextBlock in WPF?

I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...

WPF: Aligning the base line of a Label and its TextBox

Let's say I have a simple TextBox next to a Label:
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Margin="3">MyLabel</Label>
<TextBox Margin="3" Width="100">MyText</TextBox>
</StackPanel>
...
</StackPanel>
This yields the following result:
As you can see, the base lines of MyLabel and MyText are not aligned, which looks ugly. Of course, I could start playing around with the margins until they match up, but since this is such a common requirement I'm sure that WPF provides a much easier and more elegant solution, which I just haven't found yet...
This behaviour is, I think, caused by the fact that the TextBox defaults to a vertical alignment of Stretch, which causes it to fill the available space and have the extra couple of pixels under the text. If you use this instead:
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label >MyLabel</Label>
<TextBox VerticalAlignment="Center" Width="100">MyText</TextBox>
</StackPanel>
</StackPanel>
... you should see a cleaner result.
What do you think?
<StackPanel Orientation="Horizontal">
<Label Margin="3" VerticalContentAlignment="Center">MyLabel</Label>
<TextBox Margin="3" VerticalContentAlignment="Center" Width="100">MyText</TextBox>
</StackPanel>
I achieved that look in Kaxaml with:
<StackPanel Orientation="Horizontal">
<Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
<TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>
I know that this is an old answer, but for here's an example for those who seek another way, where you don't need to rely on a fixed textbox width:
Instead of StackPanel, use a DockPanel and .Dock.
This proves to be very handy when used inside a Grid.
<DockPanel Grid.Column="2" Grid.Row="2">
<Label Content="SomeTitle:" DockPanel.Dock="Left"></Label>
<TextBox x:Name="SomeValueTextBox" VerticalAlignment="Center" DockPanel.Dock="Right"></TextBox>
</DockPanel>
This question is not as trivial as it looks and the accepted answers lacks details. If you try custom heights with the controls, you will see issues.
First, this is the correct implementation as answered by User7116.
<StackPanel Orientation="Horizontal">
<Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
<TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>
The tricky part is that there two level of vertical alignments here so understand how the alignments works.
When we specify alignment for a control, we are telling it how to position itself in the parent container (See documentation). So when we specify VerticalAlignment="Center"> to the TextBox we are telling it that this TextBox should appear vertically centered in parent stackpanel.
Now the actual text inside that TextBox could also use vertical alignment within that TextBox! This is the 2nd level and actually quite tricky and is answered here.
If you experiment with setting the Label's height above to say 50 as well, you will see they will not align again. This is because Label is now taking larger area and its text inside that area is not vertical aligned so it doesn't look aligned again.
The code for above is:
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Label Margin="3" VerticalAlignment="Center" Height="50">MyLabel</Label>
<TextBox Margin="3" VerticalAlignment="Center" Width="50" Height="50">MyText</TextBox>
</StackPanel>
Luckily when control height is default (like label control), it's just tall enough to contain the text so the inside alignment doesn't matter. But it comes into play if someone is setting custom heights for these controls and its better to understand how this works.

Resources