WPF: Synchronizuj szerokość wszystkich elementów w ItemsControl

Question

Czy można dostosować szerokość wszystkich bloków TextBlock w WrapPanel do rozmiaru największej blokady TextBlock w WrapPanel? Końcowym rezultatem powinno być to, że szerokość kontrolki zawierającej "Niektóre dane" ma taką samą szerokość jak kontrolka zawierająca "Jeszcze więcej danych niż wcześniej". Dołączyłem do mojego początkowego kodu jako punkt wyjścia. Użyłem ciągów jako przykładu, ale dane i szablon kolekcji mogą być dowolne, więc nie mogę polegać na długości ciągu znaków.

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:System="clr-namespace:System;assembly=mscorlib" 
     xmlns:Collections="clr-namespace:System.Collections;assembly=mscorlib" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Collections:ArrayList x:Key="data"> 
      <System:String>Some data</System:String> 
      <System:String>Some more data</System:String> 
      <System:String>Even more data than before</System:String> 
     </Collections:ArrayList> 
    </Window.Resources> 
    <ItemsControl ItemsSource="{StaticResource data}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel></WrapPanel> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border Margin="5" BorderThickness="1" BorderBrush="Black"> 
        <TextBlock Text="{Binding}"></TextBlock> 
       </Border> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Window> 

A obraz pożądanego wyjścia:

Answer 1

Użyj wspólną siatkę rozmiar:

<ItemsControl ItemsSource="{StaticResource data}" Grid.IsSharedSizeScope="True"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel></WrapPanel> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto" SharedSizeGroup="ColumnSize" /> 
       </Grid.ColumnDefinitions> 
       <Border Margin="5" BorderThickness="1" BorderBrush="Black"> 
        <TextBlock Text="{Binding}"></TextBlock> 
       </Border> 
      </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

Wszystkie kolumny są gwarancją taką samą szerokość jak dzielą grupę size. Ponieważ są one rozmiaru auto, będą również rozmiaru do największego wystąpienia dowolnej zawartości siatki.

Answer 2

Musisz utworzyć własną niestandardową wersję wrappanel że pochodzi od wrappanel aby osiągnąć to, co chcesz. Normalnie na panelu niestandardowego trzeba nadpisać następujące 2 metody:

• MeasureOverride
• ArrangeOverride

W twoim przypadku trzeba measueoverride gdzie można iteracyjne nad elementami i dowiedzieć się, który z nich jest największy, a następnie użyj tego samego rozmiaru dla wszystkich elementów w aranżacji overover.

trochę więcej informacji na temat tworzenia panel niestandardowe: http://www.wpftutorial.net/CustomLayoutPanel.html

Answer 3

Możesz dodać HorizontalContentAlignment = Stretch i dodać UniformGrid w itemsPanel.

<Window.Resources> 
    <Collections:ArrayList x:Key="data"> 
     <System:String>Some data</System:String> 
     <System:String>Some more data</System:String> 
     <System:String>Even more data than before</System:String> 
    </Collections:ArrayList> 
</Window.Resources> 
<ListBox ItemsSource="{StaticResource data}" HorizontalContentAlignment="Stretch"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid IsItemsHost="True"></UniformGrid> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Border Margin="5" BorderThickness="1" BorderBrush="Black" > 
       <TextBlock Text="{Binding}" Width="{Binding 
      RelativeSource={RelativeSource TemplatedParent}, 
      Path=Width}"></TextBlock> 
      </Border> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 4

Jest to alternatywa dla niestandardowej sugestii panelu Philipa Stuycka, która może być bardziej zrozumiała dla danego scenariusza. (Jest to wprawdzie trochę hack.)

Możesz obliczyć długość struny, używając klasy FormattedText. Możesz więc powtórzyć ciągi i obliczyć maksymalną długość (zakłada to również, że znasz rodzinę i rozmiar czcionki). Następnie ogranicz szerokość bloków tekstu do maksymalnej szerokości. Chciałbym zapisać wartość szerokości w jednym własności na poziomie macierzystym, a następnie za pomocą RelativeSource wiązania:

<TextBlock Text="{Binding}" 
      Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, 
          Path=MaximumWidth}}" 
     /> 

(Wadą tego podejścia jest to, że w przypadku zmiany pozycji zbiórki, musisz przeliczyć MaximumWidth.)