Make a marquee control for Xamarin.Forms

Some time ago, a demo version of a commercial project was made privately with xamarin.forms. Many of the controls/effects that have been broken by the domestic app, the XF does not have or can not find the corresponding implementation, there is no way to only personally write a few, the effect is OK, there is a bug.

This is one of them, at the beginning of the rush, casually write a poor effect, and eventually they took this piece from the app, I knew I would not consume this time ...

The General app in order to save space, will only leave a small piece of the lantern, a lot of text wheel turn display, but also only a line of text, beyond the hidden part; If you see which app has a big piece to go to, it means the designer of the app is a tease, and so is the product manager.

Considering the size of the phone screen, moving text from left to right is completely inappropriate, not to mention the left dangling right.

Delivered version, I made a zoom animation effect, the result is not ideal, it is likely that the other side eventually took this piece to take away.

These two days changed, only from the bottom to scroll up the animation, so that the overall coordination, concise and beautiful.

First look at the effect:

Source:
Https://github.com/gruan01/XFThemesTest/blob/master/App1/App1/Marquee.cs

Https://github.com/gruan01/XFThemesTest/blob/master/App1/App1/MainPage.xaml

1, control type selection

This feature simply removes the text from the interface, without having to use the native Android/ios control, so there is no complex renderer

Each text is a child control, so it must be derived from Contentview or Layout, and Contentview can have only one direct child control, so it is not required.

Each child control can move freely within the display scope of the parent container, so you can only choose to derive from Absolutelayout.

For Absolutelayout, refer to:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/

Note that the absolutelayoutflags.xxxproportional, will be set to XXX proportionally.
Like what:

 
 
1 <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0.5,0.5,10,10"
2 AbsoluteLayout.LayoutFlags="PositionProportional" />

A boxview with a length of 10 and 10 at the center of the absolutelayout.

2, animation

XF provides a basic set of animation interfaces for controls, including transparency gradient (Fade), Position Movement (Layout), rotation (Rotate), Twist (Translate)

Specific reference:
https://developer.xamarin.com/api/type/Xamarin.Forms.ViewExtensions/

It is important to note that, like WinForm or WPF, you cannot manipulate controls directly in multiple threads, and if you have to use multiple threads, use the following method:

 
 
1 await Task.Delay(this.Interval)
2 .ContinueWith(t => this.Run(), TaskScheduler.FromCurrentSynchronizationContext());

Also note that Layoutto cannot be used in conjunction with Absolutelayout.layoutbounds.

3, data source and DataTemplate

The child controls are reorganized when the data source changes, or when changes are made within the data source (incremental deletions). You can initialize or modify the child controls by reorganizing the events on the child controls, and the modifications are simple and not discussed, but beginners generally have the confusion: how to convert data from data sources into child controls?

It's actually very simple:
Typically a control with a data source will specify ItemTemplate (DataTemplate), the Datatemplate.createcontent method can generate ItemTemplate specified content, and then the resulting content of the BindingContext is specified as data in the data source.

 
1 private View GetChildView(object data) {
 2     View view = null;
 3     if (this.ItemTemplate != null) {
 4         if (this.ItemTemplate != null)
 5             view = (View)this.ItemTemplate.CreateContent();
 6 
 7         if (view != null) {
 8             view.BindingContext = data;
 9         }
10     }
11 
12     if (view == null) {
13         view = new Label() { Text = data?.GetType().FullName };
14     }
15     return view;
16 }

Overall code is relatively simple, not repeat.

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

Xamarin.Forms Themes is still the Preview stage, please do not refer to the use of the source code usage.

Make a marquee control for Xamarin.Forms