具有动态边距高度的XAML

Question

我在寻找XAML中的动态边距或灵活空间之类的东西，却找不到东西。

这个XAML：

        <HubSection VerticalContentAlignment="Stretch">
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Products>" Foreground="#FF464646" FontSize="36" Margin="0,-50,0,0"></TextBlock>
                    <StackPanel VerticalAlignment="Center">
                        <Button Background="#FF00AEFF" Width="260" Height="60" Content="Button1"></Button>
                        <Button Background="#FFFF8000" Width="260" Height="60" Content="Button2"></Button>
                        <Button Background="#FFDE0101" Width="260" Height="60" Content="Button3"></Button>
                        <Button Background="#FF6300DA" Width="260" Height="60" Content="Button4"></Button>
                        <Button Background="#FF973E00" Width="260" Height="60" Content="Button5"></Button>
                        <Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6"></Button>
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </HubSection>

给我：

但按钮之间应有边距，以根据可用的屏幕高度填充空间。

这样的事情：

是否有像动态边距高度的东西？

Answer 1

使它成为网格，它将像魅力一样工作。

   <HubSection VerticalContentAlignment="Stretch">
        <DataTemplate>
            <Grid VerticalAlignment="Stretch" Background="Yellow">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <TextBlock Text="Products>" Foreground="#FF464646" FontSize="36" Grid.Row="0"></TextBlock>
                <Grid VerticalAlignment="Stretch" Background="Pink" Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6" Grid.Row="6"></Button>
                    </Grid>
                    <Grid Grid.Row="1">
                        <Button Background="#FF00AEFF" Width="260" Height="60" Content="Button1" ></Button>
                    </Grid>
                    <Grid Grid.Row="2">
                        <Button Background="#FFFF8000" Width="260" Height="60" Content="Button2" Grid.Row="2"></Button>
                    </Grid>
                    <Grid Grid.Row="3">
                        <Button Background="#FFDE0101" Width="260" Height="60" Content="Button3" Grid.Row="3"></Button>
                    </Grid>
                    <Grid Grid.Row="4">
                        <Button Background="#FF6300DA" Width="260" Height="60" Content="Button4" Grid.Row="4"></Button>
                    </Grid>
                    <Grid Grid.Row="5">
                        <Button Background="#FF973E00" Width="260" Height="60" Content="Button5" Grid.Row="5"></Button>
                    </Grid>

                </Grid>
            </Grid>
        </DataTemplate>
    </HubSection>

这将解决您的问题。我添加了颜色，只是你知道哪个网格正在使用哪个空格。

Answer 2

如果你不想硬编码XAML并保持XAML干净，能够添加项目，我创建了SpaceChildrenBehavior

<Grid  Background="AliceBlue" >
            <i:Interaction.Behaviors>
                <local:SpaceChildrenBehavior/>
            </i:Interaction.Behaviors>
            <Button Margin="0,10,0,0" Background="#FF00AEFF" Width="260" Height="60" Content="Button1"></Button>
            <Button Background="#FFFF8000" Width="260" Height="60" Content="Button2"></Button>
            <Button Background="#FFDE0101" Width="260" Height="60" Content="Button3"></Button>
            <Button Background="#FF6300DA" Width="260" Height="60" Content="Button4"></Button>
            <Button Background="#FF973E00" Width="260" Height="60" Content="Button5"></Button>
            <Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6"></Button>
        </Grid>

这是XAML（非常干净）

和行为

public class SpaceChildrenBehavior : DependencyObject, IBehavior
{
    public DependencyObject AssociatedObject { get; private set; }

    public Grid AssociatedGrid;
    EventHandler<object> layoutupdated= null;
    public void Attach(DependencyObject associatedObject)
    {
        AssociatedObject = associatedObject;

        AssociatedGrid = associatedObject as Grid;

        layoutupdated = async (s, e) =>
        {
            if (AssociatedGrid.ActualHeight > 0)
            {
                AssociatedGrid.LayoutUpdated -= layoutupdated;
                await Task.Delay(100);
                AssociatedGrid.RowDefinitions.Clear();
                int i = -1;

                foreach (var child in AssociatedGrid.Children)
                {
                    AssociatedGrid.RowDefinitions.Add(new RowDefinition()
                    { Height = new GridLength(1, GridUnitType.Star) });
                    Grid.SetRow(child as FrameworkElement, ++i);
                }
                AssociatedGrid.LayoutUpdated += layoutupdated;
            }

        };
        AssociatedGrid.LayoutUpdated += layoutupdated;

    }

    public void Detach()
    {
        AssociatedGrid.LayoutUpdated -= layoutupdated;
    }
}

现在是动态的，您可以添加更多项目，它将调整网格行