C# – How to pin one control below another in Silverlight

csilverlight-2.0

I have a project that uses a DataGrid with a custom template so that I can add a special row to the bottom of the data rows. I would like this special row to be pinned under the last row but not as part of the ScrollViewer, such that it remains pinned under the last row until the bottom of the special row hits the bottom of the data grid, then I would like the rows region to size to the space inbetween and scroll accordingly, with the special row always visible.

So far, I have my special row as part of the ScrollViewer along with the RowsPresenter. Both the presenter and the special row are in auto-sized rows of a Grid within the ScrollViewer, with the ScrollViewer in a star-sized grid row so that the scrollbar will appear when it runs out of space. How do I get from this, where the rows and special row scroll together to where I want to be, where the rows scroll, but the special row is pinned at the bottom and always visible?

Although my example uses a DataGrid, I am sure this can be simplified down to just a scrollable element of varying height, and a control pinned beneath it. So far, I imagine I need a Canvas rather than a Grid to host my ScrollViewer and companion special row, with some logic to adjust heights and positions when the ScrollViewer grows (if I can detect that), but I haven't yet tried this. Is there a better way or is the Canvas approach the best one available?

Best Answer

I was able to solve this by using a Grid with two auto-sized rows; a row for the DataGrid and a row for my pinned row. I then monitor the sizing of the Grid and, upon resizing, look to see if the Grid's ActualHeight is greater than the screen real-estate it is given to occupy. If it is, I change the DataGrid's row to star-sized, which results in the pinned row appearing pinned to the bottom of the parent control and the DataGrid displaying a scrollbar for its rows. I change the row back to auto-sizing when more space is made available.

This would obviously work for any scenario where one row must always be on screen but must also be pinned to the bottom of another.

The pinning code looks something like this:

RowDefinition row = this.mainGrid.RowDefinitions[0];
if (row.Height.GridUnitType == GridUnitType.Auto)
{
    if (this.mainGrid.ActualHeight > this.ActualHeight)
    {
        row.Height = new GridLength(1, GridUnitType.Star);
    }
}
else
{
    if (this.dataGrid.DesiredSize.Height < row.ActualHeight)
    {
        row.Height = GridLength.Auto;
    }
}

Related Solutions

C# – How to copy the contents of one stream to another

From .NET 4.5 on, there is the Stream.CopyToAsync method

input.CopyToAsync(output);

This will return a Task that can be continued on when completed, like so:

await input.CopyToAsync(output)

// Code from here on will be run in a continuation.

Note that depending on where the call to CopyToAsync is made, the code that follows may or may not continue on the same thread that called it.

The SynchronizationContext that was captured when calling await will determine what thread the continuation will be executed on.

Additionally, this call (and this is an implementation detail subject to change) still sequences reads and writes (it just doesn't waste a threads blocking on I/O completion).

From .NET 4.0 on, there's is the Stream.CopyTo method

input.CopyTo(output);

For .NET 3.5 and before

There isn't anything baked into the framework to assist with this; you have to copy the content manually, like so:

public static void CopyStream(Stream input, Stream output)
{
    byte[] buffer = new byte[32768];
    int read;
    while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
    {
        output.Write (buffer, 0, read);
    }
}

Note 1: This method will allow you to report on progress (x bytes read so far ...)
Note 2: Why use a fixed buffer size and not input.Length? Because that Length may not be available! From the docs:

If a class derived from Stream does not support seeking, calls to Length, SetLength, Position, and Seek throw a NotSupportedException.

C# – How to include a custom row at the end of a DataGrid in Silverlight

I solved my problem last night in a flurry of inspiration. I notice that no one else has voted for this question so this answer may not be helpful to anyone, but just in case.

First of all, I combined my custom row control and RowsPresenter in a grid of two rows, each row sized to Auto. I then placed the grid inside a ScrollViewer and then sized the scroll viewer row to Star sizing. I did not add the VerticalScrollbar template part into my template as this only scrolls the RowsPresenter.

This gave me the exact behaviour I was looking for where a row is added and the custom row remains pinned to the bottom of the last data row. When the rows and custom row overflow off the end of the visible area, the scrollbar appears to allow scrolling while keeping the headers fixed in place.

Job done. I hope someone finds this helpful. Below is my ControlTemplate XAML.

<ControlTemplate TargetType="swcd:DataGrid" x:Key="DataGridTemplate">
    <Border
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">

        <Grid Name="Root" Background="{TemplateBinding Background}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <swcdp:DataGridColumnHeader Name="TopLeftCornerHeader" Grid.Column="0"/>
            <swcdp:DataGridColumnHeadersPresenter Name="ColumnHeadersPresenter" Grid.Column="1"/>
            <swcdp:DataGridColumnHeader Name="TopRightCornerHeader" Grid.Column="2"/>

            <ScrollViewer
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="1"
                Padding="0,0,0,0"
                BorderThickness="0,0,0,0"
                VerticalScrollBarVisibility="Auto">
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <swcdp:DataGridRowsPresenter Name="RowsPresenter" Grid.Row="0" />

                    <Border
                        Margin="1,1,1,1"
                        Padding="2,2,2,2"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Grid.Row="1">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <TextBlock
                                Grid.Row="0"
                                TextAlignment="Left"
                                TextWrapping="NoWrap"
                                Text="Add a new item using the lists below:" />

                            <mystuff:MySelectionControl
                                HorizontalContentAlignment="Stretch"
                                Grid.Row="1"
                                SelectionChanged="OnSelectionChanged"/>
                        </Grid>
                    </Border>
                </Grid>
            </ScrollViewer>

            <Rectangle Name="BottomLeftCorner" Grid.Row="3" Grid.ColumnSpan="2" />
            <Grid Grid.Column="1" Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Rectangle Name="FrozenColumnScrollBarSpacer" />
                <ScrollBar Name="HorizontalScrollbar" Grid.Column="1" Orientation="Horizontal" Height="18" />
            </Grid>
            <Rectangle Name="BottomRightCorner" Grid.Column="2" Grid.Row="3" />
        </Grid>
    </Border>
</ControlTemplate>

Best Answer

Related Solutions

C# – How to copy the contents of one stream to another

C# – How to include a custom row at the end of a DataGrid in Silverlight

Related Topic