none
ScrollViewer problem with DataGrid

    Domanda

  • Hi all,

     

    I've got the following databound DataGrid that has expandable lists as content. When you click the list it adds further rows to display the Serial Numbers. The problem I'm having is that the scrollviewer doesn't seem to work as it goes off the bottom of the window (as does the datagrid). What setting am I missing to have the scrollviewer working?

     

    <DockPanel Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" LastChildFill="True">
                                <Grid>
                                    <ScrollViewer Margin="3" DockPanel.Dock="Top">
                                        <DataGrid x:Name="datagridStockMovements" AlternatingRowBackground="#FFE2E2E2" AlternationCount="2" AutoGenerateColumns="False">                                        
                                            <DataGrid.Columns>
                                                <DataGridTextColumn Header="Manufacturer" MinWidth="200" Binding="{Binding Path=Manufacturer}" />
                                                <DataGridTextColumn Header="Model" MinWidth="200" Binding="{Binding Path=ModelName}" />
                                                <DataGridTemplateColumn Header="Quantity" MinWidth="200">
                                                    <DataGridTemplateColumn.CellTemplate>
                                                        <DataTemplate>
                                                            <DockPanel>
                                                                <TextBlock Text="{Binding Path=ListOfSerials.Count}" />
                                                                <TextBlock HorizontalAlignment="Right">+</TextBlock>
                                                            </DockPanel>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellTemplate>
                                                    <DataGridTemplateColumn.CellEditingTemplate>
                                                        <DataTemplate>
                                                                <ListBox ItemsSource="{Binding Path=ListOfSerials}" SelectedItem="0"   
                                                        IsSynchronizedWithCurrentItem="False"/>
                                                        </DataTemplate>
                                                    </DataGridTemplateColumn.CellEditingTemplate>
    
                                                </DataGridTemplateColumn >
                                            </DataGrid.Columns>
                                        </DataGrid>
                                    </ScrollViewer>
                                </Grid>
                            </DockPanel>
    

    Thanks, Jib.

     

    giovedì 8 dicembre 2011 13:59

Risposte

  • I think the scollviewer has a default verticalaligment of strech, so if you specifiy a height in the scollview it will stay where you want it.


    JP Cowboy Coders Unite!
    • Contrassegnato come risposta Jibrohni venerdì 16 dicembre 2011 12:30
    giovedì 8 dicembre 2011 16:33
  • Hi Jib,

    As Javaman said, it seems your ScrollViewer doesn't have an expected height so it goes off the bottom of the window.

    I guess the fifth row of the outer grid has a height of "Auto"? Change it to "*" or a fixed height/MaxHeight to limit the scrollviewer's size.

    You can also post the complete layout code if you still have troubles.

    Best regards,

     


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    • Contrassegnato come risposta Jibrohni venerdì 16 dicembre 2011 12:30
    venerdì 9 dicembre 2011 02:56

Tutte le risposte

  • I think the scollviewer has a default verticalaligment of strech, so if you specifiy a height in the scollview it will stay where you want it.


    JP Cowboy Coders Unite!
    • Contrassegnato come risposta Jibrohni venerdì 16 dicembre 2011 12:30
    giovedì 8 dicembre 2011 16:33
  • Hi Jib,

    As Javaman said, it seems your ScrollViewer doesn't have an expected height so it goes off the bottom of the window.

    I guess the fifth row of the outer grid has a height of "Auto"? Change it to "*" or a fixed height/MaxHeight to limit the scrollviewer's size.

    You can also post the complete layout code if you still have troubles.

    Best regards,

     


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    • Contrassegnato come risposta Jibrohni venerdì 16 dicembre 2011 12:30
    venerdì 9 dicembre 2011 02:56
  • Hi Jib,

    Just checking in to see if the information was helpful. Please let us know if you would like further assistance.

    Have a great day!


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    martedì 13 dicembre 2011 02:04
  • Thanks all - I've been away for the last 4 days or so, but will get a chance to try the suggestions this week and will post back. Really appreciate your help. Thanks,

     

    Jib

    martedì 13 dicembre 2011 14:07
  • Hi Jib,

    Thanks for the update. If you have any problems, feel free to let us know.

    Best regards,


    Min Zhu [MSFT]
    MSDN Community Support | Feedback to us
    mercoledì 14 dicembre 2011 06:02
  • Cheers all, it was just a matter of height/stretch settings.
    venerdì 16 dicembre 2011 12:34
  • I having the same issue with this setup. I have a DataGrid setup inside a ScrollViewer, the scrollbar shows up but with no actual scroll thumb.

    I've fooled around with different Height on the scrollviewer which only makes the scroll windows large/small. If it small the datagrid rows on the bottom just get cut off. I know it should be simple but as a newbie posting here is quicker than searching and trying.

    Thanks

                 mc:Ignorable="d" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
            d:DesignHeight="350" d:DesignWidth="550" >
     
        <UserControl.Resources>
            <DataTemplate x:Key="myBrowseButton">
                <Button Content="..." Click="Button_Click"/>
            </DataTemplate>
        </UserControl.Resources> 
     
        <Grid x:Uid="FileDrivesGrid" x:Name="FileDrivesGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition x:Uid="RowDefinition_62" Height="Auto" />
                <RowDefinition x:Uid="RowDefinition_62" Height="Auto" />
              </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
               <ColumnDefinition x:Uid="ColumnDefinition_51" Width="*" />
            </Grid.ColumnDefinitions>
     
            <GroupBox x:Uid="fdlabelGroup2" x:Name="fdlabelGroup2" Grid.Row="0" Grid.ColumnSpan="3">
                <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Label x:Uid="label32"  VerticalAlignment="Center" MaxHeight="50" Width="Auto" Margin="5,0,0,0" Content="File Drive Mappings"  FontWeight="Bold"               />
                    <TextBox x:Uid="label32"  MaxHeight="50" Width="Auto" Margin="5,0,0,5"
                                VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                         TextWrapping="Wrap" VerticalScrollBarVisibility="Visible"
                         AcceptsReturn="True" Text="This dialog allows you to define Gerber drive mappings to user folders."  />
                </StackPanel>
            </GroupBox>
     
            <GroupBox x:Uid="FileMappinggroup" x:Name="FileMappinggroup" Header="Mappings"  Grid.Row="1" Grid.ColumnSpan="3" MinHeight="25"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <ScrollViewer CanContentScroll="True" >
       <StackPanel Margin="5">
          <DataGrid x:Name="File_DataGrid" x:Uid="File_DataGridId" CanUserAddRows="False" CanUserDeleteRows="False" AutoGenerateColumns="False" HeadersVisibility="Column" 
                           SelectionMode="Single" ItemsSource="{Binding Path=FileEntries, UpdateSourceTrigger=PropertyChanged}">
             <DataGrid.Columns>
                            <DataGridTextColumn Header="Drive" CanUserSort="False" IsReadOnly="{Binding }"  Width="auto" Binding="{Binding Path=Drive, Mode=OneWay}"/>
                <DataGridTextColumn Header="Path" CanUserSort="False" Width="*" Binding="{Binding Path=Path, Mode=TwoWay}" IsReadOnly="{Binding }"/>
     	    <DataGridTemplateColumn Header="Browse" CellTemplate="{StaticResource myBrowseButton}"/>
             </DataGrid.Columns>
          </DataGrid>
       </StackPanel>
                </ScrollViewer>
            </GroupBox>
          
        </Grid>
     
    </UserControl>
    martedì 22 maggio 2012 22:32
  • This is how I've done it:

    <Grid x:Name="gridStockControlDisplay" DockPanel.Dock="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ScrollViewer Margin="3">
                                    <DataGrid x:Name="datagridStock" VerticalAlignment="Stretch" Margin="1" LoadingRow="datagridStock_LoadingRow" IsReadOnly="False" PreviewKeyDown="datagridStock_PreviewKeyDown">                                    
                                        <DataGrid.Columns>
                                        <DataGridTextColumn Header="Device Type" MinWidth="100" Binding="{Binding Path=DeviceType}" />
                                        <DataGridTextColumn Header="Make" MinWidth="100" Binding="{Binding Path=Manufacturer}" />
                                        <DataGridTextColumn Header="Model" MinWidth="100" Binding="{Binding Path=ModelNumber}" />
                                        <DataGridTextColumn Header="Machine Name" MinWidth="100" Binding="{Binding Path=MachineName}" />
                                        <DataGridTextColumn Header="Serial" MinWidth="100" Binding="{Binding Path=SerialNumber}" />
                                        <DataGridTextColumn Header="Name" MinWidth="100" Binding="{Binding Path=OwnerName}" />                                    
                                    </DataGrid.Columns>
                                </DataGrid>
                            </ScrollViewer>                        
                        </Grid>

    Hope it helps.
    venerdì 25 maggio 2012 07:34