I am trying to get 2 buttons to be beside each other and evenly take up the entire row underneath the "main area".
I seem to be missing something
Thanks!
<Grid Background="Transparent" Margin="0" Opacity=".8">
<Border Name="MaskBorder" Grid.RowSpan="3">
<Border Name="MainBorder" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="811*"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<!--Body-->
<Grid Grid.ColumnSpan="4">
<Border Name="BodyBackground" Background="White" />
</Grid>
<!-- Main Area for Content -->
<Grid Name="ContentGrid" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="55" />
<RowDefinition Height="811*" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<DockPanel LastChildFill="True" Grid.Row="1">
<Grid DockPanel.Dock="Bottom">
<Button Height="55"></Button>
<Button Height="55"></Button>
</Grid>
<Border Background="Black" />
</DockPanel>
</Grid>
</Grid>
</Border>
</Border>
</Grid>
You have the buttons on the same grid cell. Try:
<Grid DockPanel.Dock="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Height="55"></Button>
<Button Grid.Column="1" Height="55"></Button>
</Grid>
you can use StackPanel Instead of DockPanle like this:
<StackPanel Orientation="Vertical">
<Button Height="55"/>
<Button Height="55"/>
</StackPanel>
Related
I have defined the following XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="200" />
<ColumnDefinition MinWidth="500" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Margin="2,2,5,2">
<GroupBox Header="Computer">
<DockPanel>
<ComboBox MinWidth="100" Name="cmbComputerNames" IsEditable="True" DockPanel.Dock="Left" HorizontalAlignment="Stretch" Width="auto" />
<Button Content="Connect" Name="bConnect" Width="65" HorizontalAlignment="Right" />
</DockPanel>
</GroupBox>
</StackPanel>
<Button Grid.Column="1" Content="Two" Margin="1,2,5,2" />
<Button Grid.Column="2" Content="Three" Margin="1,2,2,2" />
<GridSplitter Height="100" Width="4" Grid.Column="0"/>
<GridSplitter Height="100" Width="4" Grid.Column="1"/>
</Grid>
So, the left grid column is resizable. I want the "Connect" button to remain right-aligned and with same width. The combobox however, should be left-aligned and the width should grow as the column is resized, so the distance to the connect button remains the same.
Doesn't work:
Can anyone tell me how I can achieve that?
Since this is too long for a comment
Replace DockPanel with Grid and try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GroupBox Header="Some text here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ComboBox MinWidth="100"/>
<Button Grid.Column="1" Content="A button" Margin="5"/>
</Grid>
</GroupBox>
<GridSplitter Grid.Column="1" Grid.RowSpan="2" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" Width="10"/>
<Button Content="some button" Grid.Column="2"/>
</Grid>
#Andy, if you could produce an answer then I will delete mine.
I think that we can use multi layout on a windows with XAML.
So I try to create a window like this:
I want to create an ListView in left and it can be resized. The Grid and Textbox at the left side will be fit to the right grid.
I have tried to use other layouts, StackPanel, DockPanel.
How can I create a resizable grid
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ToolBar Name="toolBar" Grid.Row="0">
<Button Name="btnLoad" Width="Auto" Height="25" ToolTip= Click="btnLoad_Click" VerticalAlignment="Bottom">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/reload.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
<TextBlock>Load/Reload</TextBlock>
</StackPanel>
</Button>
<Button Name="btnSave" Width="Auto" Height="25" Click="btnSave_Click">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/save.png" Width="16" Height="16" HorizontalAlignment="Left" Margin="0 0 5 0"/>
<TextBlock>Save</TextBlock>
</StackPanel>
</Button>
</ToolBar>
<ComboBox Name="cbTypeOfShop" Grid.Row="1" Margin="5 5 5 5"/>
<Grid Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<GridSplitter Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="5"/>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DataGrid Name="dtgListItem" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</DataGrid>
<TextBox Grid.Row="1" Height="100" TextWrapping="Wrap" AcceptsReturn="True" Text="1231231231 22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221231231231231231123123123123123123123123123123123123123123123123123" />
</Grid>
</Grid>
<StatusBar Grid.Row="3" Height="25" HorizontalAlignment="Stretch">
<TextBlock Name="abc">abc</TextBlock>
</StatusBar>
</Grid>
But when I resize the left side.
try this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
As you can see, I've simply created a Grid with two equally wide columns, with a 5 pixel column in the middle.
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>
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 am creating a Silverlight application that should take up the width of the user's screen. This application has a horizontal row that greets the user. Then, two columns below it. The right column is always a fixed size. I want the left column to take up any remaining space. In an attempt to accomplish this, I am using the following XAML:
<Grid x:Name="layoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="greetingGrid" Margin="0,0,0,8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Welcome " />
<TextBlock x:Name="usernameTextBlock" />
</StackPanel>
</Grid>
<Grid x:Name="contentGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="leftGrid" HorizontalAlignment="Stretch">
<Border x:Name="leftBorder" BorderBrush="Black" Height="250">
<!-- Insert Wrap Panel of Images --!>
</Border>
</Grid>
<Grid x:Name="rightGrid" Width="100" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="How would you like to view the images?" />
<ComboBox x:Name="optionComboBox">
<ComboBoxItem Content="Name" />
<ComboBoxItem Content="Date" />
</ComboBox>
</StackPanel>
</Border>
</Grid>
</Grid>
</Grid>
Oddly, the two lower columns are split evenly in size. How do I make the left column take up all remaining space?
Thank you!
<Grid.ColumnDefinitions>
<ColumnDefinition width="*" />
<ColumnDefinition width="250"/>
</Grid.ColumnDefinitions>
Use * for the grid column to take the rest of the available space. Keep in mind that the parent container also needs to take the whole area to make it work!
You can specify the widths of the columns rather than on your "rightGrid", eg:
<Grid x:Name="greetingGrid" Margin="0,0,0,8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Welcome " />
<TextBlock x:Name="usernameTextBlock" />
</StackPanel>
</Grid>
<Grid x:Name="contentGrid" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100px" />
</Grid.ColumnDefinitions>
<Grid x:Name="leftGrid" HorizontalAlignment="Stretch" Background="Fuchsia">
<Border x:Name="leftBorder" BorderBrush="Black" Height="250">
</Border>
</Grid>
<Grid x:Name="rightGrid" Grid.Column="1" HorizontalAlignment="Right" Margin="8,0,0,0">
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="How would you like to view the images?" />
<ComboBox x:Name="optionComboBox">
<ComboBoxItem Content="Name" />
<ComboBoxItem Content="Date" />
</ComboBox>
</StackPanel>
</Border>
</Grid>