wpf - How to optimize style of Surface ListBox items? -

i'm having trouble performance 15 items in surfacelistbox.

the listbox created source binding viewmodel , i'm using itemcontainerstyleselector, select 1 of 3 styles use. still have 8 controltemplates, since have 4 states dataitem can present, plus 4, when item selected.

the styleselector pretty simple:

public class taskstyleselector : styleselector {     public style defaultstyle { get; set; }     public style overduestyle { get; set; }     public style presentstyle { get; set; }     public style completedstyle { get; set; }      public override style selectstyle(object item, dependencyobject container)     {         var t = item sekoia.karuna.public.models.tasks.task;         if (t == null)             return base.selectstyle(item, container);          if (t.completed)             return completedstyle;         else if (t.intervalstarttime <= datetime.now && t.intervalendtime >= datetime.now)             return presentstyle;         else if (t.intervalendtime < datetime.now)             return overduestyle;         return defaultstyle;     } } 

my controltemplates this:

    <controltemplate x:key="defaulttasktemplate">             <border borderthickness="0, 0, 0, 1" height="56" borderbrush="{staticresource sidebarshadowbrush}" background="transparent">                 <grid>                     <grid.columndefinitions>                         <columndefinition width="56"/>                         <columndefinition width="130"/>                         <columndefinition width="214"/>                         <columndefinition width="56"/>                         <columndefinition width="56"/>                     </grid.columndefinitions>                     <textblock padding="13,16,0,0" grid.column="1" foreground="{staticresource textgreybrush}"><run text="{binding intervalstarttime, stringformat=\{0:hh:mm\}}"/><run text=" - "/><run text="{binding intervalendtime, stringformat=\{0:hh:mm\}}"/></textblock>                     <textblock padding="13,16,0,0" grid.column="2" foreground="{staticresource textgreybrush}" text="{binding title}"/>                     <views:arrowcontrol horizontalalignment="center" width="20" grid.column="4" height="13" verticalalignment="center" arrowbrushcolor="{staticresource textgrey}"/>                     <views:checkmarkcontrol width="30" height="30" />                 </grid>             </border>         </controltemplate> 

for me, looks pretty simple. styles this:

<style targettype="{x:type listboxitem}" x:key="normaltaskitemstyle" basedon="{staticresource basetaskstyle}">             <setter property="template" value="{staticresource defaulttasktemplate}"/>             <style.triggers>                 <trigger property="isselected" value="true">                     <setter property="template" value="{staticresource defaultselectedtasktemplate}"/>                 </trigger>             </style.triggers>         </style> 

as can see, i'm changing template when selection changes.

what i'm facing when actual bind source occurs, window hangs, waiting listbox render items. when window opens, display "spinner" element, indicate i'm downloading content. 1 download finishes, databind , see spinner stop before removed. spinner stopping indicates me, window thread hangs because binding in process. once initial binding over, can scroll/pan fine , no performance hit notable.

i've searched web info on optimizing scenario, cannot seem find relevant. looking in wrong places?

what know, if acceptable way of producing list? there easier way it? i.e. avoiding large number of controltemplates , styles?

can help?

i wouldn't bother changing template when selecting item, better use visual state within same template, avoid recreating elements you'd otherwise reuse in both states. selected template shouldn't causing loading hang though.

i'm surprised you're seeing noticeable delay 15 items. don't see glaringly wrong template, seems pretty simple, don't know in arrow , checkmark controls. may want inspect xaml (or visual tree runtime) of controls make sure aren't needlessly complex.

there couple things can try reduce initial render time:

1. use visual states in each item progressively show internal elements. so, if arrow or checkmark controls problem, maybe have each element start elements collapsed , make them visible after time has passed.

2. don't bind whole list @ one, bind empty list , add each item in dispatcher loop allows ui responsive in between creating each container.