none
WPF如何实现类似C#中ListView大图标模式的样式 RRS feed

  • 问题

  • 愁人,本来在C#中用的ListView设置大图标模式,就是那种横向排列,一个图标配一个文字那种显示效果。

    现在想利用WPF美化一下界面,但是WPF中ListView好像没法这么设置,查了好多,是否需要自定义控件?还是怎么解决?


    jakeyjia
    2011年1月26日 10:15

答案

  • 你好,

    其实并不需要自定义控件,我们只需要指定一种ItemTemplate给那个ListView,然后再指定一种排列布局就好了。例如下面的例子:

        <ListBox ItemsSource="..." ScrollViewer.CanContentScroll="True">
          <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
              <WrapPanel/>
            </ItemsPanelTemplate>
          </ListBox.ItemsPanel>
          <ListBox.ItemTemplate>
            <DataTemplate>
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition/>
                  <RowDefinition/>
                </Grid.RowDefinitions>
                <Image Source="..."/>
                <TextBlock Text="Details" Grid.Row="1"/>
              </Grid>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
    
    Sincerely,
    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年1月26日 11:04
    版主
  • 你好 jakeyjia,

    你的代码写的没问题,我找到你文字没有显示的原因了,是这样的,你看你ListBox的DataTemplate中的Grid,在这个Grid中,你只定义了一行,所以你的图片和文字都显示在这同一行中了,因此才会有文字没有显示的情况。你再定义一行就可以正常工作了,我已经为你测试好了,参考代码:

    <ListBox Name="AppListBox" Background ="Transparent" ItemsSource="{Binding}" ScrollViewer.CanContentScroll="True">

                <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <WrapPanel/>

                    </ItemsPanelTemplate>

                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <Grid >

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto" ></RowDefinition>

                                <RowDefinition Height="Auto" ></RowDefinition>

                            </Grid.RowDefinitions>

                            <Image Source="{Binding Pic}"/>

                            <TextBlock Text="{Binding Name}" Grid.Row="1"/>

                        </Grid>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

    后台代码:

            namespace StyleWorkAround

    {

        /// <summary>

        /// Interaction logic for MainWindow.xaml

        /// </summary>

        public partial class MainWindow : Window

        {

            ObservableCollection<LVData> LVDatas = new ObservableCollection<LVData>();

            public MainWindow()

            {

                InitializeComponent();

                LVDatas.Add(new LVData { Name = "ª??1", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

                LVDatas.Add(new LVData { Name = "ª??2", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

                AppListBox.ItemsSource = LVDatas;

            }

        }

     

        public class LVData

        {

            public string Name { get; set; }

            public string Pic { get; set; }

        }

    }

    这个代码是完全可以工作的。

     

    Best regards,


    Sheldon _Xiao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 jakeyjia 2011年1月27日 7:51
    2011年1月27日 7:22
    版主

全部回复

  • 很愁人啊,在非WPF的ListView中有属性可设为大图标,就可以实现我想要的样式了,就是横向排列,一个图标带一个名字那样,

    现在想美化界面用WPF,结果同样用ListView就搞不定了。

    指个方向给我吧,查了好多,是不是WPF中要实现那种效果得自己定义模板了?还是怎么弄。


    jakeyjia
    2011年1月26日 10:10
  • 你好,

    其实并不需要自定义控件,我们只需要指定一种ItemTemplate给那个ListView,然后再指定一种排列布局就好了。例如下面的例子:

        <ListBox ItemsSource="..." ScrollViewer.CanContentScroll="True">
          <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
              <WrapPanel/>
            </ItemsPanelTemplate>
          </ListBox.ItemsPanel>
          <ListBox.ItemTemplate>
            <DataTemplate>
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition/>
                  <RowDefinition/>
                </Grid.RowDefinitions>
                <Image Source="..."/>
                <TextBlock Text="Details" Grid.Row="1"/>
              </Grid>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
    
    Sincerely,
    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年1月26日 11:04
    版主
  • 你好,

    其实并不需要自定义控件,我们只需要指定一种ItemTemplate给那个ListView,然后再指定一种排列布局就好了。例如下面的例子:

      <
    ListBox
     ItemsSource
    =
    "
    ...
    "
     ScrollViewer.CanContentScroll
    =
    "
    True
    "
    >
    
       <
    ListBox.ItemsPanel
    >
    
        <
    ItemsPanelTemplate
    >
    
         <
    WrapPanel
    />
    
        </
    ItemsPanelTemplate
    >
    
       </
    ListBox.ItemsPanel
    >
    
       <
    ListBox.ItemTemplate
    >
    
        <
    DataTemplate
    >
    
         <
    Grid
    >
    
          <
    Grid.RowDefinitions
    >
    
           <
    RowDefinition
    />
    
           <
    RowDefinition
    />
    
          </
    Grid.RowDefinitions
    >
    
          <
    Image
     Source
    =
    "
    ...
    "
    />
    
          <
    TextBlock
     Text
    =
    "
    Details
    "
     Grid.Row
    =
    "
    1
    "
    />
    
         </
    Grid
    >
    
        </
    DataTemplate
    >
    
       </
    ListBox.ItemTemplate
    >
    
      </
    ListBox
    >
    
    
    Sincerely,
    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    谢谢您的回复,我WPF门外汉,这样的模板我的Text怎么表示出来?只能表示出来图片~文字标注没有~

    <Image Source="{Binding Pic}"/>
    <TextBlock Text="{Binding Name}" Grid.Row="1"/>


    jakeyjia
    2011年1月27日 6:28
  • 你好 jakeyjia,

    我想你现在的问题就是你 TextBlock 的Text表示不出来,如果我理解错了,请告诉我。

    你只要保证两点:

    1)设置你的ListView的 DataContext属性。

    2)保证Name属性存在,并且不为空。

    这样你的TextBlock就会正常显示。

    如果你的问题依然存在,请给我回复,同时提供我更多的信息,比如给我分享一下你的代码,这样更有利于我解决你的问题。

     

    Best regards,


    Sheldon _Xiao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年1月27日 6:44
    版主
  • 我按照Bob Bao给我的模板来写~

     

    		<ListBox Name="AppListBox" Background ="Transparent" ScrollViewer.CanContentScroll="True">
    			<ListBox.ItemsPanel>
    				<ItemsPanelTemplate>
    					<WrapPanel/>
    				</ItemsPanelTemplate>
    			</ListBox.ItemsPanel>
    			<ListBox.ItemTemplate>
    				<DataTemplate>
    					<Grid Grid.ColumnSpan="3">
    						<Grid.RowDefinitions>
    							<RowDefinition Height="Auto" ></RowDefinition>
    						</Grid.RowDefinitions>
    						<Image Source="{Binding Pic}"/>
    						<TextBlock Text="{Binding Name}" Grid.Row="1"/>
    					 </Grid>
    				</DataTemplate>
    			</ListBox.ItemTemplate>
    			<ListBox.Items>
    				<GridView>
    				</GridView>
    			</ListBox.Items>
    		</ListBox>
    

     

    是不是还有几部分该设置的地方没有设置?

    比如,image的source绑定是不是有问题?ListBox.Items中是否应该要增加东西?

    我想在C#中动态添加一个图标配一个文字的功能。如下,图片可以有,但是文字没有。

     

    public class LVData
    {
    	public string Name{ get; set; }
    	public string Pic { get; set; }
    }
    
    
    LVData app = new LVData();
    app.Pic = "http://www.google.com/intl/en_ALL/images/logo.gif";
    app.Name= "Hello";
    AppListBox.Items.Add(app);
    
    

    这样写应该有问题吧~我自己也觉得自己很糊涂,不知道这里的app.name怎么就能跟XAML的东西关联起来。

    确实是刚接触C#和WPF,东西又要的很急,所以才自己没做什么功课就来这里问,很不好意思。

     


    jakeyjia
    2011年1月27日 7:04
  • 你好 jakeyjia,

    你的代码写的没问题,我找到你文字没有显示的原因了,是这样的,你看你ListBox的DataTemplate中的Grid,在这个Grid中,你只定义了一行,所以你的图片和文字都显示在这同一行中了,因此才会有文字没有显示的情况。你再定义一行就可以正常工作了,我已经为你测试好了,参考代码:

    <ListBox Name="AppListBox" Background ="Transparent" ItemsSource="{Binding}" ScrollViewer.CanContentScroll="True">

                <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <WrapPanel/>

                    </ItemsPanelTemplate>

                </ListBox.ItemsPanel>

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <Grid >

                            <Grid.RowDefinitions>

                                <RowDefinition Height="Auto" ></RowDefinition>

                                <RowDefinition Height="Auto" ></RowDefinition>

                            </Grid.RowDefinitions>

                            <Image Source="{Binding Pic}"/>

                            <TextBlock Text="{Binding Name}" Grid.Row="1"/>

                        </Grid>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

    后台代码:

            namespace StyleWorkAround

    {

        /// <summary>

        /// Interaction logic for MainWindow.xaml

        /// </summary>

        public partial class MainWindow : Window

        {

            ObservableCollection<LVData> LVDatas = new ObservableCollection<LVData>();

            public MainWindow()

            {

                InitializeComponent();

                LVDatas.Add(new LVData { Name = "ª??1", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

                LVDatas.Add(new LVData { Name = "ª??2", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

                AppListBox.ItemsSource = LVDatas;

            }

        }

     

        public class LVData

        {

            public string Name { get; set; }

            public string Pic { get; set; }

        }

    }

    这个代码是完全可以工作的。

     

    Best regards,


    Sheldon _Xiao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • 已标记为答案 jakeyjia 2011年1月27日 7:51
    2011年1月27日 7:22
    版主
  • 谢谢二位了~接下来的样式调整什么的,我就自己弄了~
    是应该在 < RowDefinition Height ="Auto" ></ RowDefinition >

    这个位置来分别调整图片和文字的格式吧~


    jakeyjia
    2011年1月27日 7:53
  • 如果在你调整图片和文字的格式的时候遇到任何问题,欢迎回到这个论坛,重新开一个帖子提问,很高兴能帮助到你。
    Sheldon _Xiao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年1月27日 7:57
    版主
  • 我也是这样用的,但是图片没显示出来,文字显示出来了。急求解决方案。。。。
    2012年11月13日 6:57