I am trying to apply rounded corners to a Stackpanel that is located inside a grid cell. I'm using a tag with CornerRadius. Instead of having the border surround the stackpanel, it instead stretches to surround the parent grid cell. Like this:
I use the following XAML:
<Border Grid.Row="0" Grid.Column="1" BorderBrush="#FF252A30" CornerRadius="5,5,5,5" BorderThickness="2,2,2,2">
<StackPanel Grid.Row="0" Grid.Column="1" x:Name="stackpanelContactlist" Height="336" Margin="0,113,43,113" Background="#FF252A30" d:LayoutOverrides="Width">
Content of Stackpanel
</StackPanel></Border></Grid>
I'm quite new to WPF, so I'm betting it's something simple - Anyone have any suggestions on how to fix this, so the rounded borded gets applied to the child stackpanel instead of the parent grid cell?
Thanks on advance.
Just move the margin attribute (Margin="0,113,43,113") from StackPanel to the border.
Also you can remove Grid.Row="0" Grid.Column="1" from the stack panel as these are not needed there.
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
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'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 have some wpf gridviews(presenting only two here)
<igDP:XamDataGrid
x:Name="dgSummary"
GroupByAreaLocation="None"
ScrollingMode="Immediate"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
DataSource="{Binding Path= SummaryData}"
Grid.Row="1"
Grid.Column="0"
Visibility="Hidden"
>
<igDP:XamDataGrid
x:Name="dgEquity"
GroupByAreaLocation="None"
ScrollingMode="Immediate"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
DataSource="{Binding Path= EquityHoldingsData}"
Grid.Row="3"
Grid.Column="0"
>
What I intend to do is that, I want to set the visibility property of the first grid to Hidden and thereby want to display only he second grid. It does happen so. But the problem is that, the area occupied by the first grid is present. I want to make the second grid to occupy the first grid's position when the visibility is set to hidden or collapsible.
How to do this?
Also thee are other grids. So say if I make the visibility of 2nd , 5th grid to hidden, then the other grids should occupy their areas.
I am using infragistics control.
Got it.... Visibility="Collapsed"
You can set both control's Grid.Row and Grid.Column value to same to occupy both in same position then make hidden one.
Since the canvas requires a Top/Left for placement, if you want to center something, is adding a grid at the proper Canvas.Top with HorizontalAlignment="Center" the best way to do it, or is there a better way?
This snip is a 150X300 canvas, with some content centered in a grid ....
<Canvas Width="150" Height="300">
<Grid Canvas.Top="75" Width="106" HorizontalAlignment="Center">
{whatever you want centered}
</Grid>
</Canvas>
Guy's solution works, but you may have to tweak z-order and visibility if you're juggling hit testing.
Another alternative is having the Grid inside the Canvas (as you've specified in your XAML) with the Height/Width set to (or bound to) the Height/Width of the Canvas. Then setting HorizontalAlignment/VerticalAlignment to Center for the contents of your Grid.
I'm not sure if this will meet your exact requirement, but if you put both the canvas and the content inside a grid as peers, it will get you a centered result:
<Grid>
<Canvas Width="150" Height="300"/>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="106" Content="Click"/>
</Grid>