具有动态边距高度的 XAML答案

【问题标题】：XAML with dynamic margin height具有动态边距高度的 XAML
【发布时间】：2015-04-21 09:18:51
【问题描述】：

我在 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>

给我：

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

类似这样的：

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

【问题讨论】：

标签： xaml windows-8

【解决方案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>

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

【讨论】：

很好的解决方案。但我认为您不需要按钮周围的所有网格。只需将 Grid.Row 直接应用于按钮即可。
它会起作用的。 Grid 为您提供更多控制权，这就是使用它的原因。
确实如此。太糟糕了UniformGrid 在 WinRT 中不可用，它非常适合这项工作。
不错的解决方案 - UI 保留在我喜欢的 UI 中。非常感谢罗希特！

【解决方案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;
    }
}

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

【讨论】：