List Picker - Look && scroll

[Daniel]

Hi,

1. Why is too big ?

2.No option to scroll only by mouse.

Thanks,

[Lance | Manager Technical Support]

I also want to add that the styling article has much more information that you can use to design your own experience https://docs.telerik.com/devtools/maui/controls/listpicker/styling/styling 

[Lance | Manager Technical Support]

Hi Daniel,

.NET MAUI uses Microsoft's WinUI3 platform for rendering on Windows. Therefore, you will see visual styles are that not the Windows 7 cramped/squeezed GUI that you might be used to from WinForms or WPF that were less touch friendly.

Additionally, you need to keep in mind that MAUI components are designed for cross platform use, they need to work on mobile touch-only devices. Thus the default sizes are a middle ground that will work everywhere.

Scrolling

That being said, it is important to have mouse/touchpad scrolling support on desktop I have open a Feature Request  https://feedback.telerik.com/maui/1559580 

Custom style

As far the the style goes, you can customize it to your liking => .NET MAUI ListPicker Documentation | Templates | Telerik UI for .NET MAUI. 

You can change anything in the available templates (list elements, header and footer). If you do not see a template there for a specific section,  then it is not exposed an option.

Tip: This may take some experimentation and effort on your part to design a new style that you want. Be patient, use temporary background colors to understand your layout and iterate frequently.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Daniel]

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 ?

 

 

[Didi]

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>

Regarding the popup selector settings, you need to apply the style as shown in the SDK example. 

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. 

[Daniel]

I build sample project(attached)

Can you see why is not working ?

How is also done by implicit type ?

[Lance | Manager Technical Support]

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)

[Lance | Manager Technical Support]

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: