WPF error: "Cannot add content to an object of type BarStaticItem"

Question

I have this XAML:

<dxb:BarStaticItem>
  <TextBlock Text="{Binding MyStatusBarText}"></TextBlock>
</dxb:BarStaticItem> 

However, I'm getting this error:

Cannot add content to an object of type BarStaticItem

How do I fix this, so I can do things like change the color and style of the rendered item?

Answer 1

This XAML will work fine, but its limiting (it won't allow you to set the color of the text displayed, as requested):

<dxb:BarStaticItem
    Content="{Binding MyStatusBarText}">
</dxb:BarStaticItem> 

This particular control does allow us to set the ContentTemplate. We can use this to style the content:

<dxb:BarStaticItem
   ContentTemplate="????">
</dxb:BarStaticItem>   

First, we define a DataTemplate in Window.Resources. This is what our ContentTemplate will point at:

<Window.Resources>
    <DataTemplate x:Key="MyStatusBarContentTemplate">
        <!-- As the DataContext of a resource does not default to the window, we have to use RelativeSource to find the window. -->
        <TextBlock Name="MyText"                
            Text="{Binding Path=MyStatusBarText, 
            RelativeSource={RelativeSource Mode=FindAncestor,
            AncestorType=Window}}">                
        </TextBlock>
    </DataTemplate>
</Window.Resources>

As the DataContext of a DataTemplate is different to the rest of the XAML, if we omit the XAML RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window} then the binding will not work properly. Other than that, all we are doing is defining a template which can be used to render the contents of the control.

Then, we point our control at this DataTemplate:

<dxb:BarStaticItem
    ContentTemplate="{DynamicResource MyStatusBarContentTemplate}">
</dxb:BarStaticItem>

Now that we have defined a custom data template, we can do anything we want. For example, we could add a Converter which colored the text red if the status bar contained the text Error (something that was impossible, otherwise).

This answer also illustrates how it is possible to use a DataTemplate to display custom content for most controls.

Update

Rather than defining the DataTemplate in the resources for the Window, defined it as a resource for BarStaticItem. This keeps related items together in the XAML.

This particular XAML means that the status bar text automatically goes red if the text contains the string Error, and the status bar text is automatically prefixed with the time. Let me know if you want me to post the C# code for the converters.

<dxb:BarStaticItem
  ContentTemplate="{DynamicResource MyStatusBarContentTemplate}">
  <dxb:BarStaticItem.Resources>
      <DataTemplate x:Key="MyStatusBarContentTemplate">
          <!-- As the DataContext of a resource does not default to the window, we have to use RelativeSource to find the window. -->
          <TextBlock Name="MyText"
              Foreground="{Binding ElementName=MyText, Path=Text, Converter={StaticResource ColorRedIfTextContainsError}}"
              Text="{Binding Path=SettingsGlobalViewModel.StatusBarText, 
              RelativeSource={RelativeSource Mode=FindAncestor,
              AncestorType=Window},
              Converter={StaticResource PrefixStringWithTime}}">
          </TextBlock>
      </DataTemplate>
  </dxb:BarStaticItem.Resources>
</dxb:BarStaticItem> 

Answer 2

Assuming BarStaticItem is an UserControl...

I'm using code behind in one partial cs file where (almost) everything is done, with an ObservableCollection of UIElement instead (or whatever element you want)

1) Create a related partial Class called BarStaticItem.Children.cs, then add the required namespaces :

using System.Collections.ObjectModel; // ObservableCollection.
using System.Collections.Specialized; // NotifyCollectionChangedEventHandler.
using System.Windows.Markup; // [ContentProperty()]

2) add a ContentProperty flag above partial class declaration, then add your Children Property declaration :

namespace YourNamespace.SubNamespace
{
    [ContentProperty("Children")] // <- here !
    public partial class BarStaticItem
    // (This is the related BarStaticItem.Children.cs file)
    {
        /// <summary>
        /// Gets the Children Property of this BarStaticItem.
        /// </summary>
        public ObservableCollection<UIElement> Children { get; private set; }
    }
}

3) Now create the ObservableCollection Property initializer in a private method in the cs file :

        private void RegisterChildrenObservation()
        {
            Children = new ObservableCollection<UIElement>();
            Children.CollectionChanged += 
                new NotifyCollectionChangedEventHandler(Children_CollectionChanged);
        }

4) Call that initializer in the constructor of your custom UI Element :

namespace YourNamespace.SubNamespace
{
    public partial class BarStaticItem : UserControl
    // (This is the base BarStaticItem.xaml.cs file)
    {
        public BarStaticItem()
        {
            InitializeComponent();
            RegisterChildrenObservation(); // <- here !
        }
    }
}

5) Handle the behaviour of your Children collection in the BarStaticItem.Children.cs file by declaring the method handler you called in your initializer :

This is just plain formal procedure. Once you understand the whole thing, you'll see you can play around with it and create much more scenarios than what you could do with xaml alone. To begin with, only two states really matters here :

• NotifyCollectionChangedAction.Add
  and

• NotifyCollectionChangedAction.Remove

  private void Children_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
  {
      switch (e.Action)
      {
          case NotifyCollectionChangedAction.Add:
          {
              foreach (UIElement currentElement in e.NewItems)
              {
                  MyChildContainer.Children.Add(currentElement);
              }
              break;
          }
  
          case NotifyCollectionChangedAction.Move:
          {
              break;
          }
  
          case NotifyCollectionChangedAction.Remove:
          {
              foreach (UIElement currentElement in e.OldItems)
              {
                  MyChildContainer.Children.Remove(currentElement);
              }
              break;
          }
  
          case NotifyCollectionChangedAction.Replace:
          {
              break;
          }
  
          case NotifyCollectionChangedAction.Reset:
          {
              break;
          }
  
          default:
          {
              break;
          }
      }
  }
  

6) you're nearly done, but you must create and name an UIElement in your BarStaticItem.xaml file to contain the added UIElements :

<UserControl ...>
    <Grid 
        x:Name="MyChildContainer"><!-- HERE ! -->
    </Grid>
</UserControl>

---

Then you're done, and you could add ANY Child Element to your BarStaticItem directly in the XAML just like you did.

<dxb:BarStaticItem>
    <TextBlock Text="{Binding MyStatusBarText}"></TextBlock>
</dxb:BarStaticItem>

..and that TextBlock will land in the Grid defined and named MyChildContainer in the BarStaticItem.xaml. You could use a DockPanel or a StackPanel, even decide in which container the Child Element will go based on its type or update (Dependency) Properties in the NotifyCollectionChangedAction.Add case, like :

private void Children_CollectionChanged(
    object sender, NotifyCollectionChangedEventArgs e)
{
    switch (e.Action)
    {
        case NotifyCollectionChangedAction.Add:
        {
            foreach (UIElement currentElement in e.NewItems)
            {
                if (currentElement.GetType() == typeof(TextBlock))
                {
                    TextBlock currentTextBlock = (TextBlock)currentElement;
                    // Manipulate your TextBlock...
                    HeaderTextBlockContainer.Children.Add(currentElement);
                }
                else if (currentElement.GetType() == typeof(Button))
                {
                    FooterButtonsDockPanel.Children.Add(currentElement);
                    DockPanel.SetDock(currentElement, Dock.Right);
                }
                else
                {
                    MainContentContainer.Children.Add(currentElement);
                }
                ContentDefined = true; // Custom Property.
            }
            //...

Who DV you is not me