Question

大家好我有一个列表框，我可以把它变成'一行'图像滑块，如下面的代码：

<ListBox x:Name="lbImage" Style="{StaticResource horizontalListBoxStyle }"
                    Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Left"
                SelectionChanged="lbImage_SelectionChanged" Height="90" Margin="0, 0, 0 ,0" Width="500">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Href}" Height="40" Width="40" Stretch="UniformToFill" Cursor="Hand" Margin="0,0,-1,0" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
                </ListBox>

我在后面的代码中填写imageSource，如下所示：

 List<Picture> imageList = new List<Picture>();
        imageList.Add(new Picture(...));
        lbImage.ItemsSource = imageList;

因此它可以作为单行滑块使用。我应该更改什么才能使其成为“双排”滑块？我的意思是'两排'是我想在滑块上有两行。

image1 image2 image3 ... image6 image7 image8 ...

由于

SimpleCode

Answer 1

将数据源更改为包含图片对的类：

List<PicturePair> imageList = new List<PicturePair>();
        imageList.Add(new PicturePair{Picture1 = ..., Picture2 = ...});
        lbImage.ItemsSource = imageList;

然后将DataTemplate更改为网格

<ListBox x:Name="lbImage" 
         Style="{StaticResource horizontalListBoxStyle }"
         Background="Transparent" 
         VerticalAlignment="Top" HorizontalAlignment="Left"
         SelectionChanged="lbImage_SelectionChanged" Height="90" Margin="0, 0, 0 ,0" 
         Width="500">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <GridRowDefinitions>
                   <RowDefinition Height="45"/>
                   <RowDefinition Height="45"/> 
                </GridRowDefinitions>
                <Image Grid.Row="0"
                       Source="{Binding Path=/Picture1/Href}}" Height="40" Width="40"
                       Stretch="UniformToFill" Cursor="Hand" 
                       Margin="0,0,-1,0"/>
                <Image Grid.Row="1"
                       Source="{Binding Path=/Picture2/Href}" Height="40" Width="40"
                       Stretch="UniformToFill" Cursor="Hand" 
                       Margin="0,0,-1,0"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我目前没有编译器，所以我无法测试，但我认为这样做会有所帮助。

Silverlight：ListBox制作两行图像滑块

1 个答案: