Can't set specific column in Grid - c#

I've created a TabItem with a default layout that have 3 columns and one row. Inside the first column I've inserted a StackPanel and put inside another Grid that have 3 columns and 3 rows. Now the problem's that inside the second Grid I've created a GroupBox with a StackPanel and I've set Grid.Column="2" but the controls inside the GroupBox doesn't go in the second column of the second Grid and I don't know what am I doing wrong. This is my code:
<TabItem Header="Confronto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GroupBox Header="Informazioni Squadre" Height="Auto" Grid.ColumnSpan="3" Grid.RowSpan="3">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</GroupBox>
</Grid>
</StackPanel>
</Grid>
</TabItem>


As mentioned in the comment you can set Grid.Column and Grid.Row only on direct children of the Grid. Your inner Grid has only one direct child (GroupBox) and Grid.Column \ Grid.Row will work only on that element.
You can reverse the order and put inner Grid inside GroupBox. As a side not Grid.Column="2" will put it in the 3rd column of the inner Grid not the second (it's indexed from 0)
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<GroupBox Header="Informazioni Squadre" Height="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Grid.Column="2">
<Label Content="Inter" FontWeight="Bold"></Label>
<Canvas Height="75" Width="75" Background="Gray"></Canvas>
<Label Content="Italia" Margin="0,15,0,0"></Label>
<Label Content="Serie A" Margin="0,10,0,0"></Label>
<Label Content="97%" Margin="0,10,0,0"></Label>
</StackPanel>
</Grid>
</GroupBox>
</StackPanel>
</Grid>

Related

Saving a Grid filled with WindowsFormsHost containing DataVisualization.Charting charts to image

I am a beginner in WPF (and C# in XAML in general) and currently trying to save a Grid filled with WindowsFormsHosts (modified as given here for compatibility with ScrollViewer) in turn containing charts from DataVisualization.Charting to an image.
I've tried both of the answers to this question - using the Grid as the 'content' for the first answer - with no avail (saves a black image of the correct dimensions)
The snippet below is my current layout. Any XY problem challenges - such as a way to render DataVisualization.Charting charts without using WindowsFormsHost - are welcome, as I am very much a greenhorn. However the ScrollViewers are needed due to the size of the full Grid, and the entire Grid (including the area that needs to be scrolled to) must be saved in its entirety.
<TabControl x:Name="tabcontrol" Margin="5,0">
<TabItem Header="1" Width="30" Visibility="Hidden" Name="tabitem0">
<ScrollViewer Margin="5" CanContentScroll="False" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Name="Scroll">
<Grid x:Name="ChartGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<wpfrichtextbox:ScrollViewerWindowsFormsHost x:Name="Chart1" Visibility="Visible" Grid.Row="0" Grid.Column="1" Margin="0"
HorizontalAlignment="Center" VerticalAlignment="Center"/> //A DataVisualization.Charting chart contained in each WindowsFormsHost, repeated throughout Grid
</Grid>
</ScrollViewer>
</TabItem>
</TabControl>

C#/.xaml Having problem with WPF pages, grid vertical expansion

So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>

The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.

Nest columns inside of another column

I would like to nest a group of columns inside a greater container column. I was intending on using a grid for this but am open to suggestions. I would like the result to look as follows in that row 1 col 1 and row 2 col 1 have sub columns 1a, 1b, 1c, and, 1d.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="row0" Height="35"></RowDefinition>
<RowDefinition Name="row1" Height="20"></RowDefinition>
<RowDefinition Name="row2" Height="35"></RowDefinition>
<RowDefinition Name="row3" Height="35"></RowDefinition>
<RowDefinition Name="row4" Height="35"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="col0" Width="75"></ColumnDefinition>
<ColumnDefinition Name="col1" Width="400"></ColumnDefinition>
<ColumnDefinition Name="col2" Width="75"></ColumnDefinition>
</Grid.ColumnDefinitions>

Nested Grids do work, however ColumnSpan will keep your different columns lined up if you have dynamic content.
In my example below I created three new columns for the middle section.
Then for columns like row 0 col 1, I simply told it to span across 4 columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Name="row0" Height="35" />
<RowDefinition Name="row1" Height="20" />
<RowDefinition Name="row2" Height="35" />
<RowDefinition Name="row3" Height="35" />
<RowDefinition Name="row4" Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="col0" Width="75" />
<ColumnDefinition Name="col1" Width="75" />
<ColumnDefinition Name="col2" Width="125" />
<ColumnDefinition Name="col3" Width="125" />
<ColumnDefinition Name="col4" Width="75" />
<ColumnDefinition Name="col5" Width="75" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" />
<TextBox Grid.Row="1" Grid.Column="1" />
<TextBox Grid.Row="1" Grid.Column="2" />
<TextBox Grid.Row="2" Grid.Column="0" />
<TextBox Grid.Row="2" Grid.Column="4" />
<TextBox Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="4" />
</Grid>

Just add the another grid and add it to a certain grid cell on the parent container. (If nested is the way you want to go)
<Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>

Instead of nesting grids I suggest using only one grid and defining Grid.ColumnSpan="4" on the content of row0col1, row3col1 and row4col1.

How to create a horizontal gridsplitter within a sizable column

I'm trying to create a sizable column that contains also horizontal gridsplitter.
The code is XAML for WPF:
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Stretch"
Grid.Row="1" Grid.ColumnSpan="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>
I can create one of them separate. But I want both.
To make more grids in a form, I use the dockpanel. Maybe this isn't necessary, but if I don't it generates errors.
Where do I go wrong? Anyone has a clue?

Try this :
<DockPanel Name="dockPanel1" LastChildFill="True" >
<Grid Name="D1G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Content="Toppie" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G2" ShowGridLines="False" DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Content="Bottom" Grid.Column="1" Grid.Row="0" />
</Grid>
<Grid Name="D1G3" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="2" Background="#FFBCBCBC"/>
<DockPanel Name="dockPanel2" DockPanel.Dock="Left" Grid.Column="0">
<Grid Name="D2G1" ShowGridLines="False" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="1" ResizeBehavior="PreviousAndNext" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="#FFBCBCBC" Height="2"/>
<Label Content="D2Row0" Grid.Row="0" />
<!-- separator at Row1 -->
<Label Content="D2Row2" Grid.Row="2" />
</Grid>
</DockPanel>
</Grid>
</DockPanel>

DockPanel does not constrain height

I am trying to limit the height of a DockPanel (well the content acually) to the remaining UserControl Height with a ScrollViewer in it to scroll if its too big.
I have a window wich uses a ContentController to hold the different UserControls
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- 0 Menu -->
<RowDefinition Height="auto"/>
<!-- 1 Header -->
<RowDefinition Height="65"/>
<!-- 2 Content -->
<RowDefinition Height="*"/>
<!-- 3 Space -->
<RowDefinition Height="10"/>
<!-- 4 Status line -->
<RowDefinition Height="auto"/>
<!-- 5 Space -->
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<!--...-->
<ContentPresenter Content="{Binding Path=MainWindowContent}" Grid.Column="0" Grid.Row="2"/>
<!--...-->
</Grid>
</Window>
The UserControl wich I having trouble with is just a search for users and the output of the results. It does look like this:
<UserControl>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="25"/>
<RowDefinition Height="auto" />
<RowDefinition Height="10" />
<RowDefinition Height="auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- input fields -->
<DockPanel Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="6" LastChildFill="True" VerticalAlignment="Stretch" Background="{StaticResource PrimaryCorporateBrush}">
<TextBlock Style="{StaticResource HeadlineOutputLabel}" DockPanel.Dock="Top"/>
<Separator Opacity="0" Height="10" DockPanel.Dock="Top"/>
<TextBlock Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2RevertedVisibility}}" Margin="10" DockPanel.Dock="Top"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding Path=HasResult, Converter={StaticResource Bool2Visibility}}">
<ItemsControl ItemsSource="{Binding Path=Members}" VerticalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Tag="{Binding}">
<!-- Result Element -->
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
</Border>
</Grid>
<Grid Grid.Column="3" Grid.Row="1">
<!-- info display -->
</Grid>
</Grid>
</UserControl>
I intent to limit the Results ScrollViewer height to the remaining visible space of the window, and if the results exceed it to display a scrollbar. But right now the DockPanel keeps extending the ScrollViewer and nested ItemsControl height till all elements are placed but does NOT show the ScrollBar.
I am a bit lost here why it does that, shouldn't the DockPanel limit the Height to the visible space? tried it with putting buttons instead of ItemsControl, nothing no ScrollBar.

I found the solution!
Further up in the Grid structure there was a row set to "auto" instead of "*" and ScrollViewer seems to only function properly with latter.

Categories

Resources