I have looked at several code snippets where people suggest that the AcceptsReturn property of a textbox in Silverlight will enable multiple lines.
My problem however is when I add a textbox with said property and explicity set the height or allow it to fill the container, the text sits vertically in the middle of the textbox.
<Grid x:Name="LayoutRoot" >
<TextBox TextWrapping="Wrap" Text="TextBox" AcceptsReturn="True"/>
</Grid>
I need the text to anchor to the top of the textbox.
Ensure there is not an implicit style for the text box which is overriding the default expected behavior in this case. IN my case I was using the Cosmopolitan Theme from Microsoft and it had an implicit style for TextBox elements that did not produce the proper behavior.
In the resources from that theme if you look at the DefaultTextBoxStyle in the CoreStyles.xaml file, at line 448 you will find the ScrollViewer with a VerticalAlignment set to Center. Adjusting this to top solved my problem.
Try this:
<Grid x:Name="LayoutRoot">
<TextBox VerticalAlignment="Stretch" VerticalContentAlignment="Top"
TextWrapping="Wrap" Text="TextBox" AcceptsReturn="True"/>
</Grid>
The text is at the top of the box, and the the box stretches to fill the whole page.
Related
I got a weird problem on my xaml, in a stackPanel.
My stackPanel contains a textbox, and a button.
This should be on the same line (if possible, depending on the text width).
The problem is :
if the stackPanel have Orientation="Vertical", the button will go to the line bellow the text.
if the stackPanel have Orientation="Horizontal" , the line will not doing any break line, so all the line will go out of my grid.
<StackPanel Name="spRemplir"
Grid.Row="2"
Grid.ColumnSpan="6"
Width="560"
Margin="5,5,5,5"
Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock FontWeight="Bold"
Text={Binding Text}
TextWrapping="Wrap"/>
<Button Name="btRemplir"
Margin="5,0,0,0"
Width="150"
Content="Remplir"/>
</StackPanel>
How can I obtain a stackPanel, that will break lines if necessary, and have a text and a button on the same line?
Update with Wrapanel thanks to Eli Arbel :
<toolkit:WrapPanel Name="spRemplir"
Grid.Row="2"
Grid.ColumnSpan="6"
Margin="5,5,5,5"
Width="560"
Orientation="Horizontal">
<TextBlock FontWeight="Bold"
Text={Binding Text}
TextWrapping="Wrap"/>
<Button Name="btRemplir"
Content="Remplir"/>
</toolkit:WrapPanel>
But, the button still on the next line, while there is enough space after the text on the same line.
Itried removing the Width on the panel, but then, there is no more wrapping...
I don't understand. Even if there is stackPanel on the same Grid, they should not disturb the wrap panel right?
Thank you.
You can try a WrapPanel from the Silverlight Toolkit. Note this panel will not allow you to stretch the items to the container width.
You should also look into removing the fixed Width of the panel.
Try using a Grid instead of a StackPanel. The problem with StackPanel is that they do not report up the Visual Tree that they are out of room. This is not a bug, it's just the way they are and it's appropriate when you need it. But I avoid them except on the innermost elements. But don't have StackPanels in StackPanels as you will lose TextWrapping/Scrolling and just have elements fall of the right or bottom of the page.
Second, make sure that your outer container is Set so that the width is Constrained. For example, in your layout root, give it one Column, and set the Width for * which means = "The available space, but not more"
Once you have your outer container constrained, then your TextBlock will wrap properly.
Greg
Consider using a WrapPanel instead stack panel: http://wpftutorial.net/WrapPanel.html
I have a page in my WP7 app consisting of a TextBox beside a ListPicker. In their default modes, they don't line up properly; the ListPicker has a different padding to the TextBox, and its height is also different.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<toolkit:ListPicker Width="170" ItemsSource="{Binding l}" Style="{StaticResource ListPickerStyle1}" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
Manually tweaking the ListPicker's template to fit in correctly here is tricky and error prone. For example, when its height is adjusted, the caption (i.e. the text of the selected item) is no longer in the centre of the component.
My app is currently failing MS app review because the components are not all the same height.
Is there an easy way for me to set the toolkit:ListPicker to have the same appearance as a TextBox?
The simplest solution will be to take a copy of the the default style and tweak that using Blend to be exactly how you want it to look. This will take a little trial and error to sort out.
You can then use the implicit styling rules to apply it to all ListPickers without having to explicitly set the style on each instance:
<Style x:Key="MyListPickerStyle
TargetType="toolkit:ListPicker>
.... your tweaks here
</Style>
<Style TargetType="toolkit:ListPicker"
BasedOn="{StaticResource MyListPickerStyle}" />
It may be easier to tweak the TextBox Style of course :)
I have a WPF page with quite a few objects. At the bottom of all these items, I have a label that needs to have textwrapping in the content. That answer is simple, with the use of a Textblock this should be a cinch. However, even though I use those items, I still can't get th e text to wrap. So I'm assuming that there must be other settings in the other objects that I need to check/modify. In pseudo code, my XAML looks like
<Page>
<Stackpanel vertical>
<Border>
<Stackpanel vertical>
<label></label>
<Stackpanel horizontal>
<label></label>
</stackpanel>
<label>
<textblock TextWrapping="Wrap">
</label>
</border>
</stackpanel>
</page>
What am I missing here? Should I be checking other elements? I have already made sure that none of the nesting elements have any height specified - they are all set to auto.
I'm going to go ahead and post this as an answer in case someone else gets stuck on this.
When you set the Width and Height properties of the TextBlock control, it will first horizontally increase in size to accommodate as much text as it can before wrapping the text (if the TextWrapping property is set to Wrap). Once it decides it needs to wrap the text, if the Height is set to Auto, the text box will resize vertically to accommodate the text (until it hits the bottom of whatever UI container you put it in). If you do not want the text box to resize past a certain point, you will need to set values for the MaxWidth and MaxHeight properties. This will force the TextBlock to wrap at a certain width.
With my XamlPadX, this wraps:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<Label>L1</Label>
<StackPanel Orientation="Horizontal">
<Label>L2</Label>
</StackPanel>
<Label>
<TextBlock TextWrapping="Wrap">
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
This text wraps.
</TextBlock>
</Label>
</StackPanel>
</StackPanel>
</Page>
So the problem must be somewhere else.
I'm trying to vertically center the content of a TextBox with the VerticalContentAlignment property but it seems to have no effect at all. The text stays at the top. Can anyone tell me how to do this?
Here's my code:
<TextBox Grid.Column="1"
Grid.Row="0"
Width="200"
Height="28"
VerticalAlignment="Center"
VerticalContentAlignment="Center" />
It is possible to make the TextBox center its text vertically. However, that does require you to reapply its ControlTemplate.
To do this:
Copy the Style and the ControlTemplate from the TextBox Styles and Templates page on MSDN to a suitable <UserControl.Resources> element. (This ControlTemplate is actually for a validation tooltip; the ControlTemplate we'll change is within the Style.)
Find the ScrollViewer element within the Style for the TextBox, and add a VerticalAlignment="Center" property to it.
Alternatively, you could add the property
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
to the ScrollViewer. This should allow you to set the vertical alignment of the contents of your TextBoxes using the VerticalContentAlignment property.
You can follow much the same approach if you wish to change the horizontal alignment of a TextBox's content as well.
The XAML code is correct, the following should be sufficient:
<TextBlock Text="Centered Text" VerticalAlignment="Center" />
Can you try that code outside your grid?
Check the attributes you defined on your Grid, this will probably cause the behaviour you have. Can you post the complete XAML code?
I'm presenting text in a wpf TextBlock control (.Net 3.5). The content of the textblock varies depending on what the user selects in a list box. The text wraps, so I don't need an horizontal scroll bar. However, there is often more text than the amount the window can display, so I need a vertical scroll bar.
As I started searching I quickly found that the answer is to wrap the TextBlock in a ScrollViewer. However, It Does Not Work (TM) and I'm hoping someone can help me work out why.
This is the structure of the UI code:
<Window x:Class=..>
<StackPanel>
<ListBox HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</StackPanel>
</Window>
When the user selects an item in the list box, some text associated with this item is presented in the TextBlock. I would have thought that the code as it stands should have been all that's required, but it never provides me with a scroll bar.
Searching and experimenting have given me two clues: the root of the problem might be related to me updating the content of the TextBlock dynamically, and that the TextBlock does not resize itself based on the new content. I found a posting that seemed relevant that said that by setting the Height of the TextBlock to its ActualHeight (after having changed its content), it would work. But it didn't (I can see no effect of this).
Second, if I set the height (during design time) of the ScrollViewer, then I do get a vertical scroll bar. For instance, if I set it to 300 in the xaml above, the result is almost good in that the window as first opened contains a TextBlock with a vertical scroll bar when (and only when) I need it. But if I make the window larger (resizing it with the mouse during runtime), the ScrollViewer does not exploit the new window size and instead keeps its height as per the xaml which of course won't do.
Hopefully, I've just overlooked something obvious..
Thanks!
Because your ScrollViewer is in a StackPanel it will be given as much vertical space as it needs to display it's content.
You would need to use a parent panel that restricts the vertical space, like DockPanel or Grid.
<DockPanel>
<ListBox DockPanel.Dock="Top" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Height="200"
SelectionChanged="listbox_changed" SelectionMode="Single">
</ListBox>
<Button DockPanel.Dock="Top" Click="Select_clicked">Select</Button>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Name="textblock" TextWrapping="Wrap"/>
</ScrollViewer>
</DockPanel>