Help with my WPF Layout - wpf

I have a WPF Line of business application. Most of it is hosted in user controls in tabs.
I'm having an issue finding out how to layout this so it would fit any resolution (with scrolling if necessary).
Here's the issue described in code because i really can't figure out how to put this to text, if it's not clear please let me know i'll try to draw something up.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition> <!--What i actually want to say here isn't "take all remaining space" but "take all remaining space without scrolling,
and then scroll based on everything as if this was auto and no longer *-->
<ColumnDefinition Width="Auto"></ColumnDefinition><!--But what happens for now is that since this is auto , it will not scroll at all untill the * column has fully scrolled-->
</Grid.ColumnDefinitions>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label></Label>
<TextBox></TextBox>
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="1">
<StackPanel Orientation="Horizontal">
<button> <!-- I want the button's container to be in an auto column , don't
want it to take size away from the fields unless needed but don't
want it to stay visible at the expense of the fields either -->
</StackPanel>
</StackPanel>
<TelerikGrid:RadGridView Grid.Row="1" Grid.ColumnSpan="2">
<TelerikGrid:RadGridView.Columns>
<TelerikGrid:GridViewDataColumn Width="*"/> <!-- This makes my grid take a bajillon kilometers because it itself is in a Grid's column of * size itself in a scrollviewer -->
</TelerikGrid:RadGridView.Columns>
</TelerikGrid:RadGridView>
</Grid>

Hard to tell given I cannot load your GridView control in a Window.
I recommend nesting a layout manager Grid for your controls inside your Grid to create a separation between your controls and the GridView. You also should consider combining all the controls in one StackPanel or other layout manager.
Regardless, this layout gives you separation between the controls and the GridView regardless of your choice of layout manager with no need to specify a column span.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Place a layout Grid inside your Grid to deal with controls -->
<Grid Grid.Column="0" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Removed your nested stack panel -->
<StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
<Label></Label>
<TextBox></TextBox>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" Orientation="Horizontal">
<Button />
</StackPanel>
</Grid>
<!-- Add a spilter bar here -->
<!-- No need to span 2 columns anymore... -->
<TelerikGrid:RadGridView Grid.Column="0" Grid.Row="1" >
<TelerikGrid:RadGridView.Columns>
<TelerikGrid:GridViewDataColumn Width="*"/>
</TelerikGrid:RadGridView.Columns>
</TelerikGrid:RadGridView>
<!-- Add a status bar here -->
</Grid>

Related

How to have 2 child Button, each one with different VerticalAlignment?

