[Solved] Nothing Showing when Binding to 5 or Less Items

[Matt]

This issue is very strange indeed. I can't seem to replicate it in a sample project to send your way either, but maybe someone else has seen something similar before.

I have a page with several list pickers, text boxes and static data sources. I'm just setting listpicker.ItemsSource in the code behind. When I set the ItemsSource to a collection with 5 or less items, nothing appears. When I set it to 6 or more, it works.



Here's my XAML:

<Controls:RadListPicker x:Name="lstMonthlyX">
    <Controls:RadListPicker.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Key}"/>
        </DataTemplate>
    </Controls:RadListPicker.ItemTemplate>
</Controls:RadListPicker>

Here's my class I'm binding (Maybe I don't need this, but the KeyValuePair struct wasn't working either):

public class KVP<K, V>
{
    public KVP(K pKey, V pValue)
    {
        Key = pKey;
        Value = pValue;
    }

    public K Key { get; set; }
    public V Value { get; set; }
}

Here's a collection that works:

List<KVP<string, byte>> retVal = new List<KVP<string, byte>>();

retVal.Add(new KVP<string, byte>("day", 8));
retVal.Add(new KVP<string, byte>("weekday", 9));
retVal.Add(new KVP<string, byte>("weekend day", 10));
retVal.Add(new KVP<string, byte>("Sunday", 1));
retVal.Add(new KVP<string, byte>("Monday", 2));
retVal.Add(new KVP<string, byte>("Tuesday", 3));
retVal.Add(new KVP<string, byte>("Wednesday", 4));
retVal.Add(new KVP<string, byte>("Thursday", 5));
retVal.Add(new KVP<string, byte>("Friday", 6));
retVal.Add(new KVP<string, byte>("Saturday", 7));

And here's one that doesn't work:

List<KVP<string, byte>> retVal = new List<KVP<string, byte>>(5);

retVal.Add(new KVP<string, byte>("1st", 1));
retVal.Add(new KVP<string, byte>("2nd", 2));
retVal.Add(new KVP<string, byte>("3rd", 3));
retVal.Add(new KVP<string, byte>("4th", 4));
retVal.Add(new KVP<string, byte>("last", 5));

Any input is appreciated. Thanks!

[Matt]

Also, the 5 in the constructor of the broken collection...the collection doesn't work with or without it. It was just another failed attempt to find something that worked.

[Deyan]

Hi Matt,

Thanks for writing.

Can you send us your source so that we can take a look and see what causes the undesired behavior? In fact, we have a lot of scenarios in which we bind the RadListPicker control to smaller data sources and we do not experience any glitches.

You should open a new support ticket to be able to attach your project.

Regards,
Deyan
Telerik

[Matt]

I was finally able to reproduce this. I attached the sample solution to ticket 754624.

Thanks.

[Matt]

After reviewing my support ticket, the fine folks at Telerik were able to identify the issue. Maybe this will help someone else. Here was my markup from the sample solution:

<ScrollViewer Grid.Row="1" Margin="0,-40,0,0">
    <Grid x:Name="ContentPanel" Margin="12,0,12,0">
        <StackPanel>
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <Controls:RadListPicker x:Name="lstMonthlyX">
                        <Controls:RadListPicker.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Key}"/>
                            </DataTemplate>
                        </Controls:RadListPicker.ItemTemplate>
                    </Controls:RadListPicker>
                    <Controls:RadListPicker x:Name="lstMonthlyY">
                        <Controls:RadListPicker.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Key}"/>
                            </DataTemplate>
                        </Controls:RadListPicker.ItemTemplate>
                    </Controls:RadListPicker>

                </StackPanel>
            </StackPanel>
        </StackPanel>
    </Grid>
</ScrollViewer>

Here was the explanation:



When the amount of items within the data source is more than the InlineModeThreshold, the RadListPicker displays a content control in its inline portion where the text of the currently selected item is displayed. This content control is measured and the list picker's horizontal size is adjusted accordingly. When tapped, the ListPicker opens a popup containing all selectable items.



On the other hand, when the amount of items is equal or less than the threshold, the ListPicker uses an items presenter to display the items inline by simply adjusting its height and centering the currently selected item. Currently there is no logic which calculates the horizontal size of the list picker in this mode according the width of the inline items. You should use the MinWidth property in that case to define a size for your list picker that best suits your needs.

--------------------------------------

Upon assigning a value the MinWidth property on the lstMonthlyX ListPicker, the items displayed at expected and I was able to move forward.

[Deyan]

Hi Matt,

Thanks for sharing this information with the others on the forums.

We will consider the thread closed.

Do not hesitate to get back to us in case of any questions.

Regards,
Deyan
Telerik