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?
Related
What is the difference between:
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
in a textbox in WPF?
Sample example:
<TextBox HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Height="100"
TextWrapping="Wrap"
AcceptsReturn="True"
></TextBox>
HorizontalAlignment and VerticalAlignment determine the alignment of the control itself with respect to its parent control.
HorizontalContentAlignment and VerticalContentAlignment determine the controls content alignment with respect to the control.
For example consider a common Button control
<Button x:Name="aButton" Width="50" Height="25" />
Here you somehow have to specify how this control is aligned within it's parent control. A suitable parent control could be a StackPanel, a Grid, a WrapPanel etc.
For both Horizontal- and VerticalAlignment you can chose between the options Left, Right, Center and Stretch. The first three options respect the buttons width and height whereas the last option tries to stretch the button into the direction specified ignoring the set width or height:
The code
<StackPanel Orientation="Horizontal">
<Button x:Name="aButton" Width="50" Height="25" HorizontalAlignment="Right" />
</StackPanel>
for example would place the Button inside the StackPanel and align it inside at the left.
HorizontalContentAlignment and VerticalContentAlignment aligns the content of the control. The content is special UIControl that is build into the control which you can simply exploit by taking a look into the ControlTemplate of a ContentControl. Note that we are talking especially about ContenControls which are acting as a container that is capable of taking exactly one object to 'carry' inside and display - its content.
So HorizontalContentAlignment and VerticalContentAlignment are determining the alignment of this content with respect to its container. In the case of a initially created Button the buttons content is its caption and with the two properties in question you are aligning this caption inside the Buttons borders which is again either one of these: Left, Right, Center, Stretch.
HorizontalAlignment will align your textbox in relation to its containing parent whereas HorizontalContentAlignment will align the text of your textbox in relation to itself.
HorizontalContentAlignment and VerticalContentAlignment are used with Content Controls which apply these to its content. For example in the following code the Content Control Button will align its content(which is a string in this case and can be any arbitrary object) to center.
HorizontalAlignment and VerticalAlignment are used with child elements when these are inside a Panel. Panel will arrange its children based on these properties of child elements.
In the following code the Panel (StackPanel) will align its child (Button) to right.
<StackPanel>
<Button Content="OK"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Right" VerticalAlignment="Top" />
</StackPanel>
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.
I'm trying to style a TabItem Header, using a path to define the shape of the header.
I'm stuck in a problem that I can't seem to resolve :
If I set the path Stretch property to "None", it won't scale if the text in my TabItem Header is long.
If I set the path Stretch property to "Fill", it will stretch so much that each TabItem Header will be the same width as the TabControl - which mean only one very wide TabItem Header per line...
Do you know a way to stretch the path to the layout (depending on the TabItemHeader Content), but not more?
I would be very pleased if somebody can help me on this... it's been an annoying while I'm looking for a solution.
Thank you :-)
It's hard when you don't add any sample code but say that your HeaderTemplate looks like below then you can bind the Width of the Path to the ActualWidth of the TextBlock.
<TabItem.HeaderTemplate>
<DataTemplate>
<Border x:Name="grid">
<Grid>
<Path Data="..."
Stretch="Fill"
Width="{Binding ElementName=grid, Path=ActualWidth}" />
<TextBlock Name="textBlock"
Margin="4"
FontSize="15"
Text="{Binding}"/>
</Grid>
</Border>
</DataTemplate>
</TabItem.HeaderTemplate>
But be aware of rendering performance! Binding to ActualWidth and ActualHeight will result in binding errors as long as the UI hasn't been rendered enterly. And binding errors are expensive...The best way to avoid this, is to set up the binding in code when SizeChanged is called. That's the first moment after measuring and sizing has been finished.
The following code
<StackPanel Orientation="Horizontal">
<Image Source="test.jpg"/>
<Image Source="test2.jpg"/>
<TextBlock Text="TeStBlock"/>
</StackPanel>
If I am setting the visibility of the contents of the StackPanel in the codebehind and lets say I set the visibility of the Second image to collapsed. I notice that the TextBlock moves to where the Image used to be.
How can I keep the alignment and turn the visibility on or off?
Use Opacity="0" instead.
I have a applied one of the Silverlight Toolkit themes to my XAML page, and now for some reason my Border objects don't show up. Is this by design? I've made sure to explicitly state a BorderBrush color that should contrast the theme background, but this does not fix the issue.
In case it helps, the theme I'm using is the BureauBlack theme from the Silverlight Toolkit.
And here is a code snippet of one of my Borders.
<Border VerticalAlignment="Top" Grid.Column="0" Grid.Row="2" Grid.RowSpan="2" BorderBrush="Orange" CornerRadius="10" Margin="0" Height="300">
<StackPanel>
<TextBlock Text="Status Panel" FontSize="20" TextAlignment="Center" />
...
</StackPanel>
</Border>
It looks like when a theme is loaded it loads its own default set of values for most object properties. In this case, the BorderThickness property of the border object defaults to 0. As a result you don't see it.
By explicitly giving the BorderThickness property a value (non-zero ofcourse), I got my border to show up.
In addition, I can recommend Silverlight Spy tool.
One of the feature of Silverlight Spy is to provide a tree of all controls, to display all their properties and to provide an ability to dynamically change them. It greatly decrease time for such problem resolving.
I've used it several times in cases like your.