Question

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

代码：

    <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

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

1 个答案: