WPF ListBox

来源：互联网发布：热血战歌羽化降级数据编辑：程序博客网时间：2024/05/22 08:30

一、ListBox系列索引

1、WPF ListBox基础（包括ListBox多列展示，ListBox实现分页效果，ListBox绑定XML数据源）

2、ListBox 单击变大动画效果（使用模板、样式、绑定数据源等）

二 ListBox基础：包括ListBox多列展示，ListBox实现分页效果，ListBox绑定XML数据源。

1.ListBox多列展示

?
<ListBox> 
           <ListBox.ItemsPanel>
               <ItemsPanelTemplate>
                   <UniformGrid Columns="4"/>
               </ItemsPanelTemplate>
           </ListBox.ItemsPanel>
 
           <ListBoxItem>Item1</ListBoxItem>
           <ListBoxItem>Item2</ListBoxItem>
           <ListBoxItem>Item3</ListBoxItem>
           <ListBoxItem>Item4</ListBoxItem>
           <ListBoxItem>Item5</ListBoxItem>
           <ListBoxItem>Item6</ListBoxItem>
           <ListBoxItem>Item7</ListBoxItem>
           <ListBoxItem>Item8</ListBoxItem>
           <ListBoxItem>Item9</ListBoxItem>
           <ListBoxItem>Item10</ListBoxItem>
           <ListBoxItem>Item11</ListBoxItem>
           <ListBoxItem>Item12</ListBoxItem>
           <ListBoxItem>Item13</ListBoxItem>
           <ListBoxItem>Item14</ListBoxItem>
 </ListBox>

效果图

如果要让ListBox横向显示，并自动换行，作如下设置即可。

<ListBox  Margin="0,280,49,311"ItemTemplate="{StaticResource gridDataTemplate1}"IsSynchronizedWithCurrentItem="True" 
                ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding}"
                Name="listBox6"SelectedIndex="0"HorizontalAlignment="Right"Width="238">
          <ListBox.ItemsPanel>
              <ItemsPanelTemplate>     
                  <WrapPanel IsItemsHost="True"></WrapPanel>
              </ItemsPanelTemplate>
          </ListBox.ItemsPanel>
      </ListBox>

2.Listview/ListBox use CollectionViewSource.Filter event to show data

源码：http://code.msdn.microsoft.com/CSWPFPaging-ce1ce482

效果图：

3.Listview获得XML数据源

下面是XML文件，文件名：XMLFile1.xml　

<?xml version="1.0" encoding="utf-8" ?><peopleInfo>    <person>        <ID>1</ID>        <Name>John Doe</Name>        <Balance>100</Balance>    </person>    <person>        <ID>2</ID>        <Name>Jane Dorkenheimer</Name>        <Balance>-209</Balance>    </person>    <person>        <ID>3</ID>        <Name>Fred Porkroomio</Name>        <Balance>0</Balance>    </person>    <person>        <ID>4</ID>        <Name>Mike Dpike</Name>        <Balance>550</Balance>    </person>    <person>        <ID>5</ID>        <Name>Boris</Name>        <Balance>0</Balance>    </person>    <person>        <ID>6</ID>        <Name>Doris</Name>        <Balance>25</Balance>    </person></peopleInfo>

复制代码

下面是xaml代码

<Window x:Class="WpfApplicationSummer.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplicationSummer"
    Title="Window1"Height="300"Width="300">
    <Window.Resources>
        <XmlDataProvider x:Key="myXML"Source="XMLFile1.xml"XPath="/peopleInfo/*"></XmlDataProvider>  
        <DataTemplate x:Key="myTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Name="xx"/>
                    <ColumnDefinition Name="xxy"/>
                    <ColumnDefinition Name="xxyy"/>
                </Grid.ColumnDefinitions> 
                <TextBlock Grid.Column="0"Text="{Binding XPath= ID}"/>
                <TextBlock Grid.Column="1"Text="{Binding XPath=Name}"/>
                <TextBlock Grid.Column="2"Text="{Binding XPath=Balance}"/>
            </Grid>        
        </DataTemplate>        
        <Style x:Key="myListViewItemStyle">
            <Setter Property="ListViewItem.Background"Value="Yellow"/>
        </Style>    
    </Window.Resources>
    <Grid>
        <ListView ItemsSource="{Binding Source={StaticResource myXML}}"ItemTemplate="{Binding myTemplate}"
                  Style="{StaticResource myListViewItemStyle}"Height="200"></ListView> 
    </Grid>
</Window>
效果如上图。