Question

我正在尝试创建一个可滚动的网格，在我的应用程序中，我有一个带有文本项目的垂直滚动列表框，如下所示。

 <ListBox x:Name="selectionList" Margin="49,0,11,0" Padding="20,20,0,0"      SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}"      Height="606" VerticalAlignment="Top" Width="420">
            <ListBox.ItemTemplate>
                <DataTemplate>
                  <TextBlock Text="{Binding SlectionTitle}" FontSize="22" Margin="0,0,0,10" FontFamily="{StaticResource hevel}" Foreground="#FF99FFFF"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
 </ListBox>

所以我将TextBlock更改为此

  <Border x:Name="Selection_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="198" Margin="18,24,0,5" VerticalAlignment="Center" Width="199" CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0">
                        <Border.Background>
                            <ImageBrush Stretch="Fill" ImageSource="{Binding SelectionArt}"/>
                        </Border.Background>
                    </Border>

这适用于单个垂直滚动列表。我试图得到一个网格，例如永久4个图像高并自动宽，所以如果有4个图像，它显示4列，如果有8个图像，它显示2列4，依此类推

我试过这个例子 WP7 - issues with Horizontal scrolling Listbox

但它只保持列表垂直并水平滚动

任何建议，谢谢

//解决了

谢谢，我最终不得不使用示例链接aswel

        <ListBox x:Name="AlbumList" Margin="49,0,11,0"  ScrollViewer.HorizontalScrollBarVisibility="Auto"
 ScrollViewer.VerticalScrollBarVisibility="Disabled"  SelectionChanged="AlbumList_SelectionChanged" ItemsSource="{Binding ''}" Background="{x:Null}" Height="748" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Orientation="Vertical" ></toolkit:WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border x:Name="Album_List_Image" BorderBrush="#FFC4C3C3" BorderThickness="8" HorizontalAlignment="Left" Height="152" Margin="18,24,0,5" VerticalAlignment="Center"  CornerRadius="12" RenderTransformOrigin="0.5,0.5" Padding="0" Width="152">
                        <Border.Background>
                            <ImageBrush Stretch="Fill" ImageSource="{Binding AlbumArt}"/>
                        </Border.Background>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Answer 1

如果您正在执行WP8.1运行时，可以通过将<ItemsPanelTemplate>更改为<WrapGrid>并将Orientation设置为垂直并设置MaximumRowsOrColumns来轻松完成此操作到4.这样，

见MSDN WrapGrid（他们实际上做了你想要的例子......但在另一个方向）

 <ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="4"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- your data template -->
        </DataTemplate>
    </ListBox.ItemTemplate>    
</ListBox>

如果您使用WP8.0 + SL进行此操作，那么它将会有点难度。您将需要Windows Phone Toolkit并使用<WrapPanel>，但您需要Databind一些值（或硬编码...取决于您的ViewModel的松散程度）

<ListBox x:Name="myListBox" Height="412">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Orientation="Vertical" ItemHeight="100" ItemWidth="100"></toolkit:WrapPanel>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- your data template -->
        </DataTemplate>
    </ListBox.ItemTemplate>                
</ListBox>

在这个例子中，我将每个项目硬编码为100x100，并且我将高度硬编码为412，从而使其在垂直方向上有4个项目。

如果您选择，可以对Height和ItemHeight以及ItemWidth进行数据绑定。

WP水平滚动网格选择

1 个答案: