如何调整控件以适应列表框内的屏幕？

Question

我正在尝试使用包装在包装面板中的图像创建列表框。我想显示适合屏幕的项目。比如如果项目的宽度小于可用的屏幕宽度，那么项目应该被拉伸，如果项目的宽度大于可用的屏幕宽度，那么项目应该跳转到下一行并且应该填充空白。

代码：

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

Answer 1

尝试将以下容器样式添加到您的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）

更新：删除了 Jared Bienz 提议的 HorizontalAlignment