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

Теперь динамично, вы можете добавить больше деталей, и она будет адаптировать сетку на строках