2

I would like my HeaderedItemsControl to look like this:
The Header is inline with the content items
whereby the header is inline with the content items.

However this is how it looks at the moment: The Header is not inline with the content items
whereby the header is not inline with the content items Here is my xaml:

<HeaderedItemsControl Name="TagCloud" Margin="5,3">
 <HeaderedItemsControl.ItemsSource>
  <CompositeCollection>
   <data:Keyword Word="data 1" IsSelected="True"/>
   <data:Keyword Word="data 2" IsSelected="False"/>
   <data:Keyword Word="data 3" IsSelected="True"/>
   <data:Keyword Word="data 1" IsSelected="True"/>
   <data:Keyword Word="data 2" IsSelected="False"/>
   <data:Keyword Word="data 3" IsSelected="True"/>
   <data:Keyword Word="data 1" IsSelected="True"/>
   <data:Keyword Word="data 2" IsSelected="False"/>
   <data:Keyword Word="data 3" IsSelected="True"/>
  </CompositeCollection>
 </HeaderedItemsControl.ItemsSource>
 <HeaderedItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
   <WrapPanel Orientation="Horizontal" />
  </ItemsPanelTemplate>
 </HeaderedItemsControl.ItemsPanel>
 <HeaderedItemsControl.Header>
  <TextBlock Text="Tags: " Margin="0,8,3,0" />
 </HeaderedItemsControl.Header>
 <HeaderedItemsControl.Template>
  <ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
   <WrapPanel>
    <ContentPresenter ContentSource="Header" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
   </WrapPanel>
  </ControlTemplate>
 </HeaderedItemsControl.Template>
 <HeaderedItemsControl.ItemTemplate>
  <DataTemplate>
   <ToggleButton Name="tagButton" Content="{Binding Word}" IsChecked="{Binding IsSelected}" />                                                       
  </DataTemplate>
 </HeaderedItemsControl.ItemTemplate>
</HeaderedItemsControl>

What should I change?

Leo
  • 5,013
  • 1
  • 28
  • 65
  • 1
    I'm not sure it's going to work as you have two different WrapPanels, one for the Header and one for the ItemsControl. Although there might be some fancy way to do it by changing the underlying control/template. If it was me, I would probably do away with the HeaderedItemsControl, have a top-level wrappanel or uniformgrid, add the 'header' label in and then programatically add the items from the code-behind. This of course is not the MVVM way though obviously. – Asnivor Dec 01 '16 at 16:29
  • I have been thinking along the same lines... I was just wondering whether there is a better way. – Leo Dec 02 '16 at 13:13

0 Answers0