I have a grid with the top and bottom row having each one kind of the same button (style and so on) with their size growing when I mouse over them.
Except I want my top button to grow from bottom to top, so without altering the rest of the grid position, and respectively, my bottom button to grow from top to bottom.
I tried to change VerticalAlignment="Bottom" for top button, and respectively, VerticalAlignment="Top" for bottom button, but that doesn't change a thing.
After reading this I figured I had to change the parent vertical alignment, so my grid.
But it affect both button at once, and I what distinct behavior for each one !
See this example
EDIT :
So I try first solution of Chris Mack and embedding my first button inside a new dedicated Grid just for formatting the visual I look for (Meh don't like that much, but may be it is the way to go XAML).
So here it is now :
<Grid Grid.Row="1" Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--this is new : =>-->
<Grid Grid.Column="2" Background="Green" Margin="5,10,10,10">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!--<= : this was new-->
<!--VerticalAlignment="Bottom" is new inside the Button properties-->
<Button Grid.Column="0" Grid.Row="0" Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" VerticalAlignment="Bottom" MinHeight="60" Background="PaleGoldenrod" BorderBrush="Transparent" BorderThickness="1" Name="UpdateBtn" Click="UpdateBtn_Click">
<local:NineSliceImage x:Name="Update9SliceImg" ImgSource="/Assets/UpdateGreenBIG.png" Slice="225,300,225,225" AreasSize="0.02,0,0.02,10"/>
</Button>
</Grid>
So for now (have to test more to be sure) I get what I want, as my 2nd bottom button was already reacting as I wanted, only had to add those extra formatting visual behaviour on my first Button.
But here is my new question :
I don't understand why I had to set VerticalAlignment="Bottom" on my "root" grid to change my childs positioning (and all of them the same, see my original issue) whereas here in my new sub-grid (created only for formatting first button on bottom of it's own sub-grid), setting VerticalAlignment="Bottom" had no effect this time and I had to set VerticalAlignment="Bottom" on the Button itself !
As total opposition of previous remark !!?
EDIT 2 :
Finally I ended up using last suggestion of Chris Mack, simply :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/><!--Top row-->
<RowDefinition Height="252"/><!--Update & save. New : FIXED HEIGHT VALUE-->
<RowDefinition Height="*"/><!--ListBox-->
</Grid.RowDefinitions>
<Grid>
<!--first row, useless in for our case here-->
</Grid>
<Grid Grid.Row="1" Background="Transparent">
<Grid.RowDefinitions>
<!-- 0) UPDATE Button. New : FIXED HEIGHT VALUE-->
<RowDefinition Height="90"/>
<!-- 1) Icon & Name-->
<RowDefinition Height="auto"/>
<!-- 2) Icon & Name-->
<RowDefinition Height="auto"/>
<!-- 3) Save Button-->
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- 0) Icon Button-->
<ColumnDefinition Width="auto"/>
<!-- 1) Name TextBox-->
<ColumnDefinition Width="250"/>
<!-- 2) TextBox-->
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Top button, note I added VerticalAlignment="Bottom"-->
<Button Grid.Row="0" Grid.Column="2" Margin="5,0,10,10" Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" VerticalAlignment="Bottom" MinHeight="60" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Name="UpdateBtn" Click="UpdateBtn_Click" ToolTip="Update">
</Button>
<!--Other useless stuff-->
<Button Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" Margin="10,10,10,10" MinHeight="60" Grid.Row="3" Grid.ColumnSpan="3" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Name="SaveBtn" Click="SaveBtn_Click" ToolTip="Save">
</Button>
</Grid>
</Grid>
Grid control rows will automatically size depending on their content (at least when coded as you have coded them). VerticalAlignment won't change anything, because the row is changing size with the Button when the mouse hovers over it, so alignment is irrelevant.
To accomplish the effect you are looking for, place each Button inside of its own Grid (within the appropriate row), and size those Grids to accommodate the Buttons' different states.
I guess another thing you could do would be to have a Margin on the Button while the mouse is not hovered over it, and then to remove the Margin (via a Trigger) when the size changes, so the expanded Button takes up the space once taken up by the Margin, resulting in the same row height.
Another thing you could do would just be to have fixed sizes for your Grid rows and Button, in which case the alignments would be effective.

Fixed header and footer outside scrollview

I have a grid that has a header, content and a footer:
<Grid.RowDefinitions>
<RowDefinition Height="55"/> <!--HEADER-->
<RowDefinition Height="*"/> <!--CONTENT-->
<RowDefinition Height="55"/> <!--FOOTER-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3"></Rectangle>
<ScrollViewer Grid.Row="1" Grid.Column="1" >
<Grid>
...
</Grid>
</ScrollViewer>
<Rectangle Grid.Row="3" Grid.ColumnSpan="3"></Rectangle>
</Grid>
I want to have it so that the header and footer are fixed and the content is scrollable. Within the second nested grid there is a lot of content, hence the scroll view. When I run the application, the scrollviewer still scrolls with the header and footer! I can't figure out what I'm doing wrong, is there a better layout I should be using?
Please let me know! I'd rather not use C#.
Thanks!
Unless you are doing something strange either around the XAML you have posted or inside the nested Grid object, your XAML works as you intended.
I very slightly modified your XAML, just to visibly show your header and footer, and to add some content to your inner grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="55"/><!--HEADER-->
<RowDefinition Height="*"/><!--CONTENT-->
<RowDefinition Height="55"/><!--FOOTER-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="3" Height="55" Fill="Red"/>
<ScrollViewer Grid.Row="1" Grid.Column="1" >
<Grid >
<ListBox ItemsSource="{Binding Path=myItems, FallbackValue='123456789abcdefghijklmno'}"/>
</Grid>
</ScrollViewer>
<Rectangle Grid.Row="3" Grid.ColumnSpan="3" Height="55" Fill="Blue"/>
</Grid>
Shown below is the result. Your ScrollViewer scrolls just fine while leaving the header and footer in place.
I'm not sure what else you have going on in your window, but this is the only XAML in the window I used for testing, and it works perfectly. As a note, I limited the height of the window to '400' so the inner grid did not continue to grow since it's height was set to *. You can achieve the same result by setting a maximum height on your outer Grid.

