juergen d
juergen d

Reputation: 204746

Content of ScrollViewer won't extend

I have the following Window

pic

Now if I try to pull down the Gridsplitter I can only as far as the blue Grid fits in the visible Window. But when sliding down the splitter I want a scrollbar to appear and be able to pull it down to the botton until the blue Grid is not visible any more.

<Window.Content>
    <Grid>        
        <Grid.RowDefinitions>
            <RowDefinition Height="25"/>
            <RowDefinition />
            <RowDefinition Height="25" />
        </Grid.RowDefinitions>
        <Menu Name="MainMenu" Grid.Row="0">                
        </Menu>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition  />
            </Grid.ColumnDefinitions>
            <DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto">
                <views:MyView></views:MyView>
            </DockPanel>
            <GridSplitter Grid.Column="0" Width="6"></GridSplitter>
            <Grid Grid.Column="1" >
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <Grid VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="7" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <views:ListView x:Name="Yellow" ></views:ListView>
                        </Grid>
                        <GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
                        <Grid Grid.Row="2" >
                            <ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
                        </Grid>
                    </Grid>
                </ScrollViewer>
            </Grid>
        </Grid>
        <StatusBar x:Name="StatusBar" Grid.Row="2">                
        </StatusBar>
    </Grid>
</Window.Content>

What do I have to change here?

Upvotes: 1

Views: 435

Answers (3)

Rachel
Rachel

Reputation: 132548

Move your ScrollViewer further down so it wraps the blue ContentControl in row 2, and ensure the ContentControl has a Height or MinHeight set.

ScrollViewers allow their child to take up as much space as they want, and only shows scrollbars if the child object gets larger than the ScrollViewer size.

Also as a side note, you can remove some of those extra Grid's in your layout to make it easier to read. Here's an example with a bunch of them removed, and the first one being replaced with a DockPanel :)

<DockPanel>        
    <Menu Name="MainMenu" DockPanel.Dock="Top" Height="25" /> 
    <StatusBar x:Name="StatusBar" DockPanel.Dock="Bottom" Height="25"/>  

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="6" />
            <ColumnDefinition  />
        </Grid.ColumnDefinitions>

        <views:MyView x:Name="Green" Grid.Column="0" />
        <GridSplitter Grid.Column="1" Width="6" />
        <Grid Grid.Column="2" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="7" />
                 <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <views:ListView x:Name="Yellow" Grid.Row="0" />
            <GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
            <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
                <ContentControl x:Name="Blue" MinHeight="400"/>
            </ScrollViewer>
        </Grid>
    </Grid>      
</DockPanel>

Upvotes: 2

Yahya
Yahya

Reputation: 511

Hope you find a better solution XD as mine use a code behind

I used the DragDelta event of the control GridSplitter and enlarge the height of the grid so the ScrollBar can be activated

The xaml Code:

        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200" />
                <ColumnDefinition  />
            </Grid.ColumnDefinitions>
            <DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
                <local:BusyUserControl Width="200" Height="200"/>
            </DockPanel>
            <GridSplitter ResizeDirection="Rows" Grid.Column="0" Width="6"></GridSplitter>
            <ScrollViewer x:Name="MainScrollViewer" VerticalScrollBarVisibility="Auto" Grid.Column="1" >
                <Grid x:Name="MainGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="7" />
                        <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid >
                            <views:ListView x:Name="Yellow" ></views:ListView>
                        </Grid>
                        <GridSplitter  Grid.Row="1" Height="7" ResizeBehavior="PreviousAndNext"  HorizontalAlignment="Stretch" DragDelta="GridSplitter_DragDelta" />
                        <Grid Grid.Row="2">
                            <ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
                        </Grid>
                </Grid>
            </ScrollViewer>
        </Grid>

The code Behind:

    private void GridSplitter_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        if (e.VerticalChange > 1500 || e.VerticalChange > -15000) return;

        if (e.VerticalChange > 0 || Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility))
        {
            this.MainGrid.Height = this.MainGrid.ActualHeight + e.VerticalChange;
        }
        e.Handled = true;
    }

Note: When the scrollbar is no more visible I stop shrinking the grid (keep the grid stretshed) that’s the meaning of the condition

Visibility.Visible.Equals(MainScrollViewer.ComputedVerticalScrollBarVisibility)

Hope this could help you and thx for the question :)

Upvotes: 1

Yahya
Yahya

Reputation: 511

if you want to display a vertical scroll bar for each part in the splitted grid try the following code :

<Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition  />
                </Grid.ColumnDefinitions>
                <DockPanel x:Name="Green" Grid.Column="0" Width="Auto" Height="Auto" Background="#FF0CFA8F" >
                    <local:BusyUserControl Width="200" Height="200"/>
                </DockPanel>
                <GridSplitter Grid.Column="0" Width="6"></GridSplitter>
                <Grid Grid.Column="1" >
                    <Grid VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="7" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="0" >
                            <Grid >
                                <views:ListView x:Name="Yellow" ></views:ListView>
                            </Grid>
                        </ScrollViewer>
                        <GridSplitter Grid.Row="1" Height="7" HorizontalAlignment="Stretch" />
                        <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="2" >
                            <Grid Grid.Row="2" >
                                <ContentControl Content="{Binding LoadedControl}" x:Name="Blue" />
                            </Grid>
                        </ScrollViewer>
                    </Grid>
                </Grid>
            </Grid>

otherwise clarify your need

Upvotes: 0

Related Questions