List Picker - Look && scroll

1 Answer 250 Views
ListPicker
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 29 Mar 2022, 03:18 PM | edited on 29 Mar 2022, 03:18 PM

Hi,

1. Why is too big ?

2.No option to scroll only by mouse.

Thanks,

Lance | Manager Technical Support
Telerik team
commented on 29 Mar 2022, 04:33 PM

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 

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 29 Mar 2022, 04:00 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 30 Mar 2022, 06:40 AM | edited

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
Telerik team
commented on 30 Mar 2022, 11:58 AM

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
Top achievements
Rank 1
Silver
Bronze
commented on 30 Mar 2022, 01:37 PM

I build sample project(attached)

Can you see why is not working ?

How is also done by implicit type ?

Lance | Manager Technical Support
Telerik team
commented on 01 Apr 2022, 01:13 PM | edited

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
Telerik team
commented on 01 Apr 2022, 01:53 PM

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:

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 03 Apr 2022, 07:17 AM | edited

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.


 

 

 

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 11 Apr 2022, 07:08 AM

Is it a bug ?
Lance | Manager Technical Support
Telerik team
commented on 12 Apr 2022, 05:29 PM

#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.

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 12 Apr 2022, 05:40 PM

#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.

Lance | Manager Technical Support
Telerik team
commented on 12 Apr 2022, 05:52 PM

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).

Daniel
Top achievements
Rank 1
Silver
Bronze
commented on 13 Apr 2022, 10:39 AM

Done:)
Tags
ListPicker
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or