Problem with DataGrid and ScrollViewer

Aug 26, 2009 at 2:09 PM

HI, I Got a problem using the DataGrid within a scrollviewer.

My window got a ScrollViewer containing 1 grid that contain 2 rows and the last row contain another grid that contains 2 rows and the last contain the datagrid control

Note that the last datagrid column width is "*"

The datagrid will stretch to a "non sense" width. What I want is that the "grid" will take the remaining space like the other control

The item source is bind to a generic dictionary collection

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
	x:Class="TestScrollViewer.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480">
    <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Label Content="Customer Name" Grid.Column="0" />
            <TextBox TextWrapping="Wrap" Grid.Column="1" />
            
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <TextBox Text="Other TextBox" TextWrapping="Wrap"/>
                
                <dg:DataGrid Grid.Row="1" x:Name="Dg">
                    <dg:DataGrid.Columns>
                        <dg:DataGridTextColumn Binding="{Binding Key, Mode=OneWay}" Width="Auto" />
                        <dg:DataGridTextColumn Binding="{Binding Value, Mode=OneWay}" Width="*" />
                    </dg:DataGrid.Columns>
                </dg:DataGrid>
            </Grid>
        </Grid>
    </ScrollViewer>
</Window>

I try with some stack panel, do the same thing.

Any clues ?

Thanks'

 

 


 

Sep 8, 2009 at 2:14 PM

I Found my solution.

  1. Put the grid in a Border
  2. Bind the width to the grid to the actualwidth of the border  
    <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            <Label Content="Customer Name" Grid.Column="0" />
            <TextBox TextWrapping="Wrap" Grid.Column="1" />
            
            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <TextBox Text="Other TextBox" TextWrapping="Wrap"/>
                <Border x:Name="bdGrid" Grid.Row="1">
                    <dg:DataGrid x:Name="Dg" Width="{Binding ElementName=bgGrid, Path=ActualWidth}" >
                        <dg:DataGrid.Columns>
                            <dg:DataGridTextColumn Binding="{Binding Key, Mode=OneWay}" Width="Auto" />
                            <dg:DataGridTextColumn Binding="{Binding Value, Mode=OneWay}" Width="*" />
                        </dg:DataGrid.Columns>
                    </dg:DataGrid>
                </Border>

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