Создание п число кнопок переменного размера в контейнере

Question

мне нужно создать пользовательский интерфейс следующим образом (вид контроля облако тегов)

• п количество кнопок (Count будет определяться во время выполнения)
• Каждый кнопка будет иметь различную ширину на основе его содержания
• Max 3 кнопки в строке

Я попытался следующие вещи

• VariableSizedWrapGrid, как ItemsPanel из GridView (Это требует RowSpan и ColumnSpan быть указано, которые не осуществима в ширине определяется во время выполнения)
• StackPanel с горизонтальной ориентацией (Все кнопки были расположены в одной строке)

Любые мысли?

Answer 1

Here - отличный блог-блог о том, как создать WrapPanel на основе ваших требований.

Я создал TagsPanel, основанный на этом блоге, чтобы использовать его в одном из моих приложений. Ключ должен переходить к элементам и получать фактический размер и устанавливать его на основе доступной ширины панели. Смотри ниже.

public class TagsPanel : Panel 
{ 
    protected override Size MeasureOverride(Size availableSize) 
    { 
     // Just take up all of the width 
     Size finalSize = new Size { Width = availableSize.Width }; 
     double x = 0; 
     double rowHeight = 0d; 
     foreach (var child in Children) 
     { 
      // Tell the child control to determine the size needed 
      child.Measure(availableSize); 

      x += child.DesiredSize.Width; 
      if (x > availableSize.Width) 
      { 
       // this item will start the next row 
       x = child.DesiredSize.Width; 

       // adjust the height of the panel 
       finalSize.Height += rowHeight; 
       rowHeight = child.DesiredSize.Height; 
      } 
      else 
      { 
       // Get the tallest item 
       rowHeight = Math.Max(child.DesiredSize.Height, rowHeight); 
      } 
     } 

     // Add the final height 
     finalSize.Height += rowHeight; 
     return finalSize; 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     Rect finalRect = new Rect(0, 0, finalSize.Width, finalSize.Height); 

     double rowHeight = 0; 
     foreach (var child in Children) 
     { 
      if ((child.DesiredSize.Width + finalRect.X) > finalSize.Width) 
      { 
       // next row! 
       finalRect.X = 0; 
       finalRect.Y += rowHeight; 
       rowHeight = 0; 
      } 
      // Place the item 
      child.Arrange(new Rect(finalRect.X, finalRect.Y, child.DesiredSize.Width, child.DesiredSize.Height)); 

      // adjust the location for the next items 
      finalRect.X += child.DesiredSize.Width; 
      rowHeight = Math.Max(child.DesiredSize.Height, rowHeight); 
     } 
     return finalSize; 
    } 
} 

и использовать его в GridView, как показано ниже.

<GridView ItemsSource="{Binding tags}" > 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Button Content="{Binding ''}" Margin="5"/> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <local:TagsPanel/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
</GridView> 

Answer 2

В принципе, VariableSizedWrapGrid относится ко всем своим дочерним элементам одинакового размера. Вы можете использовать ColumnSpan и RowSpan для расширения области дочернего элемента.

Другой способ - создать пользовательский элемент управления WrapPanel, а затем использовать вместо VariableSizedWrapGrid. Это будет определять результат, как вы описали.