locked
Best visual elements to use for listing folders/contents

    Question

  • Hi;

    I am creating an app that on a particular page will show:

    1. Name of a parent "folder" (the one being viewed)

    2. List of names of any contained "folders" within this parent folder.

    3. List of names of any contained "files" in this parent folder.

    I'm using quotation marks because this isn't a file system but part of a UPnP app that allows the user to dril down into their media library to select items to play. However logically you can think of it as a simple folder/file hierarchy.

    I'm playing with a ListView just now (and only displaying sub-folders) but I don't think this is ideal, for one thing each item appears quite far from the others, the list is "spread" out. Also selecting an item is odd. If I click the text, my "Tapped" event handler sends a TextBlock as the data source, but if I click the empty space next to the text the event handler sends a ListViewItemPresenter as the data source, this is obviously going to lead to messy code.

    Is there a more suitable "list" display so that the lines in the list appear closer?

    See below: (Note - the name of parent folder and the list of files are currently absent from screen)

    I'll probably move the list (and the eventual file list) to the right of the page at some point, also I want to do a similar thing for a Phone - that is I want the code behind to be the same, just the XAML to differ.

    Thanks

    Cap'n



    Saturday, November 02, 2013 6:04 PM

Answers

All replies

  • look how the skydrive app did it?

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Saturday, November 02, 2013 7:01 PM
  • look how the skydrive app did it?

    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    OK thanks, I'll take a good look, seems like exactly the right thing to do. What exactly is that control, is it just a GridView? What if I wanted to see file names more densely (like as in my Outlook app's inbox folder contents)?

    Cap'n



    Sunday, November 03, 2013 5:04 AM
  • You can customize the ListView's template to your hearts content. I'd reommend not going too dense or people won't be able to tap individual items.

    See Defining an item template or Specifying the look of the items

    --Rob


    Sunday, November 03, 2013 2:57 PM
    Owner
  • You can customize the ListView's template to your hearts content. I'd reommend not going too fence or people won't be able to tap individual items.

    See Defining an item template or Specifying the look of the items

    --Rob

    When you say "customize the ListView's template" what do you mean exactly? derive a new class from it? edit it's own XAML file? copy it's XAML and give it a new name? or what?

    Thanks

    Cap'n

    PS: Just looking into this, I can see now that you're referring to DataTemplates that describe the appearance of items in the ListViews - is that what you mean't?

    Sunday, November 03, 2013 6:21 PM
  • As a simple experiment I used this simple example to customize the items in a ListView:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh780652.aspx

    But after adding this to my code and setting the ListView's ItemTemplate to the template, the app runs fine but the list view appears with every item having its text set to that default Latin junk.

    Here is the ListView after I added the ItemTemplate setting

                <ListView ItemTemplate="{StaticResource ImageTextListMailFolderTemplate}" Grid.Row="3" Grid.Column="1" ItemsSource="{Binding Contents}" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemClick="ListView_ItemClick" Tapped="ListView_Tapped"/>

    (All I've added is the ItemTemplate setting, take that out and the items display again as in the image I pasted earlier.

    The ItemsSource is bound to a list of objects which implement a ToString() - this is how the text is currently being rendered.

    Cap'n






    Sunday, November 03, 2013 6:43 PM
  • OK No probs - I needed an binding for the TextBlock in the DataTemplate, I set that to a suitable property of the items in the list that the ListView's ItemsSource is bound to.

    <DataTemplate x:Key="ImageTextListMailFolderTemplate"> <Grid Width="280"> <TextBlock FontSize="24" FontWeight="Light" Margin="10,10,0,0" HorizontalAlignment="Left" TextTrimming="WordEllipsis" TextWrapping="Wrap"

    Text="{Binding Title}"/> </Grid> </DataTemplate>


    However this ties that particular DataTemplate to this specific use of it, if I wanted to use that template for some other ListView and wanted the TextBlock bound to some other property - how could one do that?

    Cap'n


    Sunday, November 03, 2013 7:03 PM
  • The template needs to know the properties that it is binding to. You'd use a different DataTemplate to bind to different types of data.

    --Rob

    Tuesday, November 05, 2013 11:12 PM
    Owner