实现摘要列表的控件选择与数据操作

### 实现摘要列表的控件选择与数据操作 #### 1. ListBox 控件的配置与定制 ListBox 控件相较于 DataGrid 控件，具有显著的灵活性优势。默认情况下，ListBox 仅为列表中的每个项目显示一行文本。不过，它实际上是一个功能多样的控件，拥有超出我们最初预期的潜力。 ##### 1.1 模板化列表项 我们可以定义一个数据模板，并将其应用于每个项目，从而完全自定义列表中项目的外观。以下是一个数据模板的示例： ```xml <DataTemplate> <Grid Height="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Image Margin="2" Source="{Binding ThumbnailPhoto, Converter={StaticResource GifConverter}}" Grid.RowSpan="2" /> <TextBlock Name="NameField" Text="{Binding Name}" Margin="2" Grid.Row="0" Grid.Column="1" FontWeight="Bold" FontSize="12" /> <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1"> <TextBlock Text="Number:" Margin="2" /> <TextBlock Text="{Binding Number}" Margin="2" /> <TextBlock Text="| Available:" Margin="2" /> <TextBlock Text="{Binding QuantityAvailable}" Margin="2" /> <TextBlock Text="| Price:" Margin="2" /> <TextBlock Text="{Binding ListPrice, StringFormat=C}" Margin="2" /> </StackPanel> </Grid> </DataTemplate> ``` 将此数据模板应用于 ListBox 的 ItemTemplate 属性，就会得到相应的输出效果。 ##### 1.2 自定义项目布局 使用 ListBox 时，项目不必以垂直方式显示在列表中。我们可以选择让项目以水平布局显示，或者为列表中的每个项目实现缩略图，甚至以联系人卡片的形式显示项目。这些效果可以通过为 ListBox 的 ItemsPanel 属性分配一个新的项目面板模板来实现。 以下是实现联系人卡片式布局的示例： 首先，为 ListBox 的 ItemsPanel 属性应用模板： ```xml <ItemsPanelTemplate> <controlsToolkit:WrapPanel /> </ItemsPanelTemplate> ``` 然后，为 ItemTemplate 属性应用数据模板： ```xml <DataTemplate> <Grid Width="270" Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Rectangle Stroke="Black" RadiusX="3" RadiusY="3" Grid.RowSpan="5" Grid.ColumnSpan="2"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0" /> <GradientStop Color="#6D6D6D" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.Effect> <DropShadowEffect ShadowDepth="2" /> </Rectangle.Effect> </Rectangle> <Border BorderBrush="Black" Background="White" Margin="8" Height="70" VerticalAlignment="Top" CornerRadius="3" Grid.RowSpan="5"> <Border.Effect> <DropShadowEffect ShadowDepth="2" /> </Border.Effect> <Image Source="{Binding ThumbnailPhoto, Converter={StaticResource GifConverter}}" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> <TextBlock Name="NameField" Text="{Binding Name}" Margin="2,8,2,2" Grid.Row="0" Grid.Column="1" FontWeight="Bold" FontSize="12" /> <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1"> <TextBlock Text="Number:" Margin="2" /> <TextBlock Text="{Binding Number}" Margin="2" /> </StackPanel> <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1"> <TextBlock Text="Available:" Margin="2" /> <TextBlock Text="{Binding QuantityAvailable}" Margin="2" /> </StackPanel> <StackPanel Orientation="Horizontal" Grid.Row="3" Grid.Column="1"> <TextBlock Text="Price:" Margin="2" /> <TextBloc ```