Datagrid with Dynamic Size (GridSplitter) in Scrollviewer

3 replies. Latest Post by Dander on July 3, 2009.

(0)

Dander

Member

0 points

3 Posts

Datagrid with Dynamic Size (GridSplitter) in Scrollviewer

07-02-2009 4:42 AM |

Hi,

I got a problem with a Gridsplitter in a Scrollviewer. If I drag&drop the Gridsplitter a DataGrid stays larger than the GridColum where it is

placed.

The Code is divided in 3 Parts

#################################
####### Part1 (MainGrid):
#################################

1    <ScrollViewer x:Name="MainScroller"
2                      HorizontalAlignment="Stretch"
3                      VerticalAlignment="Stretch"
4                      HorizontalScrollBarVisibility="Auto"
5                      VerticalScrollBarVisibility="Auto"
6                      Padding="0" Margin="0">
7           
8          
9            <Grid x:Name="LayoutRoot"
10           Background="#FF2B2B2B" ms:ScrollViewer.HorizontalScrollBarVisibility="Visible">
11   
12               <!-- COLUMN DEFINITION start-->
13               <Grid.ColumnDefinitions>
14                   <ColumnDefinition MinWidth="1280" Width="*" />
15               </Grid.ColumnDefinitions>
16   
17   
18               <!-- ROW DEFINITION start-->
19               <Grid.RowDefinitions>
20                   <RowDefinition MinHeight="600" Height="*"/>
21               </Grid.RowDefinitions>
22              
23               <Grid x:Name="innerLayout"
24               Grid.Row="1"
25               Background="#FFF7F7F7"
26               Margin="7,0">
27   
28                   <!-- COLUMN DEFINITION end-->
29                   <Grid.ColumnDefinitions>
30                       <ColumnDefinition MaxWidth="104" MinWidth="104" />
31                       <ColumnDefinition Width="*" />
32                       <ColumnDefinition MaxWidth="104" MinWidth="104" />
33                   </Grid.ColumnDefinitions>
34                   <!-- COLUMN DEFINITION end-->
35   
36                   <Grid.RowDefinitions>
37                       <RowDefinition Height="22" />
38                       <RowDefinition Height="27" />
39                       <RowDefinition Height="*" />
40                   </Grid.RowDefinitions>
41           </Grid>
42   
43         </Grid>
44   
45   </ScrollViewer>

#################################
####### Part2 (ModuleGrid):
####### This Part is placed in Column 1 and row 2 of the InnerLayout
#################################

1     <Grid x:Name="ContentGrid" Canvas.ZIndex="500" Margin="0,-24,0,0" >
2            <Grid.ColumnDefinitions>
3                <ColumnDefinition MinWidth="273" Width="*" />
4                <ColumnDefinition MinWidth="799" Width="5*" />
5            </Grid.ColumnDefinitions>
6    
7            <Grid Grid.Column="1">
8                <Grid.RowDefinitions>
9                    <RowDefinition Height="24" />
10                   <RowDefinition Height="*" />
11               </Grid.RowDefinitions>
12           </Grid>
13   
14   
15           <controls:GridSplitter Margin="-4,24,0,0"
16                                  Grid.Column="1"
17                                  Grid.Row="2"
18                                  Style="{StaticResource GridSplitterActive}"/>
19          
20       </Grid>

#################################
####### Part 3 (Content):
####### This Part is placed in Column 0 and row 1 of the Grid in Part 2
#################################

1    <Grid HorizontalAlignment="Stretch" x:Name="LayoutRoot">
2            <Grid.RowDefinitions>
3                <RowDefinition Height="135" />
4                <RowDefinition Height="*" />
5            </Grid.RowDefinitions>
6    
7         
8            </StackPanel>
9          
10                  
11           <!-- Search Results DataGrid-->
12          
13           <data:DataGrid x:Name="SearchResultsList"
14                      ItemsSource="{Binding Path=ListRecords,Mode=TwoWay}"
15                      AutoGenerateColumns="False"
16                      CanUserReorderColumns="True"
17                      CanUserSortColumns="True"
18                      IsReadOnly="True"
19                      SelectionMode="Single"
20                      MouseLeftButtonUp="SearchResultsList_MouseLeftButtonUp"
21                      HorizontalScrollBarVisibility="Auto"
22                      VerticalScrollBarVisibility="Auto"
23                      Grid.Row="1"
24                      Margin="0,20,0,0"
25                      Style="{StaticResource SearchResultsStyle}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
26                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
27               <data:DataGrid.Columns>
28                   <data:DataGridTextColumn Header="Nachname" Binding="{Binding LastName}" CanUserReorder="False" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}" CellStyle="{StaticResource DataGridCellStyle1}" />
29                   <data:DataGridTextColumn Header="Vorname" Binding="{Binding FirstName}" CanUserReorder="False" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
30                   <data:DataGridTextColumn Header="Straße" Binding="{Binding Street1}" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
31                   <data:DataGridTextColumn Header="PLZ" Binding="{Binding Zip}" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
32                   <data:DataGridTextColumn Header="Ort" Binding="{Binding City}" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
33                   <data:DataGridTextColumn Header="Land" Binding="{Binding Country}" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
34                   <data:DataGridTextColumn Header="Telefon" Binding="{Binding Phone1}" HeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"  CellStyle="{StaticResource DataGridCellStyle1}"/>
35               </data:DataGrid.Columns>
36   
37           </data:DataGrid>
38    
39       </Grid>

Now the problem is, if i resize the Columns via the GridSplitter the DataGrid breaks out of the grid. This happens since i have included
the scrollviewer. without the scrollviewer everything works fine.

thanks
David

milind.s...

Member

389 points

72 Posts

Re: Datagrid with Dynamic Size (GridSplitter) in Scrollviewer

07-02-2009 5:34 AM |

Hi David,

Please do not add your comments within xamls to explain the structure, also make sure not to include the line numbers in pasted code.

people who want to reproduce your problem at their end should be able to just copy entire code & paste in their file. They should not have to waste time in removing any numbers or comments.

I faced same challenge, & not able to reproduce the issue. Please, explain the structure with help of just different colored rectangles in side each other. Also elaborate on the experience which you want to achieve.

Please "Mark as Answer" if this answered your question.

Sr. User Experience Consultant
SpadeWorx Software Services,
Pune, India.

Dander

Member

0 points

3 Posts

Re: Datagrid with Dynamic Size (GridSplitter) in Scrollviewer

07-02-2009 7:03 AM |

Hi,

im working with regions, so the code above is cutted out of 3 files.

The Layout looks like this:

I have tried to reproduce the error in just one file:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
	x:Class="testerror.MainControl"
	xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	>
	
	
    <ScrollViewer x:Name="MainScroller"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  HorizontalScrollBarVisibility="Auto" 
                  VerticalScrollBarVisibility="Auto" 
                  Padding="0" Margin="0">
        
       
        <Grid x:Name="LayoutRoot" 
		Background="#FF2B2B2B" ShowGridLines="True">

            <!-- COLUMN DEFINITION start-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="1280" Width="*" />
            </Grid.ColumnDefinitions>
            <!-- COLUMN DEFINITION end-->

            <!-- ROW DEFINITION start-->
            <Grid.RowDefinitions>
                <RowDefinition MinHeight="600" Height="*"/>
            </Grid.RowDefinitions>
            
            <Grid x:Name="innerLayout" 
			Grid.Row="1" 
			Background="#FFF7F7F7" 
			Margin="7,0"
			ShowGridLines="True">

                <!-- COLUMN DEFINITION end-->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="104" MinWidth="104" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition MaxWidth="104" MinWidth="104" />
                </Grid.ColumnDefinitions>
                <!-- COLUMN DEFINITION end-->

                <Grid.RowDefinitions>
                    <RowDefinition Height="22" />
                    <RowDefinition Height="27" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>


                  
   <Grid x:Name="ContentGrid" Canvas.ZIndex="500" Margin="0,-24,0,0" Grid.Column="1" Grid.Row="2" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="273" Width=".2*" />
            <ColumnDefinition MinWidth="799" Width=".8*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="24" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
        </Grid>

        <!-- Search & Widget Column -->
        <Grid Grid.Column="0" Margin="4,24,4,0" HorizontalAlignment="Stretch" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
			
			<data:DataGrid x:Name="SearchResultsList" 
				
                   ItemsSource="{Binding Path=ListRecords,Mode=TwoWay}" 
                   AutoGenerateColumns="False"
                   CanUserReorderColumns="True" 
                   CanUserSortColumns="True" 
                   IsReadOnly="True"
                   SelectionMode="Single"
                  
                   HorizontalScrollBarVisibility="Auto"
                   VerticalScrollBarVisibility="Auto"
				   Grid.Row="0" 
				   Margin="0,20,0,0"
                  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top"
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Header="Nachname" Binding="{Binding LastName}" CanUserReorder="False" />
                <data:DataGridTextColumn Header="Vorname" Binding="{Binding FirstName}" CanUserReorder="False" />
                <data:DataGridTextColumn Header="Straße" Binding="{Binding Street1}" />
                <data:DataGridTextColumn Header="PLZ" Binding="{Binding Zip}" />
                <data:DataGridTextColumn Header="Ort" Binding="{Binding City}" />
                <data:DataGridTextColumn Header="Land" Binding="{Binding Country}" />
                <data:DataGridTextColumn Header="Telefon" Binding="{Binding Phone1}" />
				
            </data:DataGrid.Columns>
			
		</data:DataGrid>

        </Grid>


        <controls:GridSplitter Margin="-4,24,0,0" 
                               Grid.Column="0" 
                               Grid.Row="2" 
                               />
        
    </Grid>



            
                <!-- Main Layout Elements end-->
            </Grid>
            <!-- COLUMN DEFINITION end-->

            <!-- INNERGRID end-->


        </Grid>
    </ScrollViewer>
</UserControl>

if you run this project and you drag the gridsplitter fast to the right, and fast back to the left again, you will notice a little gray line. i think, thats
the same problem, im having in my project

thanks
david

Dander

Member

0 points

3 Posts

Re: Datagrid with Dynamic Size (GridSplitter) in Scrollviewer

07-03-2009 3:59 AM |

Hi,

I got this fixed, by setting a MaxWidth to the ContentGrid. But now there is another Problem, the DataGrid expands the first column of the ContentGrid.
It should start with a width of 273 (with the MinWidth). Is there any way to get this done ? The Column starts with the needed width of the DataGrid.

thanks
david