怎样实现一个Grid样式的ListBox

xiachm 2012-02-23 05:18:59

现在的视图是这样的：
item1
item2
item3
item4
item5
item6

我想做成这样的：
item1 item2
item3 item4
item5 item6

...全文

337 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiachm 2012-03-01

打赏
举报

谢谢各位，使用WrapPanel解决了。

licj2008 2012-02-29

打赏
举报

用WrapPanel
实现自动折行！

<ListBox Name="ListChannel" Margin="0,-50,10,0" ItemsSource="{Binding ChannelList}" Height="530" SelectedIndex="{Binding ChannelliIndex,Mode=TwoWay}" Foreground="{StaticResource WhiteBrushKey}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="400" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>

<Grid Margin="5,0,5,10" Width="180">
<Rectangle Width="172" Height="172" Fill="#FF830F49"></Rectangle>
<Image Height="172" Width="172" Source="{Binding ImgUrl}" Margin="0,10,0,0" />
<TextBlock Text="{Binding nodeName}" HorizontalAlignment="Center" TextWrapping="NoWrap" FontSize="22" Margin="50,130,50,0" />
</Grid>

</DataTemplate>
</ItemsControl.ItemTemplate>

</ListBox>

macrojj 2012-02-29

打赏
举报

DataTemplate
就搞定了啊

ycproc 2012-02-28

打赏
举报

给你一个样式吧

具体的自己改哈



<!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

                <Grid>

                    <TextBlock HorizontalAlignment="Left" Margin="31,15,0,0"  Name="textBlockKSRQ" Text="开始日期" VerticalAlignment="Top" />

                    <TextBlock HorizontalAlignment="Left" Margin="31,100,0,0" Name="textBlockJSRQ" Text="结束日期" VerticalAlignment="Top" />

                    <toolkit:DatePicker HorizontalAlignment="Left" Margin="120,0,121,0" Name="datePickerKSRQ" VerticalAlignment="Top" Width="200" IsHitTestVisible="True" DataContext="{Binding}" />

                    <toolkit:DatePicker HorizontalAlignment="Left" Margin="120,75,115,0" Name="datePickerJSRQ" VerticalAlignment="Top" Width="200" IsHitTestVisible="True" DataContext="{Binding}" />

                    <TextBlock HorizontalAlignment="Left" Margin="31,170,0,0" Name="textBlockSFYWC" Text="是否完成" VerticalAlignment="Top" />

                    <Button Content="查 询" HorizontalAlignment="Left" Margin="330,150,0,0" Name="buttonCX" VerticalAlignment="Top" Click="buttonCX_Click" />

                    <StackPanel >

                        <toolkit:ListPicker Height="auto" HorizontalAlignment="Left" Margin="130,155,0,0" Name="listPickerSFYZX" VerticalAlignment="Top" Width="180">

                            <toolkit:ListPickerItem Content="所有" Tag="2"></toolkit:ListPickerItem>

                            <toolkit:ListPickerItem Content="已完成" Tag="1"></toolkit:ListPickerItem>

                            <toolkit:ListPickerItem Content="未完成" Tag="0"></toolkit:ListPickerItem>

                        </toolkit:ListPicker>

                        <Grid>

                                <StackPanel>

                                    <Grid Height="35" Margin="5,3,0,0">

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition MinWidth="200" Width="450"  MaxWidth="550" />

                                            <ColumnDefinition MinWidth="170" Width="170"  MaxWidth="200"/>

                                            <ColumnDefinition MinWidth="100" Width="100"  MaxWidth="120"/>

                                            <ColumnDefinition MinWidth="120" Width="120"  MaxWidth="120"/>

                                        </Grid.ColumnDefinitions>

                                        <Border BorderBrush="Gray" BorderThickness="1" Grid.Column="0">

                                            <TextBlock Grid.Column="0" HorizontalAlignment="Center" Text="客户名称"></TextBlock>

                                        </Border>

                                        <Border BorderBrush="Gray" BorderThickness="1" Grid.Column="1">

                                            <TextBlock Grid.Column="1"  HorizontalAlignment="Center" Text="客户电话"></TextBlock>

                                        </Border>

                                        <Border BorderBrush="Gray" BorderThickness="1" Grid.Column="2">

                                            <TextBlock Grid.Column="2" HorizontalAlignment="Center"  Text="是否完成"></TextBlock>

                                        </Border>

                                        <Border BorderBrush="Gray" BorderThickness="1" Grid.Column="3">

                                            <TextBlock Grid.Column="3" HorizontalAlignment="Center"  Text="操作"></TextBlock>

                                        </Border>

                                    </Grid>

                                    <ListBox x:Name="listbox1" Height="305" ItemsSource="{Binding}" Margin="0,0,0,0"  VerticalAlignment="Top"  IsSynchronizedWithCurrentItem="{x:Null}">

                                        <ListBox.ItemTemplate>

                                            <DataTemplate>

                                                <Grid Height="35" Margin="5,3,0,2">

                                                    <Grid.ColumnDefinitions>

                                                        <ColumnDefinition MinWidth="200" Width="450" MaxWidth="550"/>

                                                        <ColumnDefinition MinWidth="170" Width="170"  MaxWidth="200" />

                                                        <ColumnDefinition MinWidth="100" Width="100"  MaxWidth="120"/>

                                                        <ColumnDefinition MinWidth="120" Width="120" MaxWidth="120" />

                                                    </Grid.ColumnDefinitions>

                                                    <Border BorderBrush="Gray" BorderThickness="1" Grid.Column="0">

                                                        <TextBlock Grid.Column="0" Text="{Binding KHXM}"></TextBlock>

                                                    </Border>

                                                    <Border BorderBrush="Gray" BorderThickness="1"  Grid.Column="1">

                                                        <HyperlinkButton Grid.Column="1"  HorizontalContentAlignment="Left" Tag="{Binding KHXM}"  Content="{Binding YDDH}" Click="HyperlinkButton_Click_CALLGDDH"></HyperlinkButton>

                                                    </Border>

                                                    <Border BorderBrush="Gray" BorderThickness="1"  Grid.Column="2">

                                                        <TextBlock Grid.Column="2"  Text="{Binding SFYZX}"></TextBlock>

                                                    </Border>

                                                    <Border BorderBrush="Gray" BorderThickness="1"  Grid.Column="3">

                                                        <HyperlinkButton Name="HyperlinkButtonTBRZ"  Tag="{Binding}" Content="填报日志" Click="HyperlinkButtonTBRZ_Click"  IsEnabled="{Binding boolButtonEnable}"></HyperlinkButton>

                                                    </Border>

                                                </Grid>

                                            </DataTemplate>

                                        </ListBox.ItemTemplate>

                                    </ListBox>

                                </StackPanel>

                        </Grid>

                    </StackPanel>

                </Grid>

        </Grid>

    </Grid>

wongeo 2012-02-28

打赏
举报

WrapPanel
用这个控件
在toolkit里面的
自己应该会添加吧

xiachm 2012-02-27

打赏
举报

各位，还有什么好办法吗？这种效果在WP7的应用中很常见，大家都是怎么做的呀？

xiachm 2012-02-25

打赏
举报

[Quote=引用 10 楼 beyondma 的回复:]

没太看明白楼主的问题，两个LISTBOX不可以吗？
[/Quote]
我就是想实现前面贴出的图片中的效果。只是那个例子中图片的位置是在代码中写死的。而我希望自动的布局，另外图片的数量也不一定。

如果是两个ListBox那么在滑动时会不会感觉不是一个整体？

beyondma 2012-02-25

打赏
举报

没太看明白楼主的问题，两个LISTBOX不可以吗？

xiachm 2012-02-24

打赏
举报

我再怎么改source，也只能对应Model中的一条。我的数据源自一个XML文件，类似这个



<items>

    <item>1.jpg</item>

    <item>2.jpg</item>

    <item>3.jpg</item>

    <item>4.jpg</item>

</items>

我现在的代码是这样的：



<ListBox Margin="0,0,0,0" ItemsSource="{Binding Items}">

    <ListBox.ItemTemplate>

        <DataTemplate>

            <StackPanel Orientation="Horizontal" Margin="0,0,0,0" Width="380" Height="200">

                <Image Height="180" Width="180" Source="{Binding pic}"/>

                <Image Height="180" Width="180" Margin="20,0,0,0" Source="{Binding pic}"/>

            </StackPanel>

        </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

改source的话，相应的逻辑会复杂的多。是否有什么更好的办法？类似这种效果WP7里很常见，他们都是怎么做的？

June1991 2012-02-24

打赏
举报

我知道你不能该Source吗？

xiachm 2012-02-24

打赏
举报

[Quote=引用 5 楼 june1991 的回复:]

可以用2个Image啊C# code
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="img1" Source="{Binding Pic}"/>
……
[/Quote]
试了下，样式是可以了，但是每行左右两张图片是一样的，看你的代码两个image绑定的是同一个pic

我想做成这样的：
item1 item2
item3 item4
item5 item6

xiachm 2012-02-24

打赏
举报

[Quote=引用 4 楼 june1991 的回复:]

这图片是固定的吗？
[/Quote]
不是，是从网上拉取的。所以我想实现绑定，而不是像刚才我贴出的代码，写死在里面的。

June1991 2012-02-24

打赏
举报

可以用2个Image啊

 <StackPanel Orientation="Horizontal">

                                <Image HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="img1" Source="{Binding Pic}"/>

                                <Image HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="img2" Source="{Binding Pic}"/>

                            </StackPanel>

绑定数据，Margin改改

June1991 2012-02-24

打赏
举报

这图片是固定的吗？

xiachm 2012-02-24

打赏
举报

[Quote=引用 2 楼 june1991 的回复:]

ListBox的绑定要用 C# code
<ListBox.ItemTemplate>
<DataTemplate>

位置用C# code
<StackPanel Orientation="Horizontal">
控制
[/Quote]
可是我希望我的列表可以显示两列，类似这张图

可ListBox只能显示一列，用Grid又不能实现绑定。还有什么办法吗？

June1991 2012-02-24

打赏
举报

ListBox的绑定要用

<ListBox.ItemTemplate>

                    <DataTemplate>

位置用

 <StackPanel Orientation="Horizontal">

控制

xiachm 2012-02-24

打赏
举报

我知道一种办法是，把Grid放到ListBox中，以实现flickable，类似下面的代码：



<ListBox Grid.Row="1" >

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="*" />

            <RowDefinition Height="*" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

 

        <Image Source="Thumbnails\1.jpeg" Grid.Row="0" Grid.Column="0"   Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />

        <Image Source="Thumbnails\2.jpeg" Grid.Row="0" Grid.Column="1"  Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />

        <Image Source="Thumbnails\3.jpeg" Grid.Row="1" Grid.Column="0"   Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />

        <Image Source="Thumbnails\4.jpeg" Grid.Row="1" Grid.Column="1"   Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />

        <Image Source="Thumbnails\5.jpeg" Grid.Row="2" Grid.Column="0"  Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />

    </Grid>

</ListBox>