locked
Scrollviewer in a scrollviewer RRS feed

  • Question

  • hello,


    I'm just struggling with a layout idea with scrollviewers. I would like to have a scrollviewer inside another scrollviewer.

      <ScrollViewer VerticalScrollBarVisibility="Auto">
            <Grid x:Name="LayoutRoot">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
    
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top">
                    <sdk:DataGrid Grid.Column="0" MinHeight="400" >
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn Header="Column 1"/>
                            <sdk:DataGridTextColumn Header="Column 2"/>
                            <sdk:DataGridTextColumn Header="Column 3"/>
                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>
    
                </ScrollViewer>
    
                <StackPanel Grid.Column="1">
                    <Button Content="Button 1" Margin="5"/>
                    <Button Content="Button 1" Margin="5"/>
                    <Button Content="Button 1" Margin="5"/>
                    <Button Content="Button 1" Margin="5"/>
                </StackPanel>
    
            </Grid>
        </ScrollViewer>

    In the above I've an overall scrollviewer for the whole display. inside that I've two columns. left column has a big datagrid, right as a list of buttons.

    The datagrid is also inside a scrollviewer.

    Ideally I'd like the outer scrollviewer to kick in only when there's not enough height for the buttons to fit in.

    When the table is too big for it's space, I'd like the inner scrollviewer that wraps the table to kick in.

    Currently it's always the outer scrollviewer that works no matter which element is oversize. How can I control / change that to make the inner one work when the table is too big?

    thanks! 

    Phil.


    Friday, November 9, 2012 12:42 PM

Answers

  • Hi pteare,

    >>Ideally I'd like the outer scrollviewer to kick in only when there's not enough height for the buttons to fit in.

    You need remove the MinHeight setting for your datagrid and set the LayoutRoot grid's height set to a value you want, when the height is not enough for the buttons, scroll bar shows.

    >>When the table is too big for it's space, I'd like the inner scrollviewer that wraps the table to kick in.

    You can do this by setting the height of the inner scrollviewer.

    You may try the code below, when the height of the datagrid bigger than 100, the inner scrollviewer wrap the table.

    <Grid x:Name="LayoutRoot" Background="White" Height="200">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid x:Name="grid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
    
                    <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" Height="100">
                       
                        <sdk:DataGrid Grid.Column="0"  x:Name="dg" ItemsSource="{Binding}">
                            
                            <sdk:DataGrid.Columns>
                                <sdk:DataGridTextColumn Header="Column 1" Binding="{Binding Name}"/>
                                <sdk:DataGridTextColumn Header="Column 2" Binding="{Binding Age}"/>
                                <sdk:DataGridTextColumn Header="Column 3" Binding="{Binding Male}"/>
                            </sdk:DataGrid.Columns>
                        </sdk:DataGrid>
    
                    </ScrollViewer>
    
                    <StackPanel Grid.Column="1">
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                        <Button Content="Button 1" Margin="5"/>
                    </StackPanel>
    
                </Grid>
            </ScrollViewer>
        </Grid>
    Best Regards.

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, November 12, 2012 11:48 AM
    Moderator