3

I want to create a breadcrumb control that has a button at the beginning that will clear the breadcrumb items. My problem is getting that first button to wrap properly with the rest of the items. Here's my style:

<Style TargetType="{x:Type local:Breadcrumb}">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Button Content="{Binding}"
                        FontSize="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbFontSize}" 
                        FontFamily="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbFont}"
                        FontWeight="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbFontWeight}"
                        Width="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbItemWidth}"
                        Height="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbItemHeight}"
                        Margin="0,0,-22,10"
                        Style="{DynamicResource BreadcrumbButton}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ItemsControl}">
                <WrapPanel>
                    <Button Content="Menu" Height="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbItemHeight}"
                            Width="{Binding RelativeSource={RelativeSource AncestorType=local:Breadcrumb}, Path=BreadcrumbItemWidth}"/>
                    <ItemsPresenter Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" />
                </WrapPanel> 
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

When all of the items fit on the same line it displays properly:

enter image description here

When it starts to wrap, it pushes all of the items below the "Menu" button:

enter image description here

Is there a way that I can update this so that the other elements do not go below the Menu button?

Chris Klepeis
  • 9,783
  • 16
  • 83
  • 149
  • [Chris](https://stackoverflow.com/users/71904/chris-klepeis), please can you post the styling of your buttons? I'd like to create something similar. – Gail Foad Aug 05 '17 at 07:32
  • @GailBowen sorry I don't have that code anymore. Check out the answer here https://stackoverflow.com/questions/5727382/breadcrumb-style-with-wpf-listview – Chris Klepeis Aug 07 '17 at 13:39

1 Answers1

1

No, the ItemsPresenter will contain another WrapPanel, i would recommend making that button part of the items (e.g. using a CompositeCollection), then it is in the same WrapPanel.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • Is there something I can override in ItemsSource to add that to perhaps a CollectionView so that it doesn't exist in the bound collection, but is bound in an underlying collection that draws the control? – Chris Klepeis Jul 17 '12 at 14:08
  • @ChrisKlepeis: Don't think there is, I would use a `CompositeCollection` as `ItemsSource`, bind a `CollectionContainer` ([it's a bit tricky](http://stackoverflow.com/questions/6446699/how-do-you-bind-a-collectioncontainer-to-a-collection-in-a-view-model/6446923#6446923)) to your actual items. – H.B. Jul 17 '12 at 14:09