IValueConverter data binding

I am teaching myself some .NET programming and I’m currently trying to build a tag cloud control in WPF. The aim is to have 2 listboxes on a window with the first listbox displaying a list of “ContactLists” and the second listbox displaying the “labels” (or tags) associated with the ContactLists. For the labels the aim is to bind the font size to the itemCount using IValueConverter so if I have a particular label which appears several times in my collection this would be displayed in a bigger font in the labels listbox. Also I’m populating my controls from DB2 database.

So I have got as far as displaying the ContactLists and Labels in the correct listboxes I am just having some trouble with the binding. I am using a converter class which I took from a tutorial and was wondering if anyone can assist me to get this working. Many thanks - Ben

Properties

public class Label
{
    public int LabelID { get; set; }
    public string LabelName { get; set; }

}

ContactListClass

public class ContactList    
    {           
        public string ContactListName { get; set; }
        public List<Label> Labels { get; set; }

    }  

Converter

   public class CountToFontSizeConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            const int minFontSize = 6;
            const int maxFontSize = 38;
            const int increment = 3;
            int count = (int)value;
            return ((minFontSize + count + increment) < maxFontSize) ? 
                    (minFontSize + count + increment)                : 
                    maxFontSize;
        }

        public object ConvertBack(object value, Type targetType, 
            object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
        #endregion
    }

Window Loaded event

private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        //TODO: Add event handler implementation here.
        ListCollectionView lcv = new ListCollectionView(myLabels);

        lcv.GroupDescriptions.Add(new PropertyGroupDescription("LabelName"));

        tagsList.ItemsSource = lcv.Groups;                    
    }

XAML

<Window.Resources>
    <local:CountToFontSizeConverter x:Key="CountToFontSizeConverter"/>开发者_StackOverflow

    <Style x:Key="tagsStyle" TargetType="{x:Type ListBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Grid>
                        <Border x:Name="Border" 
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"/>
                            <WrapPanel Orientation="Horizontal" 
                                       Margin="2" 
                                       IsItemsHost="true" 
                                       Background="#FFFCF6F6"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <DataTemplate x:Key="ContactsTemplate">
    <WrapPanel>
        <TextBlock TextWrapping="Wrap" 
                       Text="{Binding ContactListName, Mode=Default}"/>
    </WrapPanel>
    </DataTemplate>

    <DataTemplate x:Key="TagsTemplate">
    <WrapPanel>
        <TextBlock Text="{Binding LabelName, Mode=Default}" 
                       TextWrapping="Wrap" 
                       FontSize="{Binding ItemCount, 
                                  Converter={StaticResource CountToFontSizeConverter}, 
                                  Mode=Default}" 
                       Foreground="#FF0D0AF7"/>
    </WrapPanel>
    </DataTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot" Background="#FFCBD5E6">
    <ListBox x:Name="contactsList" 
             SelectionMode="Multiple" 
             Margin="7,8,0,7" 
             ItemsSource="{Binding ContactLists, Mode=Default}" 
             ItemTemplate="{DynamicResource ContactsTemplate}" 
             HorizontalAlignment="Left" 
             Width="254"/>

    <ListBox x:Name="tagsList" 
             Margin="293,8,8,8" 
             ItemsSource="{Binding Labels, Mode=Default}" 
             ItemTemplate="{StaticResource TagsTemplate}" 
             Style="{StaticResource tagsStyle}" />
</Grid>

---

You are not very exact with your problem, so I am just going to spit some comments.

The problem is that your models (Label and ContactList) don't implement INotifyPropertyChanged, so it's hard for WPF to known what such a property has changed. However, if you do not change the values at runtime, it shouldn't be a problem though.

Also, it's better to return Binding.DoNothing instead of throwing a NotImplementedException.

You can also remove the Mode=Default from everywhere, it's not required.

I see that you are binding to the listbox containing the tags. But why aren't you binding the contactlist as well? You should either set all via code, or use bindings (and I prefer bindings).

If you can provide more details about the actual problem, maybe I can help you out better.

---

Ben, still I am not sure about the problem you are facing;

what exactly is happening when you run your code? Is font size of your Label name changed or not?

Problems I can see in your code -

1 You are setting ItemsSource for your tagsList in both XAML and code -

ItemsSource="{Binding Labels, Mode=Default}"

tagsList.ItemsSource = lcv.Groups;

2 I don't see an ItemCount property defined anywhere?

3 FontSize is a double value so your converter should return double values and not int.

4 Your 'Labels' list should be an observable collection (in case items can get added or removed at run time).