List Picker - Look && scroll

Hi,

1. I follow the sample:SDKBrowserMaui style list picker.

2. I copied all styles to app.xaml.

3. The client is :

         <telerikInput:RadListPicker x:Name="resultsListPicker" Placeholder="Select Result" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="40" WidthRequest="200" Margin="5"
                          ItemsSource="{Binding ResultsItems}" 
                          DisplayMemberPath="Value"
                          SelectedItem="{Binding SelectedResultItem, Mode=TwoWay}"
                          DisplayStringFormat="You have picked: {0}"
                                        DisplayLabelStyle="{StaticResource displayLabelStyle}"
                                        ItemStyle="{StaticResource ItemStyle}"
                                        SelectedItemStyle="{StaticResource SelectedItemStyle}"
                                        PlaceholderLabelStyle="{StaticResource placeholderLabelStyle}">
                    <telerikInput:RadListPicker.ItemTemplate>
                        <DataTemplate>
                            <Label Text="{Binding Value}"
                         HorizontalTextAlignment="Center"
                         VerticalTextAlignment="Center"/>
                        </DataTemplate>
                    </telerikInput:RadListPicker.ItemTemplate>
                    <telerikInput:RadListPicker.PopupSettings>
                        <telerikInput:PickerPopupSettings PopupOutsideBackgroundColor="#474A4949"
                                                      PopupViewStyle="{StaticResource popupViewStyle}"
                                                      HeaderStyle="{StaticResource headerStyle}"
                                                      HeaderLabelText="Select city"
                                                      HeaderLabelStyle="{StaticResource headerLabelStyle}"
                                                      FooterStyle="{StaticResource footerStyle}"
                                                      AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                                      CancelButtonStyle="{StaticResource cancelButtonStyle}"/>
                    </telerikInput:RadListPicker.PopupSettings>
                    <telerikInput:RadListPicker.DropDownSettings>
                        <telerikInput:PickerDropDownSettings FooterStyle="{StaticResource footerStyle}"
                                                         AcceptButtonStyle="{StaticResource acceptButtonStyle}"
                                                         CancelButtonStyle="{StaticResource cancelButtonStyle}"/>
                    </telerikInput:RadListPicker.DropDownSettings>

                </telerikInput:RadListPicker>
      

3.Problems:

-Place holder disappeared.

-Selection not work, it works without the styling.

- how to use implicit style instead of copy it every list picker.

what do I miss ?

Review the placeholder label style, selected item style, display label style, and the values set for text color. 

Regarding the implicit style, you can apply an implicit style to the common list picker styling properties

<telerikInput:RadListPicker Placeholder="Hello World">
 </telerikInput:RadListPicker>

<!-- and inside the page's resources -->
 <Style TargetType="Label" x:Key="Placeholder">
                <Setter Property="TextColor" Value="Blue"/>
 </Style>

<Style TargetType="telerikInput:RadListPicker">
                <Setter Property="BackgroundColor" Value="Red"/>
                <Setter Property="PlaceholderLabelStyle" Value="{StaticResource Placeholder}"/>
                <Setter Property="CornerRadius" Value="20"/>
 </Style>

If you want to have pickers with the same styling, for example, you can create a custom picker that inherits from RadListPicker. Position the picker inside a contentview and add all styling options in the contentview resources. Then you can set this custom picker inside the content page. 

I build sample project(attached)

Can you see why is not working ?

How is also done by implicit type ?

The screenshot above shows that you forgot to take the most important step before using any code... adding the using statement or xmlns of where the object type comes from. This is why it is important to review the SDK Example code that Didi pointed to.

Please take extra care when copy/pasting code from any demo, this is an important prerequisite. In the above case, you can copy the xmlns. or you can construct it yourself. The first part of the xmlns is the namespace of where the control lives, the second part of it is the MAUI shim compatibility namespace and is always the same when using the ported components.

For your convenience, this is the XML namespace `xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.Maui.Controls.Compatibility"`

As far as your question on using implicit styles, that's the same as any other XAML component. You just set the TargetType of the Style to the component (see Didi's code snippet above). Then, make sure the style is in the Resources that is in scope of where you want it (i.e., put it in Application.Resources if you want it application-wide or ContentView.Resources if you only want it on that view)

Finally, here's an example of moving your common settings to an implicit style for a component that is defined in the App.xaml's Resources. Taking this approach lets you reuse the same values for all of your application's instance of that component.

(click on any image to see it full-screen)

You can even move your PopupSettings and DropDownSettings to the style (because they are properties of the RadListPicker type):

Now, you can have a very minimal instance of the RadListPicker, and let it inherit the common settigns from the Style:

Important

Please make sure that anything you put in App.xaml has the resources it needs. For example, all those other dependent resources like templates, need to also be in App.xaml. To help explain this concept, here's a screenshot with annotations:

I attached sample code.

1. Selection not work.

2. The lookup is not exactly as in demo(I don't see you have picked:XXX).

3. I want to use :merged-resourcedictionary but no resourcedictionary appear while trying to add new item.

#1

This looks like it might be related to an issue with implicit styling we are already working on. When I remove your custom styles, or use x:Key StaticResources, everything works as expected.

The only suggestion I can offer you is to use explicit styling instead. Give all the App.xaml styles an x:Key and assign that StaticResource everywhere you need it.

My recommendation for you here is to not use a custom implicit style until we have fully released the product. This is because we are always changing and adapting the components' structure to meet changes from Microsoft (and for other internal improvements). There's a high likelihood that you're going to have to redo all your custom overriding work with the final version of the components anyways.

#2

Because you have a custom ItemTemplate, you are now 100% responsible for the appearance of the Label. If you want a StringFormat, then you need to set a StringFormat.

<telerikInput:RadListPicker.ItemTemplate>
    <DataTemplate>
        <Label Text="{Binding Value, StringFormat='You have picked: {0}'}"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </DataTemplate>
</telerikInput:RadListPicker.ItemTemplate>

#3

This is not related to Telerik UI for MAUI. You'll need to pursue this investigation in other places.

#1 i will use explicit style and organized all the styles in app xaml and consume it from view or page.

#3 is bug in Microsoft it will fixed in relases 2.

Thank you for the update. as we get closer to May/June, we will all have a more stable SDK to stand on and it should be less things to workaround.

In the meantime, I ask that you be patient and understand things are expected to be broken in certain places and we're doing our best to keep up with those breaking changes (as well as fix issues in our controls as well).