Чистый подход XAML для равномерного распределения неизвестного количества детей в контейнере

Question

Предположим, у меня есть StackPanel (Ориентация = «Горизонтальная») с фиксированной шириной и переменная/неизвестность количество детей, как я могу рассказать все дети в XAML (не в коде), чтобы установить их ширину, равны и заполняют всю ширину StackPanel?

Это достаточно легко сделать с помощью сетки, когда вы знаете количество детей (просто использовать ColumnDefinitions с шириной = «*»), но я не знаю, как сделать это с панели (StackPanel, PivotHeaderPanel и т.д.) или списки (GridView, ListView и т. д.).

Answer 1

Согласно вашему описанию, вам нужна панель, подобная UniformGrid в WPF. UniformGrid предоставляет способ размещения контента в сетке, где все ячейки в сетке имеют одинаковый размер. Однако в UWP нет встроенного UniformGrid. Мы можем реализовать его самостоятельно или использовать стороннюю UniformGrid, как то, что в WinRTXamlToolkit.

Здесь, например, используется UniformGrid в WinRTXamlToolkit. Чтобы использовать WinRTXamlToolkit, мы можем установить его из nuget: WinRT XAML Toolkit for Windows 10.

Затем добавьте xmlns на странице, как:

xmlns:toolkit="using:WinRTXamlToolkit.Controls" 

После этого мы можем использовать UniformGrid как:

<toolkit:UniformGrid Rows="1" /> 

Здесь я установил Rows свойство 1 и Columns недвижимость до значения по умолчанию 0. Значение zero (0) для свойства Columns указывает, что подсчет столбца вычисляется на основе количества строк и количества видимых дочерних элементов, находящихся в Grid. Таким образом, все дети в этой UniformGrid будут помещены в одну строку, а поскольку это UniformGrid, все столбцы будут иметь одинаковую ширину.

Ниже приведен пример, который использует UniformGrid как ItemsPanel из GridView:

XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
     <GridView x:Name="MyGridView" Height="60"> 
      <GridView.ItemsPanel> 
       <ItemsPanelTemplate> 
        <toolkit:UniformGrid Rows="1" /> 
       </ItemsPanelTemplate> 
      </GridView.ItemsPanel> 

      <GridView.ItemContainerStyle> 
       <Style TargetType="GridViewItem"> 
        <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
       </Style> 
      </GridView.ItemContainerStyle> 

      <GridView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Background="Red"> 
         <TextBlock HorizontalAlignment="Center" FontSize="30" Text="{Binding }" /> 
        </StackPanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 
     <Button Click="Button_Click">Add a item</Button> 
    </StackPanel> 
</Grid> 

Code-за:

public sealed partial class MainPage : Page 
{ 
    private ObservableCollection<string> myList = new ObservableCollection<string> { "1", "2", "3", "4", "5" }; 
    private int i = 6; 

    public MainPage() 
    { 
     this.InitializeComponent(); 
     MyGridView.ItemsSource = myList; 
    } 

    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     myList.Add(i.ToString()); 
     i += 1; 
    } 
} 

И это выглядит следующим образом: