Вопрос по image, xaml, wpf – ListBox Отображение горизонтальных изображений WPF

2

Я пытаюсь создать элемент управления в wpf / xaml, который будет отображать горизонтальный список изображений. Ширина списка, который будет исправлен (без полосы прокрутки). Когда добавляется новый элемент, существующие элементы уменьшают количество изображения, наложенного на изображение, чтобы разместить его (фактическое изображение не уменьшает только количество показанного изображения). Функциональность будет аналогична добавлению нового столбца в сетку со свойством относительной ширины ("*"), а столбец содержит изображение с фиксированной шириной. Вот мой код:

<code><Window.Resources>
    <ItemsPanelTemplate x:Key="ListBox_HorizontalItems">
        <StackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>

    <DataTemplate x:Key="ListBox_DataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
            </Grid.ColumnDefinitions>
            <Image Width="150" Source="{Binding ImageSource}" />
        </Grid>
    </DataTemplate>

    <Style x:Key="ListBox_Style_Horizontal" TargetType="ListBox">
        <Setter Property="Width" Value="150" />-->
        <Setter Property="ItemTemplate" Value="{StaticResource ListBox_DataTemplate}" />
        <Setter Property="ItemsPanel" Value="{StaticResource ListBox_HorizontalItems}" />
    </Style>
</Window.Resources>

<Grid>
    <ListBox Name="lbxImages" Style="{StaticResource ListBox_Style_Horizontal}" Width="250"  Height="100" />
</Grid>
</code>

Что очень близко к тому, что мне нужно! Однако я не могу понять, как уменьшить количество отображаемого изображения при добавлении нового элемента в список. В настоящее время полоса прокрутки появляется при добавлении нового элемента. На случай, если я не очень хорошо объясняю себя, вот несколько скриншотов, показывающих нужную мне функциональность:

3 Items 4 Items 5 Items

Кто-нибудь может показать мне, как этого добиться? Спасибо за любую помощь!

Ваш Ответ

2   ответа
9

Используйте следующую UniformGrid в качестве ItemsPanel:

<ItemsPanelTemplate>
    <UniformGrid Columns="{Binding Path=Items.Count,RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"/>
</ItemsPanelTemplate>

Отключаемая горизонтальная прокрутка:

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">

Modify ItemTemplate:

<DataTemplate>
    <Image Source="{Binding ImageSource}"
           Stretch="None"
           HorizontalAlignment="Center"/>
</DataTemplate>
Спасибо за это, это прекрасно работает! Я никогда не использовал "UniformGrid" раньше, выглядит довольно полезным ... qu1ckdry
0

что замены ItemsPanelTemplate недостаточно, чтобы избавиться от полосы прокрутки, потому что этот ItemsPanelTemplate встроен в ScrollViewer, где-то внутри ListBox. Вам также может понадобиться удалить этот ScrollViewer.

Я заменил весь шаблон ListBox:

<Style  TargetType="ListBox">        
    <Setter Property="Height" Value="Auto"/>
    <Setter Property="Width" Value="Auto"/>        
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border 
                    BorderBrush="Red" 
                    BorderThickness="1">
                    <UniformGrid  
                        IsItemsHost="True" 
                        Rows="1">                       
                    </UniformGrid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListBoxItem">                    
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="VerticalAlignment" Value="Center"/>                    
                <Setter Property="VerticalContentAlignment" Value="Top"/>                    
                <Setter Property="Height" Value="25"/>
                <Setter Property="Padding" Value="5 0 5 0"/>
                <Setter Property="Background" Value="Transparent" />

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border                                   
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True">
                                 <!-- Presenter for the UniformGrid: -->
                                <ContentPresenter
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            </Border>
                            <ControlTemplate.Triggers>
                        <!-- triggers to indicate selection -->

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

Кроме того, нет необходимости выяснять количество столбцов в UniformGrid. Система просто использует количество ListBoxItems. Я думаю, IsItemsHost = "True" сделает это за вас.

Похожие вопросы