Window Auto sizing when adding grid row via button [duplicate] - wpf

I have a dialog containing 2 TextBlocks, a Progress Bar and a cancel Button.
Here is the XAML:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication4"
mc:Ignorable="d"
Title="MainWindow" Height="Auto" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="txtFirst" Grid.Row="0" Margin="5" TextWrapping="Wrap">This is a really really really really long string that wraps</TextBlock>
<TextBlock x:Name="txtSecond" Grid.Row="1" Margin="5" Text="A Shorter string" TextWrapping="Wrap" MaxWidth="200"/>
<ProgressBar x:Name="prgProgress" Grid.Row="2" Margin="5" Height="20" />
<Button x:Name="btnCancel" Grid.Row="3" Margin="5" Height="25" Width="50"/>
</Grid>
</Window>
I would like the Window not to have a fixed height but auto adjust its height based on the size of its children and no more, but can’t see a way to do this. At the moment when I don’t assign anything to the Window’s height, it seems to adopt a height that is much bigger that the content.
Not sure why, or where it gets height value from? If I set Windows Height = “Auto” I get the same thing. All the heights for the RowDefinitions are set to “Auto”, which I take to mean ‘set row height to be row child height’.

You need to use SizeToContent property, check the msdn link.
Example:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
…
SizeToContent="WidthAndHeight">

Related

How to prevent Labels on bottom of window from disappearing when resizing?

Basically I have a window is that SizeToContent="WidthAndHeight" and I have a Label positioned on the bottom. When resizing the window the label disappears. Unless I make the window a lot bigger.
I have the following XAML code:
<Window x:Class="DateKeeper.View.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DateKeeper.View"
mc:Ignorable="d"
Title="Test" SizeToContent="WidthAndHeight"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" VerticalAlignment="Bottom" Grid.Column="0" Grid.Row="1" FontSize="36"/>
<TextBlock x:Name="textBlock" Grid.Column="1" Text="TextBlock" VerticalAlignment="Bottom" Grid.Row="1" FontSize="36"/>
</Grid>
</Window>
And here are the pictures:
Before Resizing
After resizing
SizeToWidthAndHeight sets the window's initial size. It doesn't prevent the user from resizing the window.
ResizeMode="NoResize" will prevent all resizing. If you want to set a minimum size and allow the window to be sized larger than that, you can't do that in pure XAML.
However, you can use that initial size as a minimum width and height with some simple code in a loaded handler, like so:
<Window
x:Class="DateKeeper.View.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DateKeeper.View"
mc:Ignorable="d"
Title="Test"
SizeToContent="WidthAndHeight"
Loaded="Window_Loaded"
>
Test.xaml.cs (or whatever you call the codebehind for the above Window):
private void Window_Loaded(object sender, RoutedEventArgs e)
{
MinWidth = ActualWidth;
MinHeight = ActualHeight;
}
You could also write an attached property that would do the same thing.
Update
This pure-XAML approach with Mode=OneTime seems promising:
<Window
...
SizeToContent="WidthAndHeight"
MinHeight="{Binding ActualHeight, RelativeSource={RelativeSource Self}, Mode=OneTime, PresentationTraceSources.TraceLevel=High}"
MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Self}, Mode=OneTime}"
...
...but in trace output, we see that it gets the values of ActualHeight and ActualWidth very early on, before the window is sized to its content, perhaps before then actual UI window object is even created -- at a point when the actual width and height are both reported as zero.
You have 50% now
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label x:Name="label" Content="Label" FontSize="36"
Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
<TextBlock x:Name="textBlock" Text="TextBlock" FontSize="36"
Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom"/>
</Grid>
Not sure what you are trying to create, but three things:
The elements are losing visibility because they are going off of the screen because they are running out of room
Your layout puts both text elements in the second row of the Grid
a. The elements will only have 50% of the available height to render
b. FontSize and Margins/Padding will further offset this
You have two different text element types (Label and TextBlock)
a. Both have different Margin/Padding values
b. The different layout values will result in different levels of visibility
If you don't want the elements to lose visibility, you need to set a minimum size of the Window (e.g. 325x150).

Displaying and resizing a GridRow when a certain height of child control is reached

I cannot seem to get my Grid right. I need a layout with two rows, the first row has a dynamic height based on a child grid's height. The second row contains a couple of Buttons, this row has a constant height of 30 pixels. When the content of the child grid has not yet reached a height of 842 pixels, the window should compress to fit the content. Otherwise, it expands based on the child Grid's height.
If the content of the child grid reaches 842 pixels, I wanted to display a scroll bar only for the first Grid row.
I have played around with MinHeight and MaxHeight but nothing has worked so far. Right now, the scroll bar appears far too late and the window doesn't compress when there is no content in the child grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition MaxHeight="35px" Height="35*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0" VerticalScrollBarVisibility="Auto" MinHeight="842px" Margin="0,0,0,13" Grid.RowSpan="2">
<Grid>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
//Many controls here...
</Grid>
</ScrollViewer>
<Button Grid.Column="0" Grid.Row="1"></Button>
<Button Grid.Column="0" Grid.Row="1"></Button>
</Grid>
EDIT: Added a picture for clarification.
Like this?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" SizeToContent="WidthAndHeight">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<ScrollViewer Background="Yellow" Grid.Row="0" VerticalScrollBarVisibility="Auto" MaxHeight="842" Margin="0,0,0,13">
<Grid>
<Rectangle Fill="Red" Width="100" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center"></Rectangle>
</Grid>
</ScrollViewer>
<Button Grid.Row="1">But</Button>
</Grid>
</Window>

