Как настроить элемент управления, чтобы он соответствовал экрану внутри списка?

Я пытаюсь создать список с изображениями, завернутыми в обертку. Я хочу показать элементы, подходящие для экрана. Например, если ширина элементов меньше доступной ширины экрана, то элементы должны быть растянуты, а если ширина элементов больше доступной ширины экрана, элементы должны перейти к следующей строке, а пустое пространство должно быть заполнено.

Код:

    <ListBox x:Name="lst" Grid.Row="3"   HorizontalAlignment="Left">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel Width="Auto" Height="Auto" ite ItemWidth="Auto" ItemHeight="Auto"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <Border BorderThickness="2" Width="Auto" Margin="5,5,5,5" Height="Auto"  BorderBrush="Cornsilk">
            <StackPanel Orientation="Vertical" Height="150" Width="150">

                <Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
                <TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
            </StackPanel>

        </Border>

        <Border BorderThickness="2"  Margin="5,5,5,5" Width="Auto" Height="Auto"  BorderBrush="Cornsilk">
            <StackPanel Orientation="Vertical" Height="150" Width="150">

                <Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
                <TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
            </StackPanel>
        </Border>
        <Border BorderThickness="2"  Margin="5,5,5,5" Width="Auto" Height="Auto"  BorderBrush="Cornsilk">
            <StackPanel Orientation="Vertical" Height="150" Width="150">

                <Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
                <TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
            </StackPanel>
        </Border>
        <Border BorderThickness="2"  Margin="5,5,5,5"  Width="Auto" Height="Auto"  BorderBrush="Cornsilk">
            <StackPanel Orientation="Vertical" Height="150" Width="150">

                <Image Source="Images/image-s.png" Height="120" Width="120" ></Image>
                <TextBlock Text="Item" HorizontalAlignment="Center"></TextBlock>
            </StackPanel>
        </Border>
    </ListBox>

listbox wrappanel windows-phone-7 listbox-control listboxitems
person master.fake    schedule 22.11.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте добавить следующий стиль контейнера к вашему ListBox:

<UserControl x:Class="MyClass"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <UserControl.Resources>
        <Style x:Key="myContainerStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </UserControl.Resources>

    <ListBox ItemContainerStyle="{StaticResource myContainerStyle}">

    </ListBox>
</UserControl>

(В конце концов вам придется использовать PhoneApplicationPage вместо UserControl)

ОБНОВЛЕНИЕ: удалено HorizontalAlignment по предложению Джареда Биенца.

person Rico Suter    schedule 22.11.2011
comment
Технически вам нужно только следующее: ‹ListBox.ItemContainerStyle› ‹Style TargetType=ListBoxItem› ‹Setter Property=HorizontalContentAlignment Value=Stretch/› ‹/Style› ‹/ListBox.ItemContainerStyle› - person Jared Bienz - MSFT; 22.11.2011