Magnus Gladh
Magnus Gladh

Reputation: 1937

Use Binding in a Listbox Itemtemplate for a custom control

I am trying to do a custom datepicker control. It's based on a Textbox where I can select diffrent types of dates. So when I get focus on the Textbox then I create a Popup window that has a listbox where the following items is added.

Today 
Last 7 days 
Month to date 
Year to date 
The previous Month 
Specific date 
All dates before 
All dates after 
Date range

This works fine, if I hardcode in all the items. Now I want to extend this list so I use the Listbox.ItemTemplate instead so I can customize the listboxitem. I have creates a DateChoice-class that I create a list of and bind this to the listboxs itemssource.

internal class DateChoiceItem
{
    internal DateChoiceEnum DateChoiceEnum { get; set; }
    internal string DateChoiceName { get; set; }
    internal bool ExtendedCalender { get; set; }
}

    this.DateChoice.ItemsSource = new ObservableCollection<DateChoiceItem>() { 
        new DateChoiceItem(){DateChoiceName = "Today", DateChoiceEnum = DateChoiceEnum.Today},
        new DateChoiceItem(){DateChoiceName = "Last 7 days", DateChoiceEnum = DateChoiceEnum.Last7Days},
        new DateChoiceItem(){DateChoiceName = "Month to date", DateChoiceEnum = DateChoiceEnum.MonthToDate},
        new DateChoiceItem(){DateChoiceName = "Year to date", DateChoiceEnum = DateChoiceEnum.YearToDate},
        new DateChoiceItem(){DateChoiceName = "The previous Month", DateChoiceEnum = DateChoiceEnum.PreviousMonth},
        new DateChoiceItem(){DateChoiceName = "Specific date", DateChoiceEnum = DateChoiceEnum.SpecificDate, ExtendedCalender = true},
        new DateChoiceItem(){DateChoiceName = "All dates before", DateChoiceEnum = DateChoiceEnum.AllDatesBefore, ExtendedCalender = true}, 
        new DateChoiceItem(){DateChoiceName = "All dates after", DateChoiceEnum = DateChoiceEnum.AllDatesAfter, ExtendedCalender = true},
        new DateChoiceItem(){DateChoiceName = "Date range", DateChoiceEnum = DateChoiceEnum.DateRange, ExtendedCalender = true }
    };

Since this is a customcontrol I have put the xaml-code in a resourcefiles and it looks like this:

                              <ListBox x:Name="PART_DateChoice" Grid.Column="0" Grid.Row="0">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="5"/>
                                                    <ColumnDefinition Width="16"/>
                                                </Grid.ColumnDefinitions>

                                                <TextBlock x:Name="name" Grid.Column="0" Text="{Binding Path=DateChoiceName}"/>
                                                <TextBlock Grid.Column="2" Text=">" Visibility="{Binding Path=ExtendedCalender, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>

So I want it to look like this

Today 
Last 7 days 
Month to date 
Year to date 
The previous Month 
Specific date       > 
All dates before    > 
All dates after     > 
Date range          >

Here I use 2 textboxes to show the name and even if it's possible to extend the listboxitem so I can show some calenders if I need to select 1 or 2 specific dates. But All I get is a listbox filled with '>'. Like this

 >
 >
 >
 >
 >
 >
 >
 > 
 > 

It looks like the Text="{Binding Path=DateChoiceName}" isn't working. What am I missing here?

Now I can solve this by doing a lot of hardcoding, but I prefere to bind my list to the listbox and get the Binding working!!

Have anybody has the same problem?

Thanks in advance.

Upvotes: 1

Views: 1005

Answers (2)

Magnus Gladh
Magnus Gladh

Reputation: 1937

Well that was as easy as I am stupied.

The property on DateChoiceItem needs to be public or else the WPF can't access them...

Upvotes: 1

WaltiD
WaltiD

Reputation: 1952

You should bind the ListBox ItemSource-Property to the DateChoice Property:

public DataChoice MyDateChoiceCollection { get; set; }  

and:

<ListBox ItemSource = {Binding MyDateChoiceCollection}">
   ...
</ListBox>

Upvotes: 0

Related Questions