when I press the Maximize button on my WPF app, all the controls therein expand perfectly horizontally, but they do not expand to fill the window vertically. I figure it Maximize handles it horizontally, it should handle it vertically as well. Should I be setting a property somewhere on each control? I can catch the Resize event, but it seems like a lot of work to go through all the controls and resize them vertically only.
Thank you for your help.
Can you show us some Xaml? Try setting the outer container to VerticalAlignment="Stretch"
The preview window cuts off some of the XAML, but shows up in the answer text box OK. Let me know if it comes across OK or not. The 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's 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>
Does the control in question shrink/grow vertically when you resize the window?
You're setting the Height attribute of the Grid to "390", which makes it fixed size vertically. If that's your "parent" control for everything else, they will key from that.
Yes, that is the control that doesn't shrink/grow vertically when I resize the window.
Since I wrote, I changed the grid height to auto, which, when I run my app, the grid, since it is the last control in the StackPanel, takes up only a portion of the remaining space in the window when it is first shown - maybe 80 of the 390. In row 0, column 0, I have a custom panel (theGraphPanel) where I draw nodes in a circle. If I draw say 20 nodes, that cell sizes appropriately, even to take up the entire screen when it is maximized. This somewhat solves the problem, although the vertical scrolling doesn't work because I believe it thinks it has infinite height.
I would like the grid to show up on the screen the way it does when I set the size to 390 - the first row taking up 3* the height of the remaining space and second row taking up * height. I guess what I am trying to do is simulate a MDI set up. I want the proportions to stay the same when I first start the app (800 x 600) and then when I maximize it. From what I can tell, unless the grid cells have content, they will stay at a minimum size and grow to whatever size the content is when the overall grid height is set to "Auto". Perhaps I am trying to do something that is not possible.
Thanks for the answers so far.
FYI. I ended up changing the Height of the grid to "Auto", and then when the SizeChanged event for the Window1 fired, I set the grid Height to the e.NewSize.Height minus the ActualHeights of the controls in the StackPanel that are above it. Not how I would like it to be, but so far the only solution I found that works.
Thanks.
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>