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

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

0 голосов
/ 22 ноября 2011

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

Код: 

    <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>

1 Ответ

2 голосов
/ 22 ноября 2011

Попробуйте добавить следующий стиль контейнера к вашему 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 по предложению Джареда Биенца

...