I have a grid and I am trying to put both vertical and horizontal GridSplitters. It's my main grid and I would like it to be as fluid as possible.
On my second definition I get "Missing Grid.Column setter for non-first child"
I've found loads of documentation on implementing one or the other. I have found nothing suggesting that I can do both. But, our industry is made of people wanting to push functionality.
Here is my XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="50*"></RowDefinition>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"></GridSplitter>
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch"></GridSplitter>
You need to set Grid.Column for grid splitters and also you need
HorizontalAlignment="Stretch" -> for horizontal splitter
VerticalAlignment="Stretch" -> for Vertical splitter
so your code looks like --
<GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3" VerticalAlignment="Stretch"></GridSplitter>
<GridSplitter Grid.Row="1" Height="5" Grid.ColumnSpan ="3" HorizontalAlignment="Stretch"></GridSplitter>
ResizeHehavior="PreviousAndNext" needs to be added to allow proper adjustment of both columns and rows. See below for my sample.
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
<RowDefinition Height="50*"></RowDefinition>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="1" Width="5" Grid.RowSpan ="3"
VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext">
</GridSplitter>
<GridSplitter Grid.Row="1" Height="5" Grid.ColumnSpan ="3"
HorizontalAlignment="Stretch" ResizeBehavior="PreviousAndNext">
</GridSplitter>
<Button Grid.Row="0" Grid.Column="0" Content="1,1" FontSize="30"/>
<Button Grid.Row="2" Grid.Column="0" Content="3,1" FontSize="30"/>
<Button Grid.Row="0" Grid.Column="2" Content="1,3" FontSize="30"/>
<Button Grid.Row="2" Grid.Column="2" Content="3,3" FontSize="30"/>
</Grid>
You can set the direction as follows:
<GridSplitter ResizeDirection=”Rows”/>
or
<GridSplitter ResizeDirection=”Columns”/>
However, when you set Alignment to either Horizontal or Vertical, the default ResizeDirection=”Auto” will most likely choose a fitting resize direction.
Related
I have a simple wpf application where I want to remove one column and have the remaining (in column 2) fill the window when ctrl+space is pressed. I've looked into keybinding and commands, but I can't figure this one out.
Code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="268" MinWidth="188" MaxWidth="346"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" Height="64" Width="5"/>
<Grid Grid.Row="0" Grid.Column="2"/>
<Label Grid.Row="0" Grid.Column="0" Content="Collections" FontFamily="Noto Sans" Foreground="#FF9B9B9B" FontSize="16" Name="TESTTEST" />
<Button Content="Add" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Right" Grid.ColumnSpan="2" Margin="0,7,3,0" />
</Grid>
<StatusBar Grid.Row="1" Background="#FF151515" Foreground="#FF636363" BorderBrush="#FF1D1D1D"/>
</Grid>
the code below is a small snippet of a big wpf Window I am using in my Project. It produces the linked wpf Window.
I am wondering why my last grid column is so wide. I am expecting that the width of the last column depends on the width of the button, because the column width is set to "Auto".
If I remove the columnspan of the StackPanel the column width will be correct but then the CheckBoxes are not aligned to right side.
I hope you have understood my problem. My aim is, that the last column is as small as possible, the checkboxes are at the right side and the rest stays at it is.
Because this snippet is part of a bigger wpf window I cannot remove any grid rows or columns.
Thank you very much for your help.
Best regards.
WPF Window
<Window x:Class="TestProject.Window1"
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"
d:DesignHeight="152.429" d:DesignWidth="403">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Image Grid.Column="0"
Grid.Row="2"/>
<StackPanel Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="2">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
You can put a grid inside another grid.
Here is the code that will help you achieve your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Grid Name="GridInsideAGrid"
Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" />
<StackPanel Grid.Column="1">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
</Grid>
I'm developing a resolution independent application in WPF. I am using mahapps metro controls in my application. I have a grid which is divided into rows and columns in * and 4 TextBoxes are occupying specific rows and columns in that grid.
The problem is that the TextBox is not occupying the row as in the bottom border of
Textbox is not visible but when I change style to x:Null the problem disappears. Is this a problem specific to metro TextBox?. I tried VerticalAlignment = "Stretch" but this does'nt help.
Also the bottom part is visible in higher resolution like 1440 X 900 but not in 1366 X 768. What am I missing?
<Grid Background="Azure">
<Grid.RowDefinitions>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="18.4210*"/>
<RowDefinition Height="4.8157*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0"
Grid.RowSpan="12"
Grid.Column="0"
Grid.ColumnSpan="3">
<Border BorderBrush="Black"
BorderThickness="1"/>
</Grid>
<TextBox x:Name="txt_1"
Controls:TextBoxHelper.Watermark="Textbox 1"
Style="{x:Null}"
Grid.Row="2"
Grid.Column="1"/>
<TextBox x:Name="txt_2"
Controls:TextBoxHelper.Watermark="Textbox 2"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="4"
Grid.Column="1"/>
<TextBox x:Name="txt_3"
Controls:TextBoxHelper.Watermark="Textbox 3"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="6"
Grid.Column="1"/>
<TextBox x:Name="txt_4"
Controls:TextBoxHelper.Watermark="Textbox 4"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
Grid.Row="8"
Grid.Column="1"/>
<Grid Grid.Row="10"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32.5*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="32.5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_add"
Content="Add"
Grid.Row="8"
Grid.Column="1"
Click="btn_add_Click"/>
</Grid>
<StackPanel Background="#C0F368"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3">
</Grid>`
i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>
I want a layout like VS 2008. In which I want two columns and second columns is again split into two.
I done that in the xaml mentioned below, but the GridSplitter is not visible vertically ( which split two columns).
I want both the GridSplitters to be resizable. One GridSplitter resizes the Left Hand Pane and Right Hand Pane and another GridSplitter resizes the subgrid's top pane and right pane..
The Second GridSplitter is working through this XAML but I am not able to produce XAML code that Splits the Right hand Pane and Left hand pane..
Pleas Help!!
<Window x:Class="AlarmUI_2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Grid.Column="0" ResizeDirection="Auto"
Grid.RowSpan="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>
</Window>
Change your vertical Splitter to
<GridSplitter Grid.Column="0" Width="5" ResizeDirection="Auto"
Grid.RowSpan="1"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"/>
This will be much better way to use GridSplitter
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Background="Gray" HorizontalAlignment="Stretch"/>
<ListBox Grid.Row="2" Background="Violet">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>
The GridSplitters should probably be on their own row/column in the grid, not sharing a cell with the other controls.
Your gridsplitter is behind the other controls that's why you can't see it. You can either move it to the bottom in your XAML file (so it is added last) or use the Panel.ZIndex attached property. Additionally you have to set the width for the splitter correctly correctly:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
<GridSplitter Grid.Column="0" ResizeDirection="Columns"
Grid.RowSpan="1" Width="5"
HorizontalAlignment="Right"/>
</Grid>
I have acheived the functionality, the XAML is mentioned below:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" >
<TextBlock FontSize="35" Foreground="#58290A"
TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter HorizontalAlignment="Right" ResizeDirection="Columns" Width="5" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Background="Red">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
<GridSplitter Grid.Row="1" Height="5" Background="Gray"
VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>World</ListBoxItem>
</ListBox>
</Grid>
</Grid>