A Step-by-Step to Create a Song List
How to create a song list above with some fancy effects? Now it is easy with ListView in Avalon.
1. To simplify, we can use XmlDataProvider to provide data for ListView, the xaml looks like below:
<XmlDataProvider x:Key="MyData" XPath="/Info"> <x:XData> <Info xmlns=""> <Song Name="Love at first sight" Time="4:04" Artist="kylie" Rating="3" Disk="Disk-1" /> <Song Name="At Night" Time="4:31" Artist="Shake Down" Rating="4" Disk="Disk-1" /> <Song Name="Believe" Time="3:54" Artist="Cher" Rating="5" Disk="Disk-2" /> <Song Name="Don't call me baby" Time="3:25" Artist="Madison Avenue" Rating="5" Disk="Disk-2" /> <Song Name="It's in your eyes" Time="4:32" Artist="Kylie" Rating="5" Disk="Disk-1" /> <Song Name="Rise up" Time="4:12" Artist="Sunkids" Rating="5" Disk="Disk-1" /> </Info> </x:XData> </XmlDataProvider> |
2. Create a ListView with GridView mode and bind data to each column.
<ListView ItemsSource="{Binding Source={StaticResource MyData}, XPath=Song}"> <ListView.View> <GridView > <GridViewColumn Header="Name" DisplayMemberBinding="{Binding XPath=@Name}" Width="100"/> <GridViewColumn Header="Time" DisplayMemberBinding="{Binding XPath=@Time}" Width="80"/> <GridViewColumn Header="Artist" DisplayMemberBinding="{Binding XPath=@Artist}" Width="80" /> <GridViewColumn Header="Rating" DisplayMemberBinding="{Binding XPath=@Rating}" Width="80"/> <GridViewColumn Header="Disk" DisplayMemberBinding="{Binding XPath=@Disk}" Width="100"/> </GridView> </ListView.View> </ListView> |
3. To add an image to each column header, use GridViewColumn.HeaderTemplate property. The property’s type is DataTemplate, so a DataTemplate should be provided in Resources. Create one DataTemplate for each headerwith different Image Source.
<DataTemplate x:Key="ArtistHeader"> <StackPanel Orientation="Horizontal"> <Image Source="artist.png" Width="20" Height="20"/> <TextBlock Margin="10,0,0,0" Text="{Binding}" VerticalAlignment="Center"/> </StackPanel> </DataTemplate> <GridViewColumn Header="Artist" HeaderTemplate="{StaticResource ArtistHeader}" Width="80"/> |
4. If we would like to see the selection of the ListView items by using CheckBox, create a DataTemplate for GridViewColumn.CellTemplate property. In that DataTemplate, add a checkbox and bind its IsChecked property with ListViewItem’s IsSelected property.
<DataTemplate x:Key="NameCell"> <StackPanel Orientation="Horizontal"> <CheckBox Margin="1,0,5,2" VerticalAlignment="Center" IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}}}"/> <TextBlock Text="{Binding XPath=@Name}"/> </StackPanel> </DataTemplate> <GridViewColumn Header="Name" HeaderTemplate=" {StaticResource NameHeader}" CellTemplate="{StaticResource NameCell}" Width="100"/> |
Note: In order to apply CellTemplate to the first Column, remove its DisplayMemberBinding property set in step 2 because the latter has higher priority.
5. How to make those cute stars of Rating column? Customize CellTemplate of that Column and restyle its ToggleButtons using Path.
<Style x:Key="MyToggleButton" TargetType="{x:Type ToggleButton}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Canvas Width="12" Height="12"> <Path Name="_path" Fill="Gray" Data="M 5,0 L 4,4 L 0,4 L 3,7 L 2,11 L 5,9 L 6,9 L 9,11 L 8,7 L 11,4 L 7,4 L 6,0"/> </Canvas> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="_path" Property="Fill" Value="Gold"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <DataTemplate x:Key="RatingCell"> <StackPanel Orientation="Horizontal"> <ToggleButton Width="14" Height="20" Style="{StaticResource MyToggleButton}" /> <ToggleButton Width="14" Height="20" Style="{StaticResource MyToggleButton}" /> <ToggleButton Width="14" Height="20" Style="{StaticResource MyToggleButton}" /> <ToggleButton Width="14" Height="20" Style="{StaticResource MyToggleButton}" /> <ToggleButton Width="14" Height="20" Style="{StaticResource MyToggleButton}" /> </StackPanel> </DataTemplate> <GridViewColumn Header="Rating" CellTemplate="{StaticResource RatingCell}" HeaderTemplate="{StaticResource RatingHeader}" Width="80"/> |
6. You may want ListViewItem to have different MouseOver effect (in Red) and Selected effect (in Blue). To achieve those effects, trigger should be added in ListView.ItemContainerStyle.
<Style x:Key="MyContainer" TargetType="{x:Type ListViewItem}"> <Setter Property="Margin" Value="0,1,0,0"/> <Setter Property="Height" Value="21"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Foreground" Value="White" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="DarkBlue" Offset="0"/> <GradientStop Color="Blue" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Cursor" Value="Hand"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsSelected" Value="true" /> <Condition Property="Selector.IsSelectionActive" Value="true" /> </MultiTrigger.Conditions> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Color="#0E4791" Offset="0"/> <GradientStop Color="#468DE2" Offset="1"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Foreground" Value="White" /> </MultiTrigger> </Style.Triggers> </Style>
|
7. Put it all together and you have the following gorgeous Song List!
This sample is based on the February CTP.
Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.
Download the attached file to get the source code.