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

为了实现这一目标，请在 LayoutRoot 中嵌套另一个 Grid，然后使用该嵌套网格作为主网格。然后将两行设置为自动。

 <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 来实现它，但这是一种作弊）。