How to make TextBox fill all available space without later resizing to its content?

I have the following Grid with a TextBox in it:
<UserControl ...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30px"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="1px"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Grid.RowSpan="3" AcceptsReturn="True"
TextWrapping="Wrap" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<!-- content in other cells of the Grid's first column -->
</Grid>
</UserControl>
I want the TextBox to fill all space that is available on the control (width and height-wise) and should the user enter more text than fits into it I want its vertical scrollbar to become active, without resizing the TextBox. What happens instead is that the size of the TextBox changes to accomodate the content and the whole grid grows with it.
How do I achieve what I need?
Edit: Here's an illustration of what happens.
The above screenshot is of the situation when the content fits comfortably into the TextBox. The below screenshot is of the situation when there is not enough room to fit all content - the TextBox is then resized to fit it and this resizes also the grid that it is placed in, making it look broken.
Edit 2: The project that demonstrates this behavior is here.
I have managed to solve this by adding an invisible Border in the same cells of the Grid as the TextBox, then setting TextBox' Width and Height to ActualWidth and ActualHeight of that Border respectively:
<Border x:Name="b" Grid.Column="1" Grid.RowSpan="3"
HorizontalAlignment="Stretch"/>
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Grid.Column="1"
Grid.RowSpan="3" Width="{Binding ActualWidth, ElementName=b}"
Height="{Binding ActualHeight, ElementName=b}"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
This then caused the TextBox to stay of fixed Height regardless of its content, but there was another problem with its Width: it grew when the interface was expanded, but didn't shrink afterwards, because of the underlying ScrollViewer. The trick was to set that ScrollViewer's HorizontalScrollBarVisibility to Disabled, instead of Hidden as I had done previously.
I pushed changes of the example project to GitHub, so the solution is now available here.
The TextBox doesn't fill the Grid. You can confirm this yourself by specifying a Background for the Grid:
<UserControl>
<Grid Background="Yellow">
...
This is because the height of the Grid is 30 px + whatever the height of the TextBox is + 1 px. For the contents of the row 2 or 3 to fill the Grid, you need to change the Height of at least one of the RowDefinitions to *:
<UserControl>
<Grid Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="30px"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1px"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" Grid.RowSpan="3" AcceptsReturn="True"
TextWrapping="Wrap" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Visible" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</UserControl>

WPF: avoid redrawing of groupbox to fit content

I'm using a page with a grid with 3 rows where every row contains a groupbox. The groupboxes also contain different grids with different content.
I would like to have all of my groupboxes to fit the same width. Initially that's the case. But when the content of the first group box is updated from code behind, the group box gets redrawn for a very short moment (width is smaller), but a second later it again fits to the width.
Initially it is: "not connected" which changes to "connected", so width is smaller.
The Width of my window is set to maximize, I don't want to set fix width and height for the page and the grids. Is there a way I can only update the content, without the box trying to fit to the content?
Example ( 2 rows):
<Grid Grid.IsSharedSizeScope="True" Name="globalGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="globalCol"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
</Grid.RowDefinitions>
<GroupBox Header="Connection status"
Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Name="Connected"
Style="{StaticResource iconConnectStyle}"
DataContext="{Binding DeviceConnection}"
Grid.Row="0" Grid.Column="0" />
<TextBlock Text="device 1:"
Grid.Row="0" Grid.Column="1"
Style="{StaticResource statusText}"/>
<TextBlock Name="dev1" Grid.Row="0" Grid.Column="2"
Style="{StaticResource statusText}" />
</Grid>
</GroupBox>
<GroupBox Header="processing status"
Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock x:Name="processState" Style="{StaticResource statusText}"/>
<ProgressBar x:Name="progressState"/>
</StackPanel>
</GroupBox>
</Grid>
I'm now using a UniformGrid, that solved the problem...

Silverlight Grid does not fill

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>

Resources