How granular should you go with your Views?

May 1, 2011 at 3:50 PM

So i'm still working out whats the best way to structure my app and i thought i should should separate my listbox items into individual views instead of having them combined. The problem i discovered though is that once i do that i loose any style changes or animations on the item when it is selected. 

Should i be creating my views at this lower level and if so how do you you make sure you can see when an item is selected?

Whats the pro's and con's of either option?

May 10, 2011 at 5:10 AM

Anyone got any insight or experience they can add here? 

May 10, 2011 at 8:38 AM

Aside from styling issues (which I believe that are unrelated to how the view is composed), the choice between inline templating and a separated view is mostly driven by complexity.
My usual approach is to start with inline templating, then turn to a separated view if the single item gets too complex.
I often prefer explicit views over datatemplates because they allows you to leverage CM conventions.

Could your issue with selection style be related to a non-transparent background set on the separated usercontrol implementing the item's view? 

May 10, 2011 at 9:22 AM

I don't think there is a background set. This is what my parent view looks like.

<UserControl x:Class="LibrarySample.Views.CategoryView"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
            <TextBlock Text="Category"/>
            <ListBox x:Name="BookPreviews" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch"/>

And my child view for each list item

<UserControl x:Class="LibrarySample.Views.BookPreviewView"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    d:DesignHeight="480" d:DesignWidth="480">
    <ListBoxItem x:Name="LayoutRoot" >       
                <StackPanel Grid.Column="0">
                    <TextBlock x:Name="Book_Name" Margin="5" TextWrapping="Wrap" />
                    <TextBlock x:Name="Book_Description" Margin="10,5,5,5" TextWrapping="Wrap" Foreground="#FF7E7E7E"/>

I'm not really sure how the styles should work or if there is anything in CM that lets the Book Preview know its selected.

May 10, 2011 at 11:17 AM
Edited May 10, 2011 at 11:21 AM

You should remove  <ListBoxItem x:Name="LayoutRoot">

It is automatically added by the ListBox around each template-generated items of the list. This is a behaviour of every ItemsControl.
Leaving it there will cause the logical tree to look like:

--------(actual item content) 

In other word the ListBoxItem is added twice. 

May 10, 2011 at 11:32 AM

Ah, i thought it was originally a grid but i still had the same issue, but testing it now it seems like it fixed the style issue.  Thanks for the useful information. So it seems like the style is inherited unless you manually override it which is good. 

The behaviour you mentioned is that a CM behaviour of silverlight behaviour?

May 10, 2011 at 1:58 PM
Edited May 10, 2011 at 2:00 PM

It is a Silverlight behaviour, namely of ItemsControls.
An ItemsControl can contain any kind of object, both UIElements or domain objects; the visual appearances of the latter are defined through a DataTemplate. 
In order to deal with arbitrary visual child, every ItemsControl wraps each child with an uniform element (usually XXXXItem).
This ensures that every child gains the "capabilities" needed to participate in the specific ItemsControl behaviour.
The only exception is when child elements are XXXItem themselves: in that case, wrapping is useless and doesn't take place.

CM conventions doesn't interfere in this mechanism; they just configures an opportune template for the ListBox in order to have each VM represented with its corresponding view.
Since the view is an UserControl, the ListBox wraps it in a ListBoxItem (the outermost); selection style (an highlighted background, I guess) is just applied to this outer ListBoxItem, but remains visible if the usercontrol is transparent (it's not exaclty an inheritance).

I guess the innermost ListBoxItem was just shielding the selection with another solid background.

May 10, 2011 at 3:30 PM

that's interesting thanks.