XAML 具有动态边距高度

Question

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

这个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>

给我：

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

像这样：

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

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>

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

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;
    }
}

现在是动态的，你可以添加更多的项目，它会适应网格行

XAML 具有动态边距高度

XAML with dynamic margin height

xaml

windows-8