Как мне лучше стилизовать ListBox изображений в WPF?

Question

Я связал List из моего кода в ListBox, но у меня возникают трудности при стилизации внешнего вида, чтобы получить то, что я хочу. Я хотел бы показать до 8 изображений одновременно, но не более того без прокрутки вниз. Когда размер окна изменится, я бы хотел, чтобы размеры изображения масштабировались вместе с ним, но при этом показ не должен превышать 8. Вот мой текущий XAML:

<ListBox ItemsSource="{Binding PictureImagesList}">
    <ListBox.Template>
        <ControlTemplate TargetType="ListBox">
            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ListBox.Template>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4" HorizontalAlignment="Center" VerticalAlignment="Top" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}" >
                        <Grid Background="{TemplateBinding Background}">
                            <Border HorizontalAlignment="Center" VerticalAlignment="Center"
                        BorderBrush="{TemplateBinding BorderBrush}">
                                <ContentPresenter />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" Value="Yellow" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Вот изображение того, что производит этот XAML. Как видите, изображения слишком велики, и мы видим только верхнюю половину второго ряда. Если я возлюсь с полем ListBoxItem, я могу уменьшить их, но это не совсем идеально, так как работает, только если разрешение экрана остается прежним.

Answer 1

Установите размеры изображения одинаковыми и используйте вместо этого WrapPanel:

        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Margin="5" >
                        <Image Source="{Binding}" Stretch="Uniform" Width="400" Height="400"/>
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

В качестве альтернативы, если вам нужно фиксированное количество столбцов, не указывайте размеры изображения вообще, а вместо этого используйте UniformGrid:

        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border Margin="5" >
                        <Image Source="{Binding}" Stretch="Uniform" />
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="3" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

ОБНОВЛЕНИЕ: Сейчас я немного растерялся, чтобы точно понять, что именно вы пытаетесь сделать, размещаемые вами изображения не соответствуют вашему описанию. Если вы хотите, чтобы панели были квадратными, а изображения масштабировались до них равномерно с тонкой рамкой вокруг них, то вам нужно будет сделать несколько вещей:

1) измените свой ListBoxItem ControlTemplate на Border с прозрачным фоном и ContentPresenter внутри него. Это гарантирует, что ваша желтая рамка не заполняет всю рамку, а остальная часть рамки не выделяется при выборе, но вы все равно можете щелкнуть в любом месте на ней, чтобы выбрать ее.

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

Это должно сделать работу:

<Style TargetType="{x:Type ListBox}" x:Key="PictureListBoxStyle">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid Margin="5">
                    <Border Padding="5" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Background" Value="Transparent" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}" Value="True">
                                        <Setter Property="Background" Value="Yellow" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <Image Source="{Binding}" Stretch="Uniform" />
                    </Border>
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <UniformGrid Columns="3" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}" >
                <Border Background="Transparent">
                    <ContentPresenter  />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Если это по-прежнему не так, вам необходимо более четко определить ваши требования.

Answer 2

Вы можете использовать UniformGrid в качестве ItemsPanel с соответствующими HorizontalAlignment и VerticalAlignment. Также удалите лишний элемент Border из DataTemplate.

<ListBox ItemsSource="{Binding PictureImagesList}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Width="200" Height="200" Margin="5" Source="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Обновление: чтобы желтая граница выделения располагалась непосредственно вокруг изображения, используйте стиль ListBoxItem, как показано ниже. Чтобы изображения масштабировались до (доли) полной ширины ListBox, добавьте соответствующий ControlTemplate.

<ListBox ItemsSource="{Binding PictureImagesList}">
    <ListBox.Template>
        <ControlTemplate TargetType="ListBox">
            <ScrollViewer HorizontalScrollBarVisibility="Disabled"
                          VerticalScrollBarVisibility="Auto">
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ListBox.Template>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}" >
                        <Grid Background="{TemplateBinding Background}">
                            <Border HorizontalAlignment="Center" VerticalAlignment="Center"
                                    BorderThickness="5"
                                    BorderBrush="{TemplateBinding BorderBrush}">
                                <ContentPresenter />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="BorderBrush" Value="Yellow" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>