ItemsControl styling

ItemsControl styling

• choon

  thanks, that worked.
  BTW, what is the difference and when should we use one over the other
  
  

• SiYuan

  thanks, that helped
  BTW, your blog is very informative
  
  

• Rosiness

  If you use your initial xaml:
  
  <WrapPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" FlowDirection="LeftToRight" >
     <ItemsPresenter/>
  </WrapPanel>
  
  The tree generated internally is something like: ItemsControl - (...) - WrapPanel - ItemsPresenter - StackPanel (which is the default Panel for the items) - (... your items ...). So in this case you are simply wrapping the default Panel with a WrapPanel, when what you really want is to replace it.
  
  When setting IsItemsHost="true" in the WrapPanel, the tree generated is ItemsControl - (...) - ItemsPresenter - WrapPanel - (... your items ...). The WrapPanel is used to wrap your items directly.
  
  <WrapPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" FlowDirection="LeftToRight" IsItemsHost="true" />
  
  I remembered one other way to solve the same scenario, which is to add the panel to the resources and set the ItemsPanel property of ItemsControl directly:
  
  

  <Window.Resources>
     <WrapPanel x:Key="panel"/>
  </Window.Resources>
  
  <ItemsControl ItemsSource="{StaticResource places}" Width="375" Height="375" ItemTemplate="{StaticResource template}" ItemsPanel="{StaticResource panel}"/>
  
  If you don't need to change the template of the ItemsControl for any other reason, I would use this solution instead of my initial one. If you do, then I would use my initial reply with IsItemsHost.
  
  I hope this helped. Let me know if you have any other questions.
  

  
  
  

• Jason K

  Instead of:
  
  

  <WrapPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" FlowDirection="LeftToRight" >
     <ItemsPresenter/>
  </WrapPanel>
  
  Do the following:
  
  <WrapPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" FlowDirection="LeftToRight" IsItemsHost="true" />
  
  IsItemsHost is a property on Panel that says "Use this Panel when laying out the items".
  
  Let me know if this helped.
  

  
  
  

• WesleyNM

  I need selection in for the items in my list, so I'm actually using a ListView instead of an ItemsControl.

  I originally had an ItemsControl and my wrapping worked (I used the same pattern you recommended with the WrapPanel IsItemsHost = "True".  However, when I switched the ItemsControl to a ListView, the wrapping stopped working.

  Is there something I'm doing wrong, or does the WrapPanel need to be configured differently for a ListView

  Thanks.

  
  
• ItemsControl styling