I have a WPF grid layout like this:
<Grid Margin="7,7,7,7">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1"
VerticalScrollBarVisibility="Auto">
... Content ...
</ScrollViewer>
</Grid>
When the content in the ScrollViewer exceeds the visible height of the Grid, the scroll bar still doesn't show. What is going wrong?
The ScrollViewer grows bigger than the screen so there is no scrolling. Setting Grid's row Height to * from Auto should solve this.
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Related
So i have this ListView inside TabControl:
<TabControl>
<TabItem Width="70" Height="70" Margin="0,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<ListView>
...
</ListView>
</Grid>
<Grid>
</Grid>
</Grid>
</TabItem>
</TabControl>
My window ResizeMode is CanResizeWithGrip and when i resize my application i want my ListView to auto resize to according my Window width.
I try to define my ListView HorizontalAlignment Stretch bu when my application width changed my ListView with not.
I believe since your ListView is nested within other controls, those controls would need their HorizontalAlignment set to Stretch. I'm on my phone right now so I'll try out your XAML on my system when I get home and update my answer if I find something else is the culprit.
Edit: I've copied your code into VS and its stretching properly for me. I don't have any contents to check but if I set
<TabControl>
<TabItem Width="70" Height="70" Margin="0,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<ListView Background="Black">
</ListView>
</Grid>
</Grid>
</Grid>
</Grid>
</TabItem>
</TabControl>
I can see that the control is in fact stretching when I resize the window. Now I'm unsure of what the issue you are running into is. Any chance you could post more details?
I have a wpf user control which has Grid with row definitions as Auto. and controls defined in that in grid. Outside of this this i have scroll viewer VerticalScrollBarVisibility as set to Auto.
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name" />
<telerik:RadRichTextBox Name="Name" Grid.Row="0" Margin="2"
Padding="0" HorizontalAlignment="Left" AcceptsReturn="True"
Height="500" Width="750" DocumentInheritsDefaultStyleSettings="True" FontFamily="Calibri" FontSize="13">
<telerik:RadRichTextBox.Document>
<telerik:RadDocument LineSpacingType="AtLeast" LineSpacing="0"
ParagraphDefaultSpacingAfter="0" ParagraphDefaultSpacingBefore="0">
</telerik:RadDocument>
</telerik:RadRichTextBox.Document>
</telerik:RadRichTextBox>
</Grid>
</ScrollViewer>
I am loading the above control as content of Rad tab item from another view.
I could not able to view vertical scroll bar when i resize the window.
You can do this
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
......
<telerik:RadRichTextBox Grid.Row="1" ......
/>
I have a 3 column Grid -
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
I am trying to fill the * column with a slider control - I have tried DockPanel and StackPanel - cannot get the slider width to fill that middle column. The slider is for a media element position changer that loads an .avi to a set height in xaml - so the aspect ratio is taken care of. But...Width changes to the correct ratio...the Grid size changes so I cant set a Width in xaml for the slider control.
I am not sure if that is exactly what you need, because it looks so obvious to me !
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Slider Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
that gonna fill the second column :
In a user control, which I'm embedding in my main view,
I've defined the following layout:
<Grid x:Name="RootGrid" Margin="0,10,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Margin="5,0,5,0"
Grid.RowSpan="5"
Grid.ColumnSpan="4"
Panel.ZIndex="-1"
Stroke="Blue"
Fill ="Black"
StrokeThickness="2"
/>
In the preview in Visual Studio, it looks like expected:
- that is the margin 5(for right adjustment) is taken into account.
Unfortunately, during runtime it is another story. I can set the right adjustment (margin) as high as I want, the right border of the rectangle is missing.
Can somebody tell me, what I am doing wrong here? I do not want to work with absolute width for the rectangle (that's working).
Update:
According to the proposal of Erno, I've used a border (and this is indeed much simpler):
<Border HorizontalAlignment="Stretch" Margin="10,0,10,0" Style="{StaticResource StatusPanelBorder}">
<Grid x:Name="RootGrid" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
But the issue is still the same.
I'm embedding this view in a main view, which has the following layout:
<Grid Width="1600" Height="Auto" HorizontalAlignment="Stretch" Background="{StaticResource NoiseBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="90*" />
<ColumnDefinition Width="40*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="600" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
The subview is embedded into the last column of the grid.
If I do not use the 'Stretch' alignment it works, but I want to 'stretch' the UI elements.
Second Update:
The issue was just that the shell view had a smaller width. Problem solved!
The best way to add a border to a grid is to take a border and nest a grid inside of it:
<Border>
<Grid>
...
</Grid>
</Border>
This way the grid and the border will resize the way you probably want, you can control the margins and you do not have to keep the textblocks' margins in sync with the rectangle's border.
EDIT
Looking at the xaml you added to the question I guess you set the width of the window to 1600. If so, the width of the Grid that you also set to 1600 doesn't fit because the width of the window INCLUDES the left and right borders. So forcing the grid's width to 1600 will cut it off at the right.
My advice: do not use hard-coded sizes, use star-sizes for columns and rows and use maximized for windows; Grids will stretch their contents automatically.
I have an System.Windows.Controls.AutoCompleteBox with a fixed width.
The width should dynamically grow based on the content.
How can I achieve this.
Thanks for your help
You can achieve it by placing the AutoCompleteBox in a Grid.Column with Width="Auto". Here's an example:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="30" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<toolkit:AutoCompleteBox />
</Grid>