CODEWITHSUNDEEP
c#wpfxaml
user6189
user6189

Reputation: 673

Combination of ScrollViewer and Grid not working as expected

I defined the following DialogWindow:

<ui:DialogWindow x:Class="CodeElementRatingWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
        Title="CodeElementRatingWindow" Height="600" Width="800">
    <Grid Name="root">
        <Grid.RowDefinitions>
            <RowDefinition Height="60px"></RowDefinition>
            <RowDefinition Height="510px"></RowDefinition>
            <RowDefinition Height="30px"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
        <ScrollViewer MinHeight="510px">
            <Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="150"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>
        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
            <Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
        </Grid>
    </Grid>
</ui:DialogWindow>

The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.

I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?

Upvotes: 0

Views: 43

Answers (1)

Ayyappan Subramanian
Ayyappan Subramanian

Reputation: 5366

Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.

<Grid Name="root">
        <Grid.RowDefinitions>
            <RowDefinition Height="60px"></RowDefinition>
            <RowDefinition Height="510px"></RowDefinition>
            <RowDefinition Height="30px"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
        <ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
            <Grid  Name="ElementContainer">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="150"></ColumnDefinition>
                </Grid.ColumnDefinitions>
            </Grid>
        </ScrollViewer>
        <Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
            <Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
        </Grid>
    </Grid>

Upvotes: 1

Related Questions