Marquee for Xamarin.Froms(IOS)

PoojaRawatPoojaRawat ✭✭INMember ✭✭

I have a StackLayout(View) inside of which I am having Image and Label aligned Horizontally (refer screenshot below). The Label should have a Marquee property. For that, we are using animation on the Label (using TranslateTo) and giving new X-position on tap gesture, when we click on the label the label starts moving right to left as Marquee, but it is overlapping the image. Is there any way to implement it in Xamarin.Forms IOS? so Marquee Label won't overlap the Image.

Answers

  • DK90DK90 ✭✭✭ USMember ✭✭✭

    Simple option is to change StackLayout to Absolute or RelativeLayout which will make Layout on Z-axis which should atleast fix the Label overlap on image issue.
    If changing that is not possible then you should try with the RaiseChild() in from Layout.
    try the below sample code and let us know whether this works.

    ListView.XAML
    <ContentPage.BindingContext>

    </ContentPage.BindingContext>

      <StackLayout Orientation="Vertical">
        <Label Text="Xamarin Forms CardView Demo"
                 VerticalOptions="Start"
                 HorizontalTextAlignment="Center"
                 VerticalTextAlignment="Center"
                 BackgroundColor="Transparent"
                 HorizontalOptions="CenterAndExpand" />
        <ListView x:Name="listView"
                  RowHeight="120"
                  ItemsSource="{Binding CardDataCollection}" >
          <ListView.ItemTemplate>
            <DataTemplate>
              <ViewCell>
                <StackLayout Orientation="Horizontal" x:Name="Layout" >
                  <Image x:Name="Image" Margin="5" Source="icon"/>
                  <StackLayout Orientation="Horizontal">
                  <Label x:Name="label"
                         HorizontalTextAlignment="Center"
                         VerticalTextAlignment="Center"
                         Text="Hello this is forms">
                    <Label.GestureRecognizers>
                      <TapGestureRecognizer Command="{Binding ClickToSendCommand}" CommandParameter="{x:Reference Layout }"/>
                    </Label.GestureRecognizers>
                  </Label>
                  </StackLayout>
                </StackLayout>
              </ViewCell>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
      </StackLayout>
    
    public class CardDataViewModel
        {
            public IList<CardDataModel> CardDataCollection { get; set; }
    
            public CardDataViewModel()
            {
                CardDataCollection = new List<CardDataModel>();
                GenerateCardModel();
            }
    
            private async void ClickCommandAction(Forms.View person)
            {
                var layout = person as StackLayout;
                var image = layout.FindByName<Image>("Image");
                layout?.RaiseChild(image);
                var textLabel = layout.FindByName<Label>("label");
                await textLabel.TranslateTo(-300, 0, 1000);
            }
    
            private void GenerateCardModel()
            {
                for (var i = 0; i < 10; i++)
                {
                    var cardData = new CardDataModel()
                    {
                        Title = "CardRow-No" + i,
                        Owner = "Card-No" + i,
                        AlertColor = i % 2 == 0 ? Color.Green : Color.Blue,
                        ClickToSendCommand = new Command<Forms.View>(ClickCommandAction)
                    };
                    CardDataCollection.Add(cardData);
                }
            }
        }
    
        public class CardDataModel
        {
            public string Title { get; set; }
            public string Owner { get; set; }
            public Color AlertColor { get; set; }
            public ICommand ClickToSendCommand { get; set; }
        }
    
  • PoojaRawatPoojaRawat ✭✭ INMember ✭✭

    Hi Dinesh,

    we tried raise child but it didn't work for us. for Marquee use for loop in label only it worked as Marquee .

    On click of Label Gesture:

    var marqueeLabelText = clickedRes.MarqueLabel;
    for (int i = 0; i < clickedRes.MarqueLabel.Length; i++) {

                       clickedRes.MarqueLabel= clickedRes.MarqueLabelSubstring(i, clickedMarqueeRes.ResourceMarque.Length - i);
                       await Task.Delay(300);
                            }
    
  • PoojaRawatPoojaRawat ✭✭ INMember ✭✭

    Thanks for Suggestion.... :)

  • LucaZieglerLucaZiegler ✭✭ USMember ✭✭
    edited August 6
    1. Create a custom class:

      public class MarqueeLabel : Label {}
      
    2. Use this custom class in your Xamarin Forms Layout.

    3. Add the Nuget package MarqueeLabel.iOS to your Xamarin.iOS project (Xamarin bindings for the MarqueeLabel).

    4. Create a custom label renderer in your Xamarin.iOS project:

      [assembly: ExportRenderer(typeof(Test.Forms.App.UI.Views.MarqueeLabel), typeof(TestMarqueeLabelRenderer))]
      namespace Test.Forms.App.iOS.Renderer
      {
          public class TestMarqueeLabelRenderer : LabelRenderer
          {
              protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
              {
                  var x = new MarqueeLabel.iOS.MarqueeLabel();
                  SetNativeControl(x);
                  base.OnElementChanged(e);
              }
          }
      }
      
Sign In or Register to comment.