Custom control with direct content to pass to CommandBar

Question

I have an idea for a custom control, but I don't know how to implement it.

Let's say I have a control "MyControl" with a CommandBar in it.

<Control ... MyControl>
    <Label Content="Hello" />

    <CommandBar>
        <DefaultButton Command={Binding DCom1} >
        <DefaultButton Command={Binding DCom2} >

        <SomePlaceHolderForAdditionalButtons />
    </CommandBar>
</Control>

I want to do the following:

<MyControl>
    <MyAdditionalButton Command={Binding Com1} />
    <MyAdditionalButton Command={Binding Com2} />
</MyControl>

After that, MyControl is loaded with the two default Buttons first and the two provided Buttons as the third and fourth buttons.

Is this even possible? Any help is appreciated.

Answer 1

MyControl is loaded with the two default Buttons first and the two provided Buttons as the third and fourth buttons.

You could make template control to approach. Custom Items property for CustomControl, then call UpdateView method to push AppBarButton element into default commandbar.

For example

[ContentProperty(Name = "Items")]
public class CustomControl : Control
{   
    private const string CommandBarPresenter = "CommandBarPresenter";
    public CustomControl()
    {
        this.DefaultStyleKey = typeof(CustomControl);
        var items = new ObservableCollection<object>();
        items.CollectionChanged += Items_CollectionChanged;
        Items = items;
    }

    private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        UpdateView();
    }

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    public static readonly DependencyProperty ItemTemplateProperty =
    DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(CustomControl), new PropertyMetadata(null, OnItemTemplateChanged));

    private static void OnItemTemplateChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        CustomControl target = obj as CustomControl;
        DataTemplate oldValue = (DataTemplate)args.OldValue;
        DataTemplate newValue = (DataTemplate)args.NewValue;
        if (oldValue != newValue)
            target.OnItemTemplateChanged(oldValue, newValue);
    }

    protected virtual void OnItemTemplateChanged(DataTemplate oldValue, DataTemplate newValue)
    {
        UpdateView();
    }

    public ICollection<object> Items
    {
        get;
    }

    private CommandBar _commandBarPresenter;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        _commandBarPresenter = GetTemplateChild(CommandBarPresenter) as CommandBar;
        UpdateView();
    }

    private void OnItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        UpdateView();
    }

    protected virtual System.Boolean IsItemItsOwnContainerOverride(System.Object item)
    {
        return item is ContentPresenter;
    }


    protected virtual void PrepareICommandElementForItemOverride(DependencyObject element, System.Object item)
    {
        ContentControl contentControl;

        if ((contentControl = element as AppBarButton) != null)
        {
            contentControl.Content = item;
            contentControl.ContentTemplate = ItemTemplate;
        }

    }


    private void UpdateView()
    {

        if (_commandBarPresenter == null)
            return;

        foreach (var item in Items)
        {

            if (item is AppBarButton)
            {
                _commandBarPresenter.SecondaryCommands.Add(item as AppBarButton);
                break;
            }

            if (!(item is AppBarButton))
            {
                throw new Exception("please add AppBarButton as content");
            }

        }
    }
}

Xaml Code

<Style TargetType="local:CustomControl" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomControl">
                <StackPanel Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <CommandBar x:Name="CommandBarPresenter">
                        <AppBarButton Icon="Add" Label="Add"/>
                        <AppBarButton Icon="Edit" Label="Edit"/>
                    </CommandBar>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

<local:CustomControl>
    <AppBarButton Icon="AlignCenter" Label="Center"/>
    <AppBarButton Icon="Cut" Label="Cut"/>
</local:CustomControl>