怎样实现一个Grid样式的ListBox

xiachm 2012-02-23 05:18:59
现在的视图是这样的：
item1
item2
item3
item4
item5
item6

我想做成这样的：
item1 item2
item3 item4
item5 item6
...全文
373 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>

但这无法实现数据的绑定，请问用什么办法可是实现类似ListBox.ItemTemplate的绑定效果？
wpf 带头像的listbox实现
wpf中DataTemplate实现带图标的listbox，网上收集资料收集了很久，才实现类似QQ好友分组节点下好友形似的列表。
Windows Phone ListBox选用不同的模板
Windows Phone ListBox选用不同的模板。具体请见：http://blog.csdn.net/nnnnyyyy/article/details/8152892
WPF ListBox 定制化为 Slider
将WPF的ListBox定制化为一个Slider，学习自定义WPF控件的必备范例啊。
WPF绚丽listbox
WPF绚丽listbox stackpanel布局 按钮移动改变位置 窗口界面可以参照我以前的资源
kendo-grid-duallistbox：使用CodeSandbox创建
kendo-grid-duallistbox 用CodeSandbox创建
Windows客户端开发

7,661

社区成员

18,840

社区内容

发帖
与我相关
我的任务
社区描述
Windows Phone是微软发布的一款手机操作系统，它将微软旗下的Xbox LIVE游戏、Zune音乐与独特的视频体验整合至手机中。
社区管理员
  • Windows客户端开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章