WPF - Max application window does not extend controls vertically - horizontally it does
when I click the Maximize button in my WPF application, all of the controls in it expand perfectly horizontally, but they don't expand to fill the window vertically. I suppose Maximize handles it horizontally, it should handle it vertically as well. Should I set a property somewhere on each control? I can catch the Resize event, but there seems to be a lot of work to go through all the controls and only change them vertically.
Thank you for your help.
FYI. I ended up changing the grid height to "Auto" and then when the SizeChanged event for Window1 fired I set the grid height to e.NewSize.Height minus the actual values of the controls in the StackPanel that are above it, Not like I would like to, but so far the only solution I've found works.
Thank.
A portion of the XAML is clipped in the preview window, but displayed in the OK response text box. Let me know if it turns out ok or not. VerticalAlignment = "Stretch" doesn't help.
<Window x:Class="MainScreen.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MainScreen"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
WindowStartupLocation="CenterScreen"
Title="Nodes" Height="600" Width="800"
>
<!-- The "toolkit" namespace above is for the data grid control. It reference is WPFToolkit. -->
<Window.CommandBindings>
<CommandBinding Command="{StaticResource LineTopologyCommand}" Executed="OnLineTopology" />
<CommandBinding Command="{StaticResource PointToPointTopologyCommand}" Executed="OnPointToPointTopology" />
<CommandBinding Command="{StaticResource PointToMultiPointTopologyCommand}" Executed="OnPointToMultiPointTopology" />
<CommandBinding Command="{StaticResource MultiToMultiTopologyCommand}" Executed="OnMultiToMultiTopology" />
<CommandBinding Command="{StaticResource CesTopologyCommand}" Executed="OnCESTopology" />
<CommandBinding Command="{StaticResource AllTopologyCommand}" Executed="OnAllTopology" />
</Window.CommandBindings>
<StackPanel VerticalAlignment="Stretch">
<r:Ribbon Name="mRibbon" DockPanel.Dock="Top">
<r:Ribbon.Resources>
<r:RibbonGroupSizeDefinitionCollection x:Key="ViewLayout">
<r:RibbonGroupSizeDefinition>
<!-- Control sizes: L,L,L -->
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
</r:RibbonGroupSizeDefinition>
</r:RibbonGroupSizeDefinitionCollection>
</r:Ribbon.Resources>
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu>
<r:RibbonApplicationMenu.Command>
<r:RibbonCommand
Executed="OnCloseApplication"
LabelDescription="Application Button"
SmallImageSource="Images/SEL.ico"
LargeImageSource="Images/SEL.ico"
ToolTipTitle="SEL Network Management System"
ToolTipDescription="" />
</r:RibbonApplicationMenu.Command>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
<r:Ribbon.QuickAccessToolBar>
<r:RibbonQuickAccessToolBar CanUserCustomize="True">
</r:RibbonQuickAccessToolBar>
</r:Ribbon.QuickAccessToolBar>
<r:RibbonTab Label="View" MouseLeftButtonUp="RibbonTab_View_MouseLeftButtonUp">
<r:RibbonTab.Groups>
<r:RibbonGroup GroupSizeDefinitions="{StaticResource ViewLayout}">
<r:RibbonGroup.Command>
<r:RibbonCommand LabelTitle="Topology"/>
</r:RibbonGroup.Command>
<r:RibbonButton Command="{StaticResource LineTopologyCommand}"/>
<r:RibbonButton Command="{StaticResource PointToPointTopologyCommand}" />
<r:RibbonButton Command="{StaticResource PointToMultiPointTopologyCommand }" />
<r:RibbonButton Command="{StaticResource MultiToMultiTopologyCommand }" />
<r:RibbonButton Command="{StaticResource CesTopologyCommand }" />
<r:RibbonButton Command="{StaticResource AllTopologyCommand }" />
</r:RibbonGroup>
</r:RibbonTab.Groups>
</r:RibbonTab>
<r:RibbonTab Label="Home" MouseLeftButtonUp="RibbonTab_Home_MouseLeftButtonUp">
</r:RibbonTab>
<r:RibbonTab Label="Device Designer">
</r:RibbonTab>
<r:RibbonTab Label="Network Design">
</r:RibbonTab>
</r:Ribbon>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel.Resources>
<Style x:Name="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="theBorder" BorderBrush="Gray" BorderThickness="2"
CornerRadius="10" Padding="5" Background="{TemplateBinding Background}">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theBorder" Property="BorderBrush" Value="#333333"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theBorder" Property="Background" Value="#CCCCCC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Label Content="Number of Nodes"/>
<TextBox x:Name="NumNodes" HorizontalAlignment="Right" Margin="0,0,6.71,0" Width="30"/>
<Slider
x:Name="uiScaleSlider"
Width="78"
HorizontalAlignment="Left"
VerticalAlignment="Top"
ToolTip="Determines the UI scale factor."
Height="27"
Value=".1" Minimum=".5" Maximum="5"
Orientation="Horizontal"
Ticks="1"
IsSnapToTickEnabled="False"
TickFrequency="1"
TickPlacement="BottomRight"
AutoToolTipPlacement="BottomRight"
AutoToolTipPrecision="2" />
<Button Name="AddNodes" Content="Add Nodes" Margin="0,0,10,0"/>
<Button Name="Clear" Content="Clear" Margin="0,0,5,0"/>
</StackPanel>
<Grid VerticalAlignment="Stretch" x:Name="mainGrid" Margin="2,5,0,0" Height="390" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="0" Grid.RowSpan="2" Width="5" ResizeDirection="Columns" Grid.ColumnSpan="1" Height="Auto" ResizeBehavior="BasedOnAlignment" VerticalAlignment="Stretch"/>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<local:Graph x:Name="theGraphPanel" Background="#FFE7CEBF" Grid.Column="0" Grid.Row="0" Margin="2,2,2,2">
<local:Graph.LayoutTransform>
<ScaleTransform
CenterX="0" CenterY="0"
ScaleX="{Binding Path=Value, ElementName=uiScaleSlider}"
ScaleY="{Binding Path=Value, ElementName=uiScaleSlider}"
/>
</local:Graph.LayoutTransform>
</local:Graph>
</ScrollViewer>
<TabControl x:Name="mTabControl" Grid.Column="1" Grid.RowSpan="2" Margin="3,0,0,2">
<TabItem Name="Item1" Header="Circuit">
<TreeView>
<TreeViewItem Header="Ring1">
<TreeViewItem Header="Site 1">
<TreeViewItem Header="Node 1">
Data (#113)
</TreeViewItem>
<TreeViewItem Header="Node 2">
Data (#114)
</TreeViewItem>
<TreeViewItem Header="Node 3">
Data (#115)
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Site 2">
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Ring 2">
<TreeViewItem Header="Site 2">
<TreeViewItem Header="Node 1">
Data (#7)
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeView>
</TabItem>
<TabItem Name="Item2" Header="Inventory"></TabItem>
</TabControl>
<GridSplitter Grid.Row="1" ResizeDirection="Rows" ResizeBehavior="BasedOnAlignment" HorizontalAlignment="Stretch" Name="GridSplitter1" Height="5" VerticalAlignment="Top" />
</Grid>
</StackPanel>
</Window>
Yes, it is a control that doesn't shrink / grow vertically when the window is resized.
Since I was writing, I changed the height of the grid to auto, which when I launch the app, the grid, since it is the last control in the StackPanel, only takes up a fraction of the remaining space in the window when it is first displayed - maybe 80 out of 390. On row 0, column 0, I have a custom panel (GraphPanel) where I draw nodes in a circle. If I draw 20 nodes, then the cell sizes are appropriate, even to cover the entire screen when it is at its maximum. This solves the problem somewhat, although vertical scrolling does not work because I believe it has infinite height.
I would like the grid to display on screen the way it does when I set the size to 390 - the first line takes up 3 * the height of the remaining space and the second line takes up * the height. I guess what I'm trying to do is simulate an MDI setting. I want the aspect ratio to stay the same the first time I run the app (800 x 600) and then when I maximize it. From what I can tell, if the grid cells have no content, they will stay at their minimum and grow to any size when the content is equal to the overall height of the Auto grid. Perhaps I am trying to do something that is not possible.
Thanks for answers.
Why not just use nested grids
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="33"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="3"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="2" Grid.Row="0"
Height="Auto" Width="Auto" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<Grid Grid.Column="0" Margin="4,10,2,0" Grid.Row="0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource HeaderText}" FontSize="13" >Templates</TextBlock>
<ListBox Grid.Column="0" Grid.Row="1" FontSize="13" >
<ListBoxItem>
Blank
</ListBoxItem>
<ListBoxItem>
New from existing...
</ListBoxItem>
</ListBox>
</Grid>
<ListView Grid.Column="1" Style="{StaticResource MyView}" Grid.Row="0" Margin="2,10,2,0">
<ListViewItem>item1</ListViewItem>
</ListView>
<ListView Grid.Column="3" Style="{StaticResource MyView}" Grid.Row="0" Margin="2,10,4,0">
<ListViewItem>item1</ListViewItem>
</ListView>
<WrapPanel Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right">
<Button Height="22" Width="60">Create</Button>
<Button Height="22" Width="60">Cancel</Button>
</WrapPanel>
</Grid>