I have a couple Grid's in my application and the memory usage goes from 70MB up to 300MB when I continuously resize the window (as in making it smaller, bigger, repeat).
There are no bindings or events in my application and I have already removed any Auto layout option I had for rows/columns.
Is this just normal because I have so many Grid's or is there something wrong with my layout?
Video: https://i.gyazo.com/e6292fa9b4e065bf1842c69cbd43b853.mp4
<Window x:Class="CanvasDrawTest.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:CanvasDrawTest"
mc:Ignorable="d"
Title="MainWindow"
Height="863"
Width="1443"
WindowStyle="SingleBorderWindow"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<!-- TopGrid -->
<RowDefinition />
<!-- MainGrid -->
<RowDefinition Height="30" />
<!-- FooterGrid -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="TopGrid" Grid.Row="0" Grid.Column="0">
<Menu>
<MenuItem Header="File">
<MenuItem Name="NewDiagramMenuItem" Header="New Diagram" Click="NewDiagramMenuItem_Click" />
</MenuItem>
</Menu>
</Grid>
<DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="0">
<Grid Name="MainGrid" DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75*"/>
<ColumnDefinition Width="643*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,0,0.333">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Gray" BorderThickness="0,0,0.4,0">
<Grid Name="LeftGrid" />
</Border>
<Grid Name="CenterGrid" Grid.Row="0" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="ContentGrid" Grid.Row="0" Grid.Column="1">
<TabControl Name="DocumentTabs" BorderThickness="0" />
</Grid>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Gray" BorderThickness="0,0.4,0,0">
<Grid Name="BottomGrid" />
</Border>
</Grid>
</Grid>
</Grid>
</DockPanel>
<Grid Name="FooterGrid" Grid.Row="2" Grid.Column="0">
<StatusBar Name="StatusBar" Height="30" />
</Grid>
</Grid>
</Window>
Related
I am trying to make a custom title bar for my window. I have a grid with buttons, that are all the same size, but they refuse to align right. Here is my XAML code:
<Window x:Class="EditorZero.MainWindow"
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:local="clr-namespace:EditorZero"
mc:Ignorable="d"
Title="EditorZero" Height="768" Width="1200" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True" ResizeMode="CanResize">
<Border BorderBrush="Black" BorderThickness="2px">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" Background="#343434">
<Grid Width="150px" Height="36px" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
</Canvas>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>
</Border>
</Window>
Remove the Canvas:
<Border BorderBrush="Black" BorderThickness="2px">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Width="150px" Height="36px" Background="#343434" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>
</Border>
Instead of wrapping inside a canvas, wrap it inside a grid.
I see that you have set a background to the canvas and that is why you are using it. So, apply the background to another Grid. Place your grid of interest inside that as shown below.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#343434">
<Grid Width="150px" Height="36px" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
<ColumnDefinition Width="50px"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0">X</Button>
<Button Grid.Column="1">[]</Button>
<Button Grid.Column="2">-</Button>
</Grid>
</Grid>
<Canvas Grid.Row="1" Background="#232323"></Canvas>
</Grid>
I am trying to dock the 2 buttons at the bottom of the window, so that they are always there when I resize the window. Obviously I am doing it wrong since it won't work. Here is my code. I have also seen from examples that some people uses the DockPanel.Dock on the controls and not the container itself. I can't do this for some reason. Using DockPanel.dock on the button gives an error.
My question is: How do I make the buttons (Or the stackPanel) dock at bottom?
<Window x:Class="MeditCal.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Top">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0">Date</Label>
<TextBox Grid.Row="1" Name="DateTxtBox" Background="WhiteSmoke"/>
<Label Grid.Row="2">Note</Label>
<TextBox Grid.Row="3" Name="noteTxtBox"
Background="WhiteSmoke"></TextBox>
</Grid>
<Popup Height="100" Width="100" Name="popUpWin" StaysOpen="false"
AllowsTransparency="True"
HorizontalAlignment="Center" PopupAnimation="Fade">
<Border BorderThickness="1" Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Record added" />
</StackPanel>
</Border>
</Popup>
<ListView Name="msgArea" Background="WhiteSmoke" MinHeight="150"
Height="138" />
</StackPanel>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="addButton" Content="Add" Grid.Column="0"
Grid.Row="1" />
<Button Name="getRecordsButton" Content="Get records"
Grid.Column="1" />
</Grid>
</StackPanel>
</DockPanel>
</DockPanel>
It isn't very clear what kind of layout you're trying to achieve. I would suggest you to remove the inner DockPanel and it's StackPanel child, because each of them only contains single child which is an indication that you don't need a panel wrapper there.
Something like this will make the Grid containing buttons placed at bottom, and the StackPanel fill remaining space in the DockPanel :
<DockPanel LastChildFill="True">
<Grid DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="addButton" Content="Add" Grid.Column="0" Grid.Row="1" />
<Button Name="getRecordsButton" Content="Get records" Grid.Column="1" />
</Grid>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0">Date</Label>
<TextBox Grid.Row="1" Name="DateTxtBox" Background="WhiteSmoke"/>
<Label Grid.Row="2">Note</Label>
<TextBox Grid.Row="3" Name="noteTxtBox" Background="WhiteSmoke"></TextBox>
</Grid>
<Popup Height="100" Width="100" Name="popUpWin" StaysOpen="false" AllowsTransparency="True"
HorizontalAlignment="Center" PopupAnimation="Fade">
<Border BorderThickness="1" Background="AliceBlue">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Record added" />
</StackPanel>
</Border>
</Popup>
<ListView Name="msgArea" Background="WhiteSmoke" MinHeight="150" Height="138" />
</StackPanel>
</DockPanel>
I have a page , here is the XAML . Think that the window has a TabControl , I create a tab -> frame -> page. The problem is that the two last DataGrids height is more that the page height! Any help appresiated! thanks.
<Page x:Class="pObjectDesigner"
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:local="clr-namespace:STUDIO_MANAGER_FRAMEWORK"
mc:Ignorable="d" x:Name="pObjectDesigner"
d:DesignHeight="750" d:DesignWidth="1050" MinWidth="500"
Title="pObjectDesigner">
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<local:ucMXMainToolBar Grid.Row="0" Allow_GoLeft="False" Allow_GoRight="False" x:Name="tlbToolBar" VerticalAlignment="Top" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" MinWidth="180"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TreeView x:Name="tlstObjects"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"/>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="0" x:Name="grdPages"
AutoGenerateColumns="True"
ColumnWidth="Auto"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
CanUserReorderColumns="True" />
<GridSplitter Grid.Row="1" HorizontalAlignment="Stretch"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="0.5*" MinWidth="150" />
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="0.5*" MinWidth="150"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0" x:Name="grdDataGrids"
AutoGenerateColumns="True"
ColumnWidth="Auto"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
CanUserReorderColumns="True"/>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<DataGrid Grid.Column="2" x:Name="grdModules"
AutoGenerateColumns="True"
ColumnWidth="Auto"
VerticalContentAlignment="Stretch"
HorizontalContentAlignment="Stretch"
CanUserReorderColumns="True"/>
</Grid>
</Grid>
</Grid>
</Grid>
</Page>
Hi in DataGrid use AttachedProperty ScrollViewer.VerticalScrollBarVisibility to Auto
<DataGrid **ScrollViewer.VerticalScrollBarVisibility="Auto"**
Similarlly you can set it for Horizontally .I hope this will help.
Here's my code (which isn't working btw):
<DockPanel MinWidth="776" Margin="13" LastChildFill="True" Height="522" VerticalAlignment="Top">
<Grid DockPanel.Dock="Top" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="*"/>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
...
</DockPanel>
When I vertically size the control everything just sticks to the top (which I want, except for the middle to stretch).
Thanks in advance!
If you can just stick to dock panels, you do something like the following:
<DockPanel LastChildFill="true">
<DockPanel DockPanel.Dock="Top" Height="70" />
<DockPanel DockPanel.Dock="Bottom" Height="150" />
<DockPanel DockPanel.Dock="Top"><!-- Expandable content here--></DockPanel>
</DockPanel>
You will have to remove some values from the dock panel LastChildFill="True", Height="522" VerticalAlignment="Top" are stopping the grid from sizing.
Try this:
<DockPanel MinWidth="776" >
<Grid DockPanel.Dock="Top" MinWidth="200">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="*"/>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Fill="Blue" Grid.Row="0" />
<Rectangle Fill="Green" Grid.Row="1" />
<Rectangle Fill="Red" Grid.Row="2" />
</Grid>
</DockPanel>
I would like to build a WPF window which uses an outer Grid to split the screen into 4 parts. In the lower right quadrant, I would like to embed another Grid which is larger than the grid cell. I have been looking for ways to add a ScrollViewer (or use the Grid.ScrollViewer properties) but no matter what I try the inner grid does not resize or display the scrollbars appropriately.
I suspect it has something to do with not wrapping the inner grid with the correct panel with the appropriate sizing (and resizing) behavior which would force the inner grid to honor the scrollbars, instead of simply rendering too big (and being clipped by the other window).
The hosting window is defined like this:
<Window x:Class="GridScrollTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GridScrollTest"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="OuterGrid">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:SSControl x:Name="Sheet"
Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" />
<Canvas Grid.Row="0" Grid.Column="0" Background="LightGreen" />
<Canvas Grid.Row="1" Grid.Column="0" Background="LightBlue" />
<Canvas Grid.Row="0" Grid.Column="1" Background="LightCoral" />
</Grid>
</Window>
And the referenced SSControl:
<UserControl x:Class="GridScrollTest.SSControl"
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"
Height="270" Width="600">
<ScrollViewer
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="CellGrid" ShowGridLines="False"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<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="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
</UserControl>
I do not know for sure, but after trying your code in Blend, I think your problem might be that you have set the ColumnDefinition.Width and RowDefinition.Height to Auto. Try setting them to * and remove the Height=270 and Width=600 for your user control. This way, the outer grid fills all the available space in the window, and the lower right cell has scroll bars.