Растянуть / установить плитки для размещения в ListView - PullRequest
Новая
       19

Растянуть / установить плитки для размещения в ListView

0 голосов
/ 23 января 2011

Я реализовал пользовательское представление для ListView, используя код, основанный на http://msdn.microsoft.com/en-us/library/ms748859.aspx

В «TileView» как настроить ListView для растягивания каждой плитки в соответствии с доступным пространством. Т.е. в ListView помещается ровно 3 столбца, даже если ListView меняет размер (т. Е. Размер каждой плитки всегда должен быть 1/3 ширины). 

<l:PlainView x:Key="tileView" ItemTemplate="{StaticResource centralTile}" />

<DataTemplate x:Key="centralTile">
  <StackPanel>
    <Grid HorizontalAlignment="Center">
      <Image Source="{Binding XPath=@Image}" />
    </Grid>
    <TextBlock Text="{Binding XPath=@Name}" />
    <TextBlock Text="{Binding XPath=@Type}" />
  </StackPanel>
</DataTemplate>

Edit:

У меня есть ListView для отображения x плиток с использованием приведенного выше и изменения следующего XAML в этом примере: 

  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
                   RelativeSource={RelativeSource 
                                   AncestorType=ScrollContentPresenter}}"
                   ItemWidth="{Binding (ListView.View).ItemWidth,
                   RelativeSource={RelativeSource AncestorType=ListView}}"
                   MinWidth="{Binding (ListView.View).ItemWidth,
                   RelativeSource={RelativeSource AncestorType=ListView}}"
                   ItemHeight="{Binding (ListView.View).ItemHeight,
                   RelativeSource={RelativeSource AncestorType=ListView}}"/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <UniformGrid Columns="3"/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>

Это именно то, что мне нужно, где, если ListView изменяет размеры, столбцы также изменяют размер.

Теперь мне нужно выяснить, как динамически изменять столбцы UniformGrid:)

1 Ответ

0 голосов
/ 23 января 2011

У меня есть два соображения по теме:

  1. Ваш шаблон данных должен соответствовать всем расположенным прямоугольникам.Я имею в виду StackPanel со свойствами Высота / Ширина = 100 не годится.Вместо этого используйте Grid с пропорциональными строками или DockPanel.
  2. Нет стандартной панели, отвечающей вашим требованиям.Я думаю, что вы должны написать свой собственный наследник от класса Panel (или WrapPanel) со свойством ColumnCount.Затем переопределите методы ArrangeOverride и MeasureOverride и предоставьте правильные прямоугольники в соответствии с ColumnCount.

Это рабочая демонстрация, но вы должны улучшить MyPanel в соответствии с вашими требованиями: 

public class MyPanel : WrapPanel
{
    public int ColumnCount
    {
        get 
        { 
            return (int)GetValue(ColumnCountProperty); 
        }
        set 
        {
            SetValue(ColumnCountProperty, value); 
        }
    }

    public static readonly DependencyProperty ColumnCountProperty =
        DependencyProperty.Register("ColumnCount", 
            typeof(int), 
            typeof(MyPanel), 
            new FrameworkPropertyMetadata(
                0, 
                FrameworkPropertyMetadataOptions.AffectsRender));

    protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
    {
        if (this.InternalChildren.Count == 0)
        {
            return finalSize;
        }

        var arrangedWidth = this.ActualWidth;
        var width = this.ActualWidth / this.ColumnCount;
        var x = 0.0; 
        var y = 0.0;
        var columnCounter = 0;
        for(int i = 0; i<this.InternalChildren.Count; i++)
        {
            if (columnCounter == this.ColumnCount)
            {
                y += width;
                x = 0;
                columnCounter = 0;
            }

            columnCounter++;
            var ch = this.InternalChildren[i];
            ch.Arrange(new Rect(x, y, width, width));
            x = x + width;
        }

        return finalSize; 
    }

    protected override System.Windows.Size MeasureOverride(System.Windows.Size constraint)
    {
        if (this.InternalChildren.Count == 0)
        {
            return this.DesiredSize;
        }

        var supposedSize = base.MeasureOverride(constraint);
        var width = this.ActualWidth / this.ColumnCount;
        var rowsCount = this.InternalChildren.Count / this.ColumnCount + (this.InternalChildren.Count % this.ColumnCount > 0 ? 1 : 0);
        for (int i = 0; i < this.InternalChildren.Count; i++)
        {
            var ch = this.InternalChildren[i];
            ch.Measure(new Size(width, width));

        }
        double totalWidth = this.InternalChildren[0].DesiredSize.Width * this.ColumnCount;
        return new Size(totalWidth, rowsCount * width); 

    }
}

Использование в XAML: 

   <ListView ItemsSource="{Binding Items}" 
              ItemTemplate="{StaticResource Template}"
              >
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <self:MyPanel ColumnCount="3"  />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
...