Why the height is incorrect?

I have a simple WPF form with next XAML
<Window x:Class="ReikartzDataConverter.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="650" Width="800">
<Grid Width="780" Height="650">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="500"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Process information" Height="28" HorizontalAlignment="Left" Margin="0,20,0,0" Name="label1" VerticalAlignment="Top" Width="235" />
<DataGrid Grid.Row="1" Width="780" Height="500" Name="paysTable">
</DataGrid>
<Label Grid.Row="2" Height="28" Name="lblError" VerticalAlignment="Top" Visibility="Hidden" Foreground="OrangeRed" FontWeight="Bold" FontSize="12" />
<Button Grid.Row="3" Content="Quit" Height="23" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
<Button Grid.Row="3" Content="Start" Height="23" Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" />
</Grid>
</Window>
Why my 2 buttons from Grid.Row="3" are partially located out of the visible part of the window?
My window has the height="650" and my Grid also has the Height="650"
I have 4 Rows: 50, 50, 500, 50. So the last row must be located inside the window. Why is not so?
The Window Height of 650 also includes the 'chrome', i.e. the bar at the top of the window with the minimize, maximize buttons. It is a much better approach to create a layout which does not rely on a specific height. In your case, I would make the row that contains your grid auto-sized:
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
Then you can remove the height / width from your Grid, and all your other UI elements, just let the grid dictate the size of its children.
#ColinE's answer is the right approach in that you should adopt a "fluid" layout in WPF, but if you really want a fixed height for your content and you need the window to be the right size, you can use the SizeToContent property:
<Window x:Class="ReikartzDataConverter.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="800"
SizeToContent="Height">
<Grid Width="780" Height="650">
...
</Grid>
</Window>
Setting SizeToContent to "Height" will make the window resize vertically so that its contents fit. Don't forget to remove the Height property from the Window declaration.

ItemsControl-wrapping the contents inside the window

I am using an ItemsControl inside a window in WPF. The itemscontrol is bound with a collection and the collection is a group of view models(user controls). My problem - the view is going beyond the current window as a result of many view models in the collection. I tried many things to handle it with a scroll bar but no use. Any suggestions? The question really is how to contain the itemscontrol within a window(with scrolling)?
The XAML below
<Window x:Class="WpfApplicationTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:app="clr-namespace:WpfApplicationTest"
Title="MainWindow" Height="350" Width="525">
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Row="0" Grid.Column="0" ItemsSource="{Binding UserControlCollection}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Bottom">
<Button Content="OK" Width="100" Margin="3" />
<Button Content="Cancel" Width="100" Margin="3" />
</StackPanel>
</Grid>
Wrap your ItemsControl in a ScrollViewer
Update: in your example, also set row height to * if it won't scale correctly.
In addition to #Bas's answer, set your MaxHeight and MinHeight properties to your window dimensions. You can either use the hard-coded numbers you have in the example, or create a binding to Window.ActualHeight/ActualWidth.

Why is my wpf grid not being contained in its container?

I have a user control and within it I have two controls: 1) a search criteria control (custom user control) and 2) a Telerik RadGridView.
Apart from that I have a window that is the shell for my application and in it exists three regions. When this window opens I click a button and the user control mentioned above gets inserted into one of the regions. Now that the user control is loaded I edit my search criteria and click the button to populate my grid with around 1,000 records. The problem is that the grid's scroll bar doesn't become enabled because the grid control maximizes to fit the size of all the data which runs past the screen.
The only way this works properly is to set the Height property of the grid to an absolute value but then the grid doesn't size with the window.
I've tried everything that I can think of: When in the grid I set the row def size to 200*, I put the grid in a wrap panel, I put it in a dockpanel, set the VerticalAlignment to stretch, changed the dock panel to stack panel.
Shell:
<Window x:Class="WTS.CGCApplicationInterface.CGCApplicationShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:cal="http://www.codeplex.com/CompositeWPF"
xmlns:inf="clr-namespace:WTS.CGCApplicationInterface.Infrastructure;assembly=WTSCGCApplicationInterface.Infrastructure"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Width="750" Height="480"
Title="CGC Interface Window">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="200*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ItemsControl cal:RegionManager.RegionName="MenuRegion" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" />
<ItemsControl cal:RegionManager.RegionName="SwitchboardRegion" Grid.Column="0" Grid.Row="1" />
<ItemsControl cal:RegionManager.RegionName="MainRegion" Grid.Column="1" Grid.Row="1" />
</Grid>
User Control:
<UserControl x:Class="WTS.CGCApplicationInterfaceMVVM.Views.Oncor.OncorTimesheetCGC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:wtsControls="clr-namespace:WTS.CGCApplicationInterface.UserControls;assembly=WTSCGCApplicationInterface.Infrastructure"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600" Background="Red">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="200*" />
</Grid.RowDefinitions>
<wtsControls:CGCQueryUserControl Grid.Row="0"/>
<telerik:RadGridView ItemsSource="{Binding Path=Timesheets}" AutoGenerateColumns="False" Grid.Row="1"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<telerik:RadGridView.Columns>
<telerik:GridViewToggleRowDetailsColumn></telerik:GridViewToggleRowDetailsColumn>
<telerik:GridViewDataColumn Header="MyField1" UniqueName="AssociatedObject.MyField1" IsVisible="False" />
<telerik:GridViewDataColumn Header="MyField2" UniqueName="AssociatedObject.MyField2" IsVisible="False" />
I wish I could get points for answering my own question. I do realize that this could be taken advantage of. That said, in my shell, I changed the ItemsControl region to a ContentControl and it works perfectly.

Resources