Динамически изменять количество столбцов в равномерной сетке внутри списка в зависимости от контекста - PullRequest
Новая
       23

Динамически изменять количество столбцов в равномерной сетке внутри списка в зависимости от контекста

0 голосов
/ 25 февраля 2020

У меня есть список, в котором я хочу установить столбцы в зависимости от контекста (размер изображения). Так что, если у меня есть большие изображения, то я хочу меньше столбцов. Если атрибут столбцов не задан, все работает нормально, но если у меня очень широкие изображения, растянуть слишком много. Если я установил minWidth или minHeight изображения, то не всегда будет работать нормально из-за разного размера изображения (в широких изображениях добавлено много пустых мест). Поэтому моя следующая идея - это программно установить количество столбцов в зависимости от размера изображения. Может быть, с привязкой, но я не знаю, как применить это к коду. 

<ListBox SelectionMode="Multiple" Grid.Column="0" x:Name="lvBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="2" HorizontalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White" Margin="0">
                                        <ContentPresenter/>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter TargetName="Border" Property="Background" Value="LightBlue"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
                            <Image Name="imageView" Source="{Binding ImageData}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="UniformToFill" />
                            <TextBlock Text="{Binding TimeStamp}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Вот проблема, когда атрибут столбцов в равномерной сетке не установлен, а изображения широкие. Изображения слишком малы (слишком много столбцов).

Wide Images

А вот проблема обычных изображений, и столбцы устанавливаются непосредственно в 2. Изображения слишком большой (недостаточно столбцов).

enter image description here

Есть идеи, как решить эту проблему? Как ограничить растягивание без установки жесткого кода minWidth или minHeight или как установить в C# число столбцов, зависит от размера изображения.

1 Ответ

0 голосов
/ 05 апреля 2020

Я нашел решение, которое работает для меня. Я добавляю ItemsPanelTemplate привязку следующим образом: 

<ItemsPanelTemplate>
  <UniformGrid Columns="{Binding Path=Cols}" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>

И я использую Уведомление об изменении свойства . Добавьте INotifyPropertyChanged к классу, и вот остаток кода: 

private int _cols = 1;
public bool Cols
{
  get => _cols;
}

public event PropertyChangedEventHandler PropertyChanged;
void RaisePropertyChanged(string propertyName)
{
  PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

RaisePropertyChanged(nameof(Cols));

Когда я вычисляю количество столбцов, я устанавливаю _cols и затем вызываю RaisePropertyChanged(nameof(Cols));

...