Question

I am trying to create a custom Tag Cloud control. The way it’s supposed to work is that the user can give it a collection of strings in the itemsSource and the converted string will be displayed in the UI. The problem is when I try to drop the control into an application I get the following error:”Could not create an instance of type TagCloudControl”. Can anyone help?

Code behind

public class TagCloudControl : ListBox
{
    static TagCloudControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(TagCloudControl), new FrameworkPropertyMetadata
            (typeof(TagCloudControl)));
    }
    //tags dependency property
    public static DependencyProperty TagsProperty = DependencyProperty.Register("Tags",
        typeof(IEnumerable<Tag>),
        typeof(TagCloudControl));

    public CollectionView GroupedTagsView { get; set; }

    public TagCloudControl()
    {
        ItemsSource = Tags;

        //group my tags by "name" property
        GroupedTagsView = (ListCollectionView)CollectionViewSource.GetDefaultView(Tags);
        GroupedTagsView.GroupDescriptions.Add(new PropertyGroupDescription("Name")); 

    }

    public IEnumerable<Tag> Tags
    {
        get { return (IEnumerable<Tag>)GetValue(TagsProperty); }
        set { SetValue(TagsProperty, value); }
    }
}

XAML

<Window x:Class="TagCloudDemo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:TagCloudControlLibrary;assembly=TagCloudControlLibrary"
Title="Window1" Height="300" Width="300">
<Grid>

    <src:TagCloudControl HorizontalAlignment="Center" VerticalAlignment="Center" Name="firstTag"/>

</Grid>
</Window>

TagControl xaml

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TagCloudControlLibrary">

<local:CountToBrushConverter x:Key="CountToBrushConverter"/>
<local:CountToFontSizeConverter x:Key="CountToFontSizeConverter"/>

<Style TargetType="{x:Type local:TagCloudControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TagCloudControl}">
                <Grid>
                    <WrapPanel Orientation="Horizontal" 
                               Margin="2"
                               IsItemsHost="True">
                    </WrapPanel>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<DataTemplate x:Key="TagsTemplate">
    <WrapPanel>
        <TextBlock Text="{Binding Name}"
                   FontSize="{Binding ItemCount, Converter={StaticResource CountToBrushConverter}}"
                   Foreground="{Binding ItemCount, Converter={StaticResource CountToFontSizeConverter}}"/>
    </WrapPanel>
</DataTemplate>
</ResourceDictionary>

Tag Class

public class Tag
{
    public Tag(string name)
    {
        Name = name;        
    }

    public string Name { get; set;}

}

Answer 1

Do you need to instantiate Tags?

I’m guessing it’s a null reference exception, you set your items source as Tags in your constructor, but you have not instantiated Tags.

public TagCloudControl()
{
    Tags = new ObservableCollection<Tags>();

    ItemsSource = Tags;
    ...
} 

Edit:

After playing around with code… I’m thinking that Tags might not need to be a DependencyProperty. It appears you want to Bind the ItemsSource to Tags… but you could just make Tags a simple property, and in it, set the ItemsSource to the value passed in:

public TagCloudControl()
{
    //this is now empty.
} 

public IEnumerable<Tag> Tags
{
    get { return (this.ItemsSource as IEnumerable<Tag>); }
    set { this.ItemsSource = value; }
}

Also I think your Style might want to be more like this:

<Style TargetType="{x:Type local:TagCloudControl}">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate DataType="{x:Type local:Tag}">
                <TextBlock Text="{Binding Name}"
                           FontSize="{Binding ItemCount, Converter={StaticResource CountToBrushConverter}}"
                           Foreground="{Binding ItemCount, Converter={StaticResource CountToFontSizeConverter}}">
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TagCloudControl}">
                <Grid>
                    <WrapPanel Orientation="Horizontal" Margin="2" IsItemsHost="True">
                    </WrapPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And finally, I think you might be missing ItemCount in your ‘Tag’ Class.