проблема макета silverlight xaml: сетка должна иметь возможность расти, но не за пределами экрана

Question

См. Следующий XAML:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" MinHeight="150">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <sdk:DataGrid x:Name="grid" VerticalScrollBarVisibility="Visible" />
        <Button x:Name="button" Grid.Row="1" Content="hello" VerticalAlignment="Top" HorizontalAlignment="Center" Click="button_Click" />
    </Grid>
</UserControl>

Соответствующий код:

public partial class MainPage : UserControl
{
    public class dataclass
    {
        public string data { get; set; }
    }

    ObservableCollection<dataclass> list;

    public MainPage()
    {
        InitializeComponent();
        grid.ItemsSource = list = new ObservableCollection<dataclass>();
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        for (var i = 0; i < 5; i++)
            list.Add(new dataclass
            {
                data = "hello" + i
            });
    }
}

Как это работает сейчас: сетка занимает всю высоту экрана минус высота кнопки. Когда добавлено слишком много новых элементов, вы начинаете сканирование. Положение кнопки никогда не меняется, она всегда внизу экрана.

Что бы я хотел: Сетка должна занимать как можно меньше места, поэтому, когда она пуста, должен быть виден только заголовок и кнопка сразу под ней. Когда добавлено слишком много элементов и кнопка уже находится в нижней части экрана, она больше не должна расти, а вместо этого начать прокрутку.

Если я поменяю местами два RowDefinition, то поначалу сетка мала, но растет бесконечно, отталкивает кнопку от экрана и никогда не начинает прокрутку. Как я могу сделать это красиво?

Answer 1

Чтобы добиться этого, вложите еще один Grid в LayoutRoot, а затем используйте эту вложенную сетку в качестве основной. Затем установите обе строки на Auto.

 <Grid x:Name="LayoutRoot" Background="White">
     <Grid x:Name="innerGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid x:Name="itemInTheFirstRow" Grid.Row="0" />
        <Button x:Name="itemInTheSecondRow" Grid.Row="1" />
     </Grid>
 </Grid>

Наконец, вам нужно отследить размер сетки и соответственно изменить правила определения размера. Этот код закрепления выглядит примерно так.

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

В моей реализации я обертываю этот код в метод UpdateRowPinning, который фактически использует диспетчер для вызова этого кода. Затем я вызываю UpdateRowPinning для событий изменения размера основной сетки и внутренней сетки, а также для добавления и удаления элементов из сетки и операций развертывания / сворачивания групп сетки. Это гарантирует, что второй ряд ведет себя должным образом, сидя у основания первого ряда до тех пор, пока экран не заполнится, а затем переместившись над ним.

Мой ответ здесь также охватывает эту проблему. Я искал решение только для XAML, но это просто не представляется возможным (если вы не напишете некоторые расширения XAML, тогда вы сможете реализовать его с XAML, но это обман).