I have two controls in a StackPanel; one is a RadChart and the other one is RadPanelBar. It shows 100% width for RadChart but it is not showing 100% width for the RadPanelBar.
I am using the following code. Can someone tell what could be the issue, why it does not show 100% width for RadPanelBar
<StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">
<telerikChart:RadChart x:Name="radChart" Margin="8">
<telerikChart:RadChart.SeriesMappings>
<telerik:SeriesMapping LegendLabel="Results">
<telerik:SeriesMapping.ItemMappings>
<telerik:ItemMapping FieldName="Score" DataPointMember="YValue"/>
</telerik:SeriesMapping.ItemMappings>
</telerik:SeriesMapping>
</telerikChart:RadChart.SeriesMappings>
</telerikChart:RadChart>-->
<telerik:RadPanelBar x:Name="radPanelBar"
HorizontalAlignment="Center" VerticalAlignment="Top"
ItemTemplate="{StaticResource PanelBarHeaderTemplate}">
</telerik:RadPanelBar>
</StackPanel>
Change from HorizontalAlignment and VerticalAlignment to Stretch might work; please try.
Related
Question: The following XAML is not hotizontally aligning the CheckBox to center. Setting HorizontalAlignment="Center" as StackPanel's attribute did not make any difference, either. How can we align it to center?
NOTE: I have uploaded a simple test app sample here if anyone wants to test it. This link will expire in 30 days from today July 21, 2021.
<StackPanel>
<Button x:Name="btnTest" Content="Test" Click="btnTest_Click"/>
<Popup Name="MyPopup" Placement="Mouse">
<StackPanel Background="Bisque">
<Button Click="Hide_Click" Margin="10">Hide Popup</Button>
<CheckBox x:Name="chkWebSpeechDefault" HorizontalAlignment="Center">
<CheckBox.RenderTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</CheckBox.RenderTransform>
<TextBlock Text="Set default" FontSize="20"/>
</CheckBox>
</StackPanel>
</Popup>
</StackPanel>
Code Behind [Not specifically relevant to the question]:
private void btnTest_Click(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = true;
}
Display of the above XAML:
As you can noticed the checkbox is not horizontally aligned to center.
UPDATE
I removed the TextBlock and added Content="Set default" attribute to CheckBox. But it still is aligned to the left. I would like it to be aligned as shown below:
You use a RenderTransform in the Popup for the CheckBox to scale it to half its size.
<CheckBox x:Name="chkWebSpeechDefault" Content="Set default" HorizontalAlignment="Center">
<CheckBox.RenderTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</CheckBox.RenderTransform>
</CheckBox>
Render transformations are applied before rendering, but after the layout phase (Measure and Arrange). This means that the originally scaled CheckBox (which spans almost the full width of the popup) will in fact be aligned horizontally, but it is barely visible. After that, the CheckBox will be transformed (only for rendering), but its position and size in the layout is still the same as the original, only the scaled rendered image is put in this imaginary bounding box at the top left. That is why it appears not to be centered. You can experiment with this by assigning a large width, e.g. 500, to the Popup, then you will see the centering.
Now, the solution to the issue is to use a different transformation, a LayoutTransform.
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</CheckBox.LayoutTransform>
This transformation is applied before the Measure and Arrange steps, so the layout calculation will consider the real size after scaling and the horizontal alignment is applied to the scaled control.
The black line at the bottom using LayoutTransform seems to be a rendering artifact.
<CheckBox x:Name="chkWebSpeechDefault" Content="Set default" HorizontalAlignment="Center" UseLayoutRounding="True">
Enabling layout rounding by setting UseLayoutRounding to true solves the issue.
There are a few related posts on these kind of issues, SnapsToDevicePixels does not work for me.
I'm trying to figure out how to make my ContentControl to correctly scroll Horizontally (Vertically its fine at the moment). By correctly i mean i would like to see the content to stretch (expand infinitely) while having minimum sizes to which a scrollbar would appear in order for the content not to overflow behind the ContentControl's area, so here's a quick introduction:
The main window is structured in this way:
Grid (2 columns of .3* and .7*)
Border
Grid (7 rows, one set to * where ContentControl is)
ScrollViewer with StackPanel (purely for test) wrapping a ContentControl that has Auto Width
ContentControl's Template:
Grid (Width set to UserControl's ActualWidth, 6 rows with one set to Auto where ItemsControl go
ItemsControl that describes an ItemTemplate of a type DataTemplate which contains a Grid inside of which i have a DataGrid
The actual problem is that the ContentControl grows as you resize the window, but does not shrink with window resize.
Main View XAML (truncated for clarity):
<ScrollViewer Grid.Row="5" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ContentControl Grid.Row="5" Background="Transparent" Focusable="False" Margin="0,5,0,0"
Content="{Binding CurrentSection}" ContentTemplateSelector="{StaticResource templateSelector}/>
</ScrollViewer>
Tempate XAML (truncated for clarity):
<Grid>
...
<ItemsControl Grid.Row="4" ItemsSource="{Binding Data.QualifyingDistributionsDividends}" x:Name="QualifyingItemsControl">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="DTLayoutGrid">
...
<Grid Grid.Row="1" x:Name="DataLayout" Width="{Binding ElementName=DTLayoutGrid, Path=ActualWidth}" HorizontalAlignment="Stretch">
...
<DataGrid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="8" HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Payments}" Style="{StaticResource DataGridStyle}" CellStyle="{StaticResource DataGridNormalCellStyle}">
</DataGrid>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
So what happens? Datagrid assumes width of the entire DataTemplate (well its underlying controls that are set to be DataTemplates size, then * column assumes all empty space. When you try to resize the entire window that holds this code it will grow correctly, expanding the * column but it seems shrinking is not "registered" and it keeps the size you expanded it to, applies a scrollbar over that and forgets about it.
What i've tried so far was to set widths for ItemsControl, its underlying parents like Grid etc, also setting size to ContentControl, StackPanel, ScrollViewer and parent Grid of that.
I've also tried using scrollviewers directly on the Datagrid which produces an epileptic "1 million resizes a second" scenario. I've also played around with HorizontalAlignments
Under certain situations i DID managed to get the horizontal scrollbar to appear correctly but unfortunately that makes my DataGrid's * column to assume Auto Width rather then Star so DataGrid starts having an empty area to the right (unacceptable unfortunately...)
I understand that in order for horizontal scrollbar to work the parent or child of the scrollviewer needs Width set, i guess i can't work out where exactly do i need to restrict it. DataGrids NEED to infinitely expand with the main window while having first column fill all the available space.
Do let me now if you need more information on this and I will gladly answer.
It seems to me that this is just another case of the dreaded StackPanel layout problem. This problem comes up again and again and I confess that I had the very same problem when I started learning WPF. The StackPanel does not take the available size of its parent into consideration whereas other Panels such as a DockPanel or a Grid (yes, that's actually a Panel too) do.
It's explained in the How to: Choose Between StackPanel and DockPanel page on MSDN:
Although you can use either DockPanel or StackPanel to stack child elements, the two controls do not always produce the same results. For example, the order that you place child elements can affect the size of child elements in a DockPanel but not in a StackPanel. This different behavior occurs because StackPanel measures in the direction of stacking at Double.PositiveInfinity; however, DockPanel measures only the available size.
The StackPanel should only really be used to align a number of items, such as Buttons or other controls in a straight line where available space is not a concern. So anyway, the solution should be simple... just remove the StackPanel from the ScrollViewer. It doesn't appear to serve any purpose there anyway.
UPDATE >>>
After looking again, it seems as though you're saying that the problem is inside the DataTemplate, right? You might be able to fix that by setting the ItemsControl.HorizontalContentAlignment property to Stretch. That would ensure that each item remains within the boundary of the ItemsControl.
I'd also remove your Binding on the Grid.Width as you don't need it... a child Grid will take up the full space of a parent Grid by default. If these ideas don't work, just simplify your problem. Seriously, if you follow the advise in the linked page from the Help Center that I gave you in the comments, then you'll either fix the problem, or be able to come back here and provide a complete, but concise example that we could test.
I've found the behavior I was looking for by using a UniformGrid as the ItemsPanel, with its rows bound to the count of the ItemsSource model:
<ScrollViewer>
<ItemsControl ItemsSource="{Binding MyCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="{Binding MyCollection.Count}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
As #Sheridan pointed out above, it seems the StackPanel is causing trouble. Also, credit to https://stackoverflow.com/a/23375262/385273 for pointing out the UniformGrid option.
I have a StackPanel with several CheckBox controls inside it. How do I prevent the StackPanel from shrinking and obscuring the CheckBox controls when the window is resized?
<StackPanel Margin="12,89,12,62" Name="stackPanel1">
<CheckBox Name="chkOption1" Width="157" IsChecked="True" Margin="6">Do this thing</CheckBox>
<CheckBox Name="chkOption2" Width="157" IsChecked="True" Margin="6">Do another thing</CheckBox>
<CheckBox Name="chkOption2" Width="157" Margin="6">Do a third thing</CheckBox>
<Button Height="23" Name="btnRunOperations" Click="btnRunOperations_Click" Margin="3">Do Selected Things</Button>
</StackPanel>
EDIT: Does WPF have a different container control that has this behavior "out of the box"? This seems like a really common scenario.
Well, I guess you could set the MinimumHeight of the stackpanel to an appropriate value, either hardcoded, either calculated as the sum of the heights of all elements within.
you could use a binding and a custom converter where the converter calculates the value for you.
<StackPanel Height="{Binding Converter=MyConverter}"/>
You should wrap your StackPanel in a ScrollViewer. By default it will request to be as tall as needed to display all it's children.
So I'm coming at WPF from a HTML perspective.
I just want to put a TextBox on my Window like this:
<Grid>
<TextBox Name="theName" />
</Grid>
Turns out that the TextBox is then HUGE, covers the whole window. (!)
Ok, that's not what I want, but I don't want to define the EXACT size either since I know Height and Width should be flexible, so I try:
<TextBox Name="theName" Width="Auto" Height="Auto"/>
Same thing. So I try:
<TextBox Name="theName"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
Same thing. So I just hard code the sizes:
<TextBox Name="theName" Width="100" Height="20"/>
Which I know is not a good programming practice in WPF.
So, what how do you tell TextBox to "display default sizes for the font size being used"?
You can take Bryan's example even a bit further. By specifying a specific alignment that isn't stretch and further constrain the TextBox so that it won't expand beyond a certain size. eg:
<Grid x:Name="LayoutRoot">
<TextBox HorizontalAlignment="Left" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"
MinWidth="15" MinHeight="20" MaxWidth="500" MaxHeight="50"/>
</Grid>
You can take it even further by setting up rows/columns inside the Grid and constraining them in various fashions. As you're coming from an HTML background, think of it like using a table to control layout. Remember that you can also nest other container objects (i.e. StackPanels, WrapPanels, other Grids, etc...).
The challenge with XAML and the WPF/Silverlight controls is that they a very flexible, so you've got to get a handle on all the options and how they affect layout.
Good luck. I'm going through this exact same thing now.
Use a different container.
The Grid always streches its child controls to fill the grid cell.
You could use e.g. a stackpanel which only streches its controls in one direction.
In addition to using a different panel as Stefan mentioned you could just give the TextBox an alignment that isn't Stretch. e.g.
<TextBox Name="theName" HorizontalAlignment="Left" VerticalAlignment="Top"/>
The sizes in WPF aren't pixels, they are "device independent pixels" that are 1/96 of an inch - so in today's normal DPI setup they map 1:1 to pixels.
But, if you run the program in high DPI mode the TextBox will grow with the DPI (and the font).
So setting an hard-coded size isn't that bad.
Other than that you can only use HorizontalAlignment and VerticalAlignment that are not "Stretch", this will size the TextBox to content - but then an empty TextBox will be tiny.
You can set VerticalAlignment to "Center", "Top" or "Bottom" to get automatic height of about one line (maybe backed up by a MinHeight setting to avoid problems really tiny fonts) and then set the Width so the TextBox width does not change as the user types into it.
I'm using an expander inside a Resizer (a ContentControl with a resize gripper), and it expands/collapses properly when the control initially comes up. Once I resize it, the Expander won't properly collapse, as documented below. I ran Snoop on my application, and I don't see any heights set on Expander or its constituents.
How would I go about convincing Expander to collapse properly again? Or modifying Resizer to not make Expander sad would work as well.
Expander documentation says:
"For an Expander to work correctly, do not specify a Height on the Expander control when the ExpandDirection property is set to Down or Up. Similarly, do not specify a Width on the Expander control when the ExpandDirection property is set to Left or Right. When you set a size on the Expander control in the direction that the expanded content is displayed, the area that is defined by the size parameter is displayed with a border around it. This area displays even when the window is collapsed. To set the size of the expanded window, set size dimensions on the content of the Expander control or the ScrollViewer that encloses the content."
I resolved the problem by moving the Resizer inside the Expander, but I've run into the Expander issue elsewhere, so would still like an answer if someone has it.
thanks
I haven't had a chance to mock up this particular issue since then, but I recently discovered that setting Height or Width to Double.NaN resets it to its default free-spirited behavior.
Ironically, this was from reading the code of the Resizer control I was using in the first place.
Answering this a bit late (2+ years), but, hey, better late than never, right?
Anyway, I ran into this exact problem and was able to solve it with some code-behind to save and reset column widths.
I have a 3 columned Grid, with some content in the first column, the GridSplitter in the second column, and the Expander in the third column. It looks like what is happening is that after the GridSplitter is moved the width of the column containing the Expander is altered from Auto to a fixed size. This causes the Expander to no longer collapse as expected.
So, I added a private variable and two event handlers:
private GridLength _columnWidth;
private void Expander_Expanded (object sender, RoutedEventArgs e)
{
// restore column fixed size saved in Collapse event
Column2.Width = _columnWidth;
}
private void Expander_Collapsed (object sender, RoutedEventArgs e)
{
// save current column width so we can restore when expander is expanded
_columnWidth = Column2.Width;
// reset column width to auto so the expander will collapse properly
Column2.Width = GridLength.Auto;
}
When the Expander is collapsed I save Column2's fixed width (which was altered from Auto auto-magically in the background somewhere) then reset the width to Auto.
Then, when the expander is expanded, I restore the column back to the fixed width so it expands to the same width it was before it was collapsed.
Here's the XAML for reference:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition x:Name="Column2" Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="0" VerticalScrollBarVisibility="Auto">
<!-- some content goes here -->
</ScrollViewer>
<GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="5"
Background="Black" />
<Expander Grid.Column="2" ExpandDirection="Left"
IsExpanded="True" Style="{StaticResource LeftExpander}"
Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
<Grid>
<TextBox TextWrapping="Wrap" Height="Auto" Margin="0 5 5 5" />
</Grid>
</Expander>
</Grid>