hi guys I have a listbox which I could make it into a 'one-row' image slider, as the following code:
<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">
开发者_如何学C <ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Href}" Height="40" Width="40" Stretch="UniformToFill" Cursor="Hand" Margin="0,0,-1,0" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
With the I fill the imageSource in the code behind as follow:
List<Picture> imageList = new List<Picture>();
imageList.Add(new Picture(...));
lbImage.ItemsSource = imageList;
So it works as an one-row slider. What should I change to make it a 'two-row' slider? What I mean by 'two-row' is that I want two rows on the slider.
image1 image2 image3... image6 image7 image8...
Thanks
SimpleCode
Change your datasource to a class that contains picture pairs:
List<PicturePair> imageList = new List<PicturePair>();
imageList.Add(new PicturePair{Picture1 = ..., Picture2 = ...});
lbImage.ItemsSource = imageList;
Then change your DataTemplate to be a grid
<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>
I don't have a compiler with me at the moment, so I can't test this, but I think this will do the trick.
精彩评论