Like & dislike in ViewModel

ABloxityABloxity Member ✭✭✭

how can I migrate this part of code to my ViewModel

this reference in my XAML page

Answers

  • igorkr_10igorkr_10 Member ✭✭✭

    ViewModel must have just data without any UI parts. You need to create your own control inherited from ContentView.

  • ABloxityABloxity Member ✭✭✭

    and how can it be done? I'm new to Xamarin.

    will there be an example?

  • igorkr_10igorkr_10 Member ✭✭✭
    edited September 2019

    I have create demo control for you:

    Liker.xaml:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="BillingMobile.Controls.Liker.Liker">
      <ContentView.Content>
          <StackLayout>
                <Label x:Name="LikeLabel" Text="Like">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnLikeTapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
                <Label x:Name="DislikeLabel" Text="Dislike">
                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="OnDislikeTapped"></TapGestureRecognizer>
                    </Label.GestureRecognizers>
                </Label>
            </StackLayout>
      </ContentView.Content>
    </ContentView>
    

    Liker.xaml.cs:

    public partial class Liker : ContentView
    {
        public static readonly BindableProperty StatusProperty = BindableProperty.Create(nameof(Status), typeof(LikeStatus), typeof(Liker), LikeStatus.Undefined, BindingMode.TwoWay, propertyChanged: OnStatusChanged);
    
        public LikeStatus Status
        {
            get { return (LikeStatus)GetValue(StatusProperty); }
            set { SetValue(StatusProperty, value); }
        }
    
        public Liker()
        {
            InitializeComponent();
        }
    
        private static void OnStatusChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (!(bindable is Liker liker))
            {
                return;
            }
            LikeStatus status = (LikeStatus)newValue;
            switch (status)
            {
                case LikeStatus.Undefined:
                    liker.LikeLabel.FontAttributes = liker.DislikeLabel.FontAttributes = FontAttributes.None;
                    break;
                case LikeStatus.Like:
                    liker.LikeLabel.FontAttributes = FontAttributes.Bold;
                    liker.DislikeLabel.FontAttributes = FontAttributes.None;
                    break;
                case LikeStatus.Dislike:
                    liker.LikeLabel.FontAttributes = FontAttributes.None;
                    liker.DislikeLabel.FontAttributes = FontAttributes.Bold;
                    break;
            }
        }
    
        private void OnDislikeTapped(object sender, EventArgs e)
        {
            this.Status = LikeStatus.Like;
        }
    
        private void OnLikeTapped(object sender, EventArgs e)
        {
            this.Status = LikeStatus.Dislike;
        }
    }
    
    public enum LikeStatus
    {
        Undefined = 0,
        Like = 1,
        Dislike = 2
    }
    

    In your page just add this control to layout:

    <Liker Status={Binding LikeStatus}/>

    In your ViewModel create property:

    private LikeStatus _like;
    public LikeStatus Like
    {
          get { return _like; }
          set
          {
               this.SetProperty(ref _like, value);
          }
     }
    

    You can use images instead of labels but the main mechanism for creating controls I have described.
    Warning: I did not test it

  • ABloxityABloxity Member ✭✭✭

    Thanks I will try it in a few moments

Sign In or Register to comment.