I have Border control defined like so:
<Border Background="Azure" Grid.Row="2">
<ContentControl Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>
I can see Azure background in whole area
Now I inject my view into this ContentControl (it's PRISM). View looks like this..
<toolkit:BusyIndicator IsBusy="{Binding IsBusy}">
<Grid Margin="10" DataContext="{Binding}"
infBehaviors:RegionPopupBehaviors.CreatePopupRegionWithName="ViewPopup"
infBehaviors:RegionPopupBehaviors.ContainerWindowStyle="{StaticResource PopupStyle}">
<!--Define rows in a grid-->
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Define columns in a grid-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Now when I place new UserCOntrol on top of my Grid - I expect it to cover whole "Azure" area. But I only see overlay with size of my data entry form. It seems that second grid does not "fill" ContentControl - only takes as much space as needed. How do I force it to fill? I set Auto column and row - thinking they will stretch but no..
EDIT:
Screenshot from Silverlight Spy.. It shows that ContentControl from Shell covers whole area but grid inside totally ignores my "*" sizes. Also it does work in design mode - it stretches to whole design area...
Make sure you have HorizontalContentAlignment and VerticalContentAlignment of the ContentControl set to Stretch. ^_^
e.g.
<Border Background="Azure" Grid.Row="2">
<ContentControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Width="Auto" Height="Auto" Regions:RegionManager.RegionName="MainContent" />
</Border>
Related
I seem to not understand the layout behavior in my application. In the following sketch I have a TextBox that expands as text is being entered. How can I prevent that from happening and have the Height stay constant and get a Scrollbar instead? The size of the right TextBox should the size the left three TextBoxes take.
Initial state:
After adding several values:
Here's the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="LightBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="One" Margin="5" />
<TextBox Grid.Row="1" Grid.Column="0" Text="Two" Margin="5" />
<TextBox Grid.Row="2" Grid.Column="0" Text="Three" Margin="5" />
<TextBox
Grid.RowSpan="3" Grid.Column="1" Margin="5"
AcceptsReturn="True"
Text="Hello World!"
VerticalScrollBarVisibility="Auto"
/>
</Grid>
<Rectangle Grid.Row="1" Fill="Blue" />
</Grid>
Simple Answer
Assuming that the font size and margins of the TextBoxes are going to remain constant, and that the TextBoxes on the left are single-line only, you can just set a fixed height for the top RowDefinition:
<Grid.RowDefinitions>
<RowDefinition Height="84" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
Complicated Answer
If the left TextBoxes are multiline, or if the font size or margins can change, then you'll have to get a bit more complicated. I don't think there's an existing Panel that can handle that, you'd have to manually set the Height of the right TextBox to match the sum of the ActualHeight + Margin.Top + Margin.Bottom for all of the left TextBoxes. This would need to be done whenever SizeChanged was raised on any of the left TextBoxes.
I've got a problem with WPF/XAML. I can't figure out how to let the left Grid (with a centered image inside and backgroud color) grow its height, depending on the autogenerated height on the datagrid on the right.
They both are presented in a global grid. If I set a fixed height on the corresponding row, the autogenerated datagrid shows a cruel vertical line, depending on the fixed row-height I set before.
layout with row-height on auto
layout with fixed row-height, but with ugly line at the bottom
<!--ElementR0C1-->
<Grid Name="test">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--Width ElementsC1-->
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<!--START-->
<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource L1}" VerticalAlignment="Top">Process</Label>
<Grid Grid.Row="1" Grid.Column="0" Background="DDDDDD">
<Image Margin="0,30,0,0" Height="64" Width="64" Source="../../Resources/ok.png" Name="imgJobs" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<DataGrid x:Name="grdJobs" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Width="500">
-- some stuff here
</DataGrid>
</Grid>
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 a grid which its columns are centred aligned. For example every image that is on a cell in this grid, is centred on its cell. There is nothing in grid definition that sets this .
The grid definition is as follow:
<Grid Canvas.Left="16" Canvas.Top="229" Visibility="{Binding Status,
Converter={StaticResource EnumToVisibilityConverter},
ConverterParameter='OK,Processing'}" IsEnabled="{Binding Status,
Converter={StaticResource EnumToBoolConverter},
ConverterParameter='OK'}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Source="image1.png" Stretch="Fill" Width="111" Height="20" />
<Image Grid.Column="0" Grid.Row="1" Source="image2.png" Width="49" Height="17"/>
</Grid>
Both of the above images are centred aligned.
I checked parent canvas and there is nothing there to dictate that it should be centred.
Is there a way that I set the alignment of a grid column to left?
Is there any tools that I can see where the property of each component is set? (Similar to what developer toolbar do for CCS and HTML)
You could set the HorizontalAlignment of the Image to the Left if you need, as I'm pretty sure Center is the default alignment.
<Image HorizontalAlignment="Left" ......
I have a Window with a Grid inside:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="70" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<DockPanel Grid.Row="1" Visibility="{Binding SearchResultViewVisibility}">
<GridSplitter DockPanel.Dock="Top" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False"/>
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
<UserControls:GradientBackgroundControl Grid.Row="2" Height="25">
<Validators:FocusSummaryControl x:Name="FocusSummary" ValidateOnlyFocusedElement="False" />
</UserControls:GradientBackgroundControl>
</Grid>
The ContentControl gets a UserControl with this Grid set:
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.ColumnSpan="4">
<StackPanel>
...
</StackPanel>
</ScrollViewer>
The problem now is, that the ScrollViewer in the UserControl doesn't scroll. The content of the UserControl set to the ContentControl is heigher and the overflow ist just hidden.
If I am not wrong, StackPanel requires a Height to be set for scroll functionality to work because StackPanel, by design, grows in one direction (based on Orientation).
To confirm whether this is the cause of your problem, please test by setting the height of StackPanel to a fixed height. Alternately, you may want to replace the StackPanel with say DockPanel and see the behaviour. Also there is a ScrollViewer.CanContentScroll property that you may want to fiddle with.
Let us know the result of this test.
I think you need to rearrange things a little bit. My suggestions (I'm sure there are infinite variations that would work):
First, add a new row to your grid (Height="Auto") and set the height of your top row (with your ContentControl in it) to "*"
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
Second, move your GridSplitter out of the DockPanel. Put the splitter in row 1 and the dockpanel in row 2.
<ContentControl Grid.Row="0" Content="{Binding ChildViewModel.View}" />
<GridSplitter Grid.Row="1" Background="LightGray" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top" IsTabStop="False" ResizeBehavior="PreviousAndNext"/>
<DockPanel Grid.Row="2" Visibility="{Binding SearchResultViewVisibility}">
<Views:SearchResultView DataContext="{Binding SearchResultViewModel}" />
</DockPanel>
Note that you'll probably also have to set the ResizeBehavior for your GridSplitter as shown above. I hope this will get you close to what you want.