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.
Comments
- Anonymous
February 23, 2006
No control in our library demonstrates the power of WPF more than ListView.
It is the example of how... - Anonymous
February 28, 2006
The comment has been removed - Anonymous
February 28, 2006
Are you using the Feb CTP bits?
Check out http://msdn.microsoft.com/windowsvista/getthebeta/default.aspx - Anonymous
March 01, 2006
Yes, I use Feb CTP. Now I have different problem. I moved to the other computer and still cannot run this application, but now for security reason.
The WPF Host displays a dialog:
Trust Not Granted: The application cannot be deployed because it is not trusted and possibly unsafe.
I have default security settings, i.e. My Computer has Full Trust. What should I check security-wise? - Anonymous
March 01, 2006
Did you run the application on a network path? If the application is running on network path, it will have security problems. Please copy them to your local machine and then launch it. - Anonymous
March 01, 2006
I'm running (trying to run :) application from my local disk. And, as I noted above, My Computer zone has Full Trust. Where do I need to look for security settings that prevent me from running your application. - Anonymous
March 01, 2006
for running this sample, you have two simple ways (make sure WinFX has been installed successfully)
1. unzip songlist.zip on your local disk, and double click SongList.xaml file, that is all
2. if you have xamlpad.exe, run it and copy/paste songlist.xaml to it
BTW: when you finished WinFX installation, do you have succeeded run your "hello world" avalon app? How do you run it? - Anonymous
March 01, 2006
Thank you very much for your advice.
I just fixed the problem - for whatever reason I had to completely delete the contents of the following folders:
Documents and Settings<my name>Local SettingsApps
and
Documents and Settings<my name>Local SettingsTemp
after that application just started after doubel click. Thank you again. - Anonymous
May 21, 2006
Just for polish I wanted to add the watermark effect similar to the one you find in the lower right of... - Anonymous
January 31, 2007
Seems the trigger on the IsSelected items are no longer working. Is there a new way to style the selected item? - Anonymous
May 21, 2007
No control in our library demonstrates the power of WPF more than ListView. It is the example of how - Anonymous
June 14, 2007
PingBack from http://mdavey.wordpress.com/2007/06/14/xaml-listviewismouseover-can-the-default-row-highlighting-be-disabled/