I have situation like this:
<UserControl>
<Grid x:Name="fullGrid" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="innerGrid" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel x:Name="leftSide" VerticalAlignment="Stretch">
<ScrollViewer VerticalAlignment="Stretch">
<ItemsControl/ VerticalAlignment="Stretch">
</ScrollViewer>
</StackPanel>
</Grid>
</Grid>
</UserControl>
Problem is that leftSide stackPanel height is higher than it's parent: innerGrid height.
I was debugging it in Snoop and it seems that StackPanel just ignore it's VerticalAlignment property.
I would like to avoid setting Heigh={Binding ElementName=xxx, Path=ActualHeight} because I have some additional Margins inside, and it break the view.
How can I handle that?
ScrollViewer fills its parent. StackPanel wants to size to its children, and so tells them they have as much space as they want (and then "shrinks to fit").
So, StackPanel tells ScrollViewer it can have all the space in the world, which it happily takes. There is no way to stop this besides doing a binding as you describe or setting an absolute height.
So the simple solution is: remove the StackPanel. Then the ScrollViewer will take up the space the Grid assigns it.
Related
This question already has answers here:
How to make scrollviewer work with Height set to Auto in WPF?
(5 answers)
Closed 2 years ago.
I have got a little problem that I am unable to fix. The problem is that when I initialise scrollbar, it does not stay only in screen. To be more specific, its height is actually set to "auto", I think, because it does not let me scroll and it goes to infinite. On the other hand, when I set height to "500" it lets me scroll through it and everything works fine.
Main window:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--
<Frame x:Name="MainFrame" Grid.Row ="1" Grid.Column="1" Content="{Binding CurrPage}" Source="../pages/test_page.xaml" />
-->
<Grid Height="500">
<local:MessageList>
<local:ChatListControl VerticalAlignment="Top">
</local:ChatListControl>
</local:MessageList>
</Grid>
</Grid>
Chat list Control (the place where scrollbar is):
<Grid DataContext="{x:Static local:ChatsDesignModule.Instance}" Background="White">
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:OneMessageTMP />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
Is there a way how can I bind in the first window the current size just by binding it to something already pre-existing or I have to somehow get the current max value and then set it using that one ?
Thanks in advance. If you have any question on the code, please let me know, I will explain / provide more code if needed :)
set Height="Auto" to Height="*". Height="Auto" will give the content of the grid row as much space as it wants. Thus the scroll viewer has nothing to scroll on.
Trying to use GridSplitter but it's not working. Dragging the splitter to the left is fine, but dragging to the right has no effect. I think the Right grid is the problem. But I'm not sure. Please give me some advice.
Here is my code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="{DynamicResource DefaultMargin}"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"/>
<ColumnDefinition x:Name="columnDefinition_One" Width="{DynamicResource DefaultMargin}"/>
<ColumnDefinition x:Name="columnDefinition_Two" MinWidth="230" Width="{Binding ActualWidth, ElementName=Element1}"/>
</Grid.ColumnDefinitions>
<Grid x:Name="Layout" Grid.Row="2" Grid.Column="0">
</Grid>
<GridSplitter x:Name="gridSplitter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Grid.Column="1" Grid.Row="2" Background="{StaticResource DarkGray}" />
<Grid x:Name="grid_MonitoringView" Grid.Row="2" Grid.Column="2" Style="{DynamicResource DefaultPanel}" HorizontalAlignment="Stretch">
<Border>
<view1:ViewExample x:Name="viewExample"/>
</Border>
</Grid>
</Grid>
I copied your code into my demo project, and it works fine for me. #lomed found that you might have an incorrect MinWidth value and I agree with that too. But you say that your 'grid_MonitoringView' has not been affected.
Do you notice that my right border layout correctly? So the real problem is ViewExample class. Your ViewExample has incorrect layout values such as MinWidth or other visuals inside with larger layout width.
the GridSplitter cant reduce width of column than their MinWidth value.
You'll see it works fine if you maximize the window,
or for demostartion try remove the MinWidth value:
<ColumnDefinition />
<ColumnDefinition x:Name="columnDefinition_One" Width="50"/>
<ColumnDefinition x:Name="columnDefinition_Two"/>
OK, I'm having issues properly using a ScrollViewer (containing an ItemsControl) inside a StackPanel.
The thing is the scrolling works, however :
No matter how much the user scrolls down, the bottom lines of the tables are not visible
When scrolling is... "released", the table pops back up...
<ScrollViewer Height="Auto">
<ItemsControl ItemsSource="{Binding Items, Mode=TwoWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" Margin="0,0,0,0" x:Name="ResTable">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.10*"/>
<ColumnDefinition Width="0.30*" />
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.30*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding [num]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding [A]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="2" Text="{Binding [B]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="3" Text="{Binding [C]}" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Any ideas?
P.S.
I've had a look at some of the other answers to similar issues, but none seems to be working...
My main idea is to display a table, with a fixed header, and scrollable contents (populated via Bindings) - ok, and there are also a couple of things on the top of the page (apart from the table I mean)
I guess the issue is that you should probably use parent element like Grid, not StackPanel, because StackPanel has its drawbacks when resizing child items with scrolls and so on.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Put headers in Grid.Row="0" -->
<!-- Put Scrollviewer in Grid.Row="1" -->
</Grid>
Also Height="Auto" attribute can be removed from ScrollViewer, you might want to use VerticalAlignment="Stretch" for item to take all the available space. I hope this is what you are trying to achieve.
The property MaxHeight seems to be ignored on RowDefinitions with Height="Auto":
Consider the following XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="100"/>
</Grid.RowDefinitions>
<ListBox>
<ListBox.Items>
<ListBoxItem>a</ListBoxItem>
<ListBoxItem>b</ListBoxItem>
<ListBoxItem>c</ListBoxItem>
<ListBoxItem>d</ListBoxItem>
<ListBoxItem>e</ListBoxItem>
<ListBoxItem>f</ListBoxItem>
<ListBoxItem>g</ListBoxItem>
<ListBoxItem>h</ListBoxItem>
<ListBoxItem>i</ListBoxItem>
<ListBoxItem>j</ListBoxItem>
</ListBox.Items>
</ListBox>
</Grid>
The Grid will be bigger than 100 dip.
How can I constrain a RowDefinition in its Height?
Must be something else. Tried it in a clean Window and the listbox stops at 100 pixels.
Maybe check your styling.
Set the height on the grid to auto and leave maxheight on the rowdefinition.
For Example:
<Grid Height="Auto" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="20" MinHeight="20" MaxHeight="20"/>
I got a ListView (wrapped in a ScrollViewer), which resizes itself if the elements inseretd exceed the visible area until the parents Max Height is reached.
The ListView is embedded the following way.
<Window ... SizeToContent="Height">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="MyScrollViewer" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListView Name="MyListView"
ItemsSource="{Binding Path=RetrievalStringResults, Mode=OneWay}"
IsSynchronizedWithCurrentItem="True" />
</ScrollViewer>
<DockPanel Grid.Row="0" Grid.Column="1">
...
</DockPanel>
<Expander Grid.Row="1" Grid.ColumnSpan="2">
<DockPanel Height="150" HorizontalAlignment="Stretch">
<TextBox DockPanel.Dock="Top" />
</DockPanel>
</Expander>
<DockPanel Grid.Row="2" Grid.ColumnSpan="2">
... some buttons
</DockPanel>
</Grid>
</Window>
I used SizeToContent because I got a text box on the bottom wrapped in an Expander, which shall expanded on demand, and actually therefore my main window needs to resize. This actually works fine.
The problem is though the ListView's Height isn't the max height on start-up wherefore I got that "auto-resize" effect.
How can I set the ListView's hight to the max of the parents height to avoid this effect?
Another, more general issue. I think avoiding static layout parameters (static values for hight/width) is nice, but I got the feeling I'm loosing some control over my UI controls.
I recognized, resizeing my main window manually in height, it "jumps" by the 150 height of the DockPanel wrapped by the Expander on the bottom, anyway to avoid this?
What is the best pratice in dynamic UI Layout? I explored DockPanel beeing more dynamically in sizing to the surounding contorls than a StackPanel. But I guess thats not everything.
I think your issue is with your Grid definitions
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>
This means that the top row is going to be twice the size of rows 2 and 3, so the top row will only take up 50% of your space while your bottom two rows each take up 25% space.
If you want the top row to take up all available space, make sure it is the only * size row, and set the other rows to Auto so they will take up whatever space they need.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
...
</Grid>