Problems (little) and Suggestions

[ManniAT]

Hi,

by using you control in an application I stumbled over some problems.
Most of theme are just "cosmetic" and none of it stops my work.

First of all - the styling does not allow much customization.
To have (for an example) the selected style in bold or a different color I tried the solution from this post
http://www.telerik.com/community/forums/windows-phone/listpicker/styling-selecteditem.aspx
But I did not work.
Anyhow - not really a big problem - but more customization would be great.
For an example to show "Full Names" in selection mode and a short version in the closed situation.

A problem with the styling is also that there is no VS for disabled.
I have a situation where I need to disable the control - I bound the "IsEnabled" to a property in my VM.
Fist I searched around since I thought that my binding / converter doesn't work.
Later I found that the control simply doesn't reflect Enabled / Disabled.

Solution - bring up Blend, generate the control template and....
Learn that there is no VS for Enabled / Disabled :(

It would be great to have such a thing - ATM the user can't see if the control is enabled or not.

Next thing - sometimes I have only a single item in the picker.
When I click the picker it starts to "look strange" (it grows a bit horizontally).
It would be better to disable the control in that case - or to show an empty picker list.

Again an optical problem - the user clicks - and the control simply "acts strange".

Last not least there seems to be a little problem with the inline mode detecting an other control is selected.
To proof this a a picker above a listbox.
Open it - the picker list gets visible - the listbox "shrinks".
tap a listbox item - and the picker closes - as it should.
Open it again - and start scrolling the listbox - the picker stays open - which is wrong.

The last thing (staying open) and the "invisible disabled state" are important for me - especially the Disabled look.
The rest (customizable picker) would just be nice - nothing more.

Manfred

[Deyan]

Hello Manfred,

Thanks for writing and for the extensive feedback.

I have tried to apply a custom style to the selected item and everything seemed to work as expected on my side. It is important to note that you should both set the PopupItemStyle and ItemStyle properties to have all items - those in inline mode, and those in the popup - styled in the same way.

Could you please share some further details on the following line:

"For an example to show "Full Names" in selection mode and a short version in the closed situation."

since I am not quite sure that I follow.

As for the disabled state: you have a valid point here. We are going to take a look at the default style and add the disabled state.

I also did not manage to reproduce the visual glitch when having one single item in the control and trying to expand in inline mode. Could you please help me with some details in reproducing it or attach a sample project that we can take a look at and debug (a new support ticket should be opened in order to attach a project)?

I have also tested the automatic closing of RadListPicker when another control is focused and managed to reproduce the behavior that you describe. RadListPicker is designed to close when the user taps outside it. Scrolling the list box is not a tap event and thus the ListPicker is not closed. We will revisit this behavior and in case it is needed, we will update it.

I hope this is helpful.

Let me know in case you have further questions.

Greetings,
Deyan
the Telerik team

[ManniAT]

Hi Deyan,

thank you for your detailed response.

Could you please provide an example how you can style the selected item?
Let's say I want it bold an green :)

About
"For an example to show "Full Names" in selection mode and a short version in the closed situation."

What I mean is that I have (Inline) two situations.
The first is "closed" and the second is open (where I see the list).

Assume I have (closed) picker an it shows
GER

If it is open the list should contain
Germany
Austria
United States
and so on.

Further (for easier selection) I want a bigger vertical margin at the items.
The reason for this (with the default style) is that I get a "tap border" around the control (easy to hit),
but not around the items in the list (sometimes difficult to hit the correct one).

About the visual problem - since the current project is a bit complicated I can't isolate this part.
But if I find time to provide an example I'll let you know.

Regards
Manfred

[Deyan]

Hi Manfred,

I am pasting here the XAML code which you can use to style the items in RadListPicker:

<telerikInput:RadListPicker.PopupItemStyle>
    <Style TargetType="telerikPrimitives:SelectorItem">
        <Setter Property="Foreground" Value="Green"/>
        <Setter Property="Template">
            <Setter.Value>
                    <ControlTemplate TargetType="telerikPrimitives:SelectorItem">
                        <Border Background="{TemplateBinding Background}">

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="content" Storyboard.TargetProperty="Foreground" Duration="0">
                                                <DiscreteObjectKeyFrame Value="Pink" KeyTime="0"/>

                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <ContentControl x:Name="content" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
                Foreground="{TemplateBinding Foreground}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
        </Setter>
    </Style>
</telerikInput:RadListPicker.PopupItemStyle>
<telerikInput:RadListPicker.ItemStyle>
    <Style TargetType="telerikInput:RadListPickerItem">
        <Setter Property="Foreground" Value="Green"/>
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>
</telerikInput:RadListPicker.ItemStyle>

As for shortening the items when the ListPicker is closed, you could use the following approach:

Define a DataTemplate for the items in the list picker which will display a given property from your business object. Catch the StateChanged event exposed by RadListPicker and when the ListPicker expands - make the property in question return the extended value, and when the ListPicker collapses: return the shortened version.

I hope this helps.

Let me know in case you have further questions or need assistance.

Kind regards,
Deyan
the Telerik team

[ManniAT]

Hi,

thank you for your answers.
About the visual glitch.

It comes when I define an item style.

<DataTemplate x:Key="rlpItemTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding DisplayString}" Margin="0,-3,0,0"/>
    </StackPanel>
</DataTemplate>
<telerikInput:RadListPicker Grid.Row="2" ItemTemplate="{StaticResource rlpItemTemplate}">
    <sys:String>30 minutes</sys:String>
</telerikInput:RadListPicker>

About the different styles for closed / opened.
Yes that could help - but it doesn't fit to MVVM - I don't wanna use code behind.
I was more thinking about a thing like your APSX ComboBox (I know it's different - but maybe you get the Idea with this example).
I have a "normal style" - and a "drop down style".
So I can show the Name in the closed box - and when it is open I can see more (different) information.

Regards
Manfred

[Deyan]

Hi Manfred,

Thanks for writing back.

With the different styles for closed and opened you can also define different data templates that target different properties on your business object. So you are completely able to make shortened and long version of the values for the inline vs. popup mode of the list picker by displaying different properties on your objects (this resembles the combo box scenario with two styles for normal and popup style).

I have also been able to reproduce the ListPicker behavior that we've been discussing. This behavior is caused by the top margin that you are setting in your data template. To calculate the height of the list picker, we take the height of a single item when the control is not expanded, and the height of the whole items presenter (that holds all possible inline items) when the control is expanded. It seems that in the case with having one item and expanding the control, the size of the items presenter is different from the size of a single item although only a single items is available in it. We will further dig into this.

All the best,
Deyan
the Telerik team