Show Isolated Storage File Name Items in Expander View Inside a ListBox

Question

Initially I was having a ListBox getting Bind with a List, containing a ListBoxItem whose contents would be the filenames populated from Isolated Storage by just calling the GetUserContent property of the IsolatedStorageFile Class.

Now In a new requirement I want to put an Expander, whose header would correspond to the different folders in Isolated Storage. I would load the filenames from the Isolated Storage from that respective folder like "\data*" (data folder) when that particular expander is expanded.

So can anyone please guide me on the same on the expanderview controls and populate its listbox items, with the filenames of that particular folder saved in Isolated Storage.

Thanks In Advance.

What about sub-folders? Are you looking for a tree-view with multiple levels, or are you happy with just 2 levels? Also, while this can be implemented as you describe, it's not "standard" WP UI. If it works for you, it may be better to have a long-list selector instead (but that means you only have folder/filename structure, no multi-level folders) — Shahar Prish
Actually yes like a tree view. Or else I was thinking of already defining an ExpanderView control with the Header as say Data. Now when the user expands this data expander, I want to show the file list names retrieved from data folder from Isolated Storage. I hope I am clear. — Siddharth
You are clear, but can you comment on whether you are going to have multiple levels (folder/subfolder/subsubfolder/file) or just 2 levels always (folder/file) — Shahar Prish

Shahar Prish Shahar Prish · Accepted Answer · 2013-04-23T12:28:11

First off - the UI you are describing is not standard WP behavior. What you need to do is to have a collection of groups.

Your ItemsSource in the outer-listbox you need to bind to the Groups collection:

<LitBox ItemsSource="{Binding Groups}">

Next, inside the ItemTemplate you need to define your expand view, and bind ANOTHER list box to the items of the group. Something like (I am not sure what Expander view you are using, but it will probably be something like this):

<ListBox.ItemTemplate>
  <whatever:ExpanderView>
    <ListBox ItemsSource="{Binding Items}"/>
  </whatever:ExpanderView>
</ListBox>

Now, the reason this is a bad idea is that ListBoxes do not play nice inside other listboxes of the same orientation. At best, you are going to get funky scrolling, at worst you are going to get memory issues since the system will not be able to handle virtualization. To avoid some of the potential scrolling issues, you can also place an ItemsControl with a StackPanel as the panel template. That again could cause issues with memory, depending on how many items you have.

My suggestion is that you change your UI though. One of the these 3 options should be good for you:

Change the behavior a bit to be a long list selector (similar to the behavior of the Contacts native app). This is not exactly what you want, but is more in line with windows phone guideliens and will give you less head-aches.
Do this as a 2-phase operation. You have a list of folder, when you tap one of them, a new page opens with the relevant items.
Another not-so-good but possible solution is to have an ObservableCollection<> that contains just the folders and then add/remove items to it accordingly (making sure to format them correctly - you can use a style or template selector for that)

Show Isolated Storage File Name Items in Expander View Inside a ListBox

1 Answers