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.

SongList.zip

Comments (12)
  1. No control in our library demonstrates the power of WPF more than ListView.

    It is the example of how…

  2. alex_simkin says:

    I cannot run this great example, always getting:

    System.Windows.Markup.XamlParseException: Error at element ‘DataTemplate’ in markup file ‘…/listview/SongList.xaml’ : Cannot convert the string ‘name.png’ in attribute ‘Source’ into an object of type ‘System.Windows.Media.ImageSource’.. Line ‘161’ Position ’27’. —> System.ArgumentException: Only file URI is supported.

    What should I do?

  3. ATC Avalon Team says:

    Are you using the Feb CTP bits?  

    Check out http://msdn.microsoft.com/windowsvista/getthebeta/default.aspx

  4. alex_simkin says:

    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?

  5. ATC Avalon Team says:

    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.

  6. alex_simkin says:

    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.

  7. ATC Avalon Team says:

    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?

  8. alex_simkin says:

    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.

  9. Just for polish I wanted to add the watermark effect similar to the one you find in the lower right of…

  10. ptoinson says:

    Seems the trigger on the IsSelected items are no longer working. Is there a new way to style the selected item?

  11. No control in our library demonstrates the power of WPF more than ListView. It is the example of how

Comments are closed.

Skip to main content