xaml - Adjust the text size in a ListView according to a parameter

Question

My Xamarin.Forms app displays the name of multiple items in a Listview. The name of the article is displayed by a Binding to the name field in the table that contains these articles (Panier).

I would like the user to be able to change the text size of the article name (when the screen resolution is low, the name is truncated).

To do this, I have provided a Parameters table which contains the size of the text chosen by the user.

But how do you indicate this in the xaml code?

Here's some of the xaml code:

<Label Text="{Binding Name}" 
       Margin="10,-4,0,0" FontSize="Medium" TextColor="Black" 
       FontAttributes="None"
       VerticalOptions="Start"
       Grid.Column="0"/>

So I would like to replace

FontSize="Medium"

With an instruction that would look like this:

FontSize="{Binding ???}"

The binding would fetch the value from the Parameters table. But to find the name, I have in the code behind the instruction

BindingContext = new Panier();

Panier() contains the Name field, but obviously does not contain the text size. You might need to change the BindingContext to go to the Parameters table, but in XAML code, FontSize is in the same place as Text.

To sum up: the user should be able to adjust the size of the text of the name of the articles displayed in the Listview himself.

Edit for to all those who answered me :

Excuse me, I am not an experienced developer, and I did not understand what you are offering me; I believe I will add a NameFontSize field in the Panier table. I can therefore in my xaml code have the following code:

FontSize="{Binding NameFontSize}";

The disadvantage of this solution is this additional field which means that each record will have a data concerning the size of the text, which will be the same for all the records of the table. It doesn't make much sense to repeat the same information for all records. If I am wrong and the solution you are proposing makes more sense, please explain it to me in more detail. Thank you very much.

Answer 1

You could add MyFontSize and MySizeName peoperty inside the ViewModel, then you can use MySizeName to set NamedSize.Value for MyFontSize. And you also can set doulbe value for MyFontSize directly.

The Xaml code :

<Label Text="Hello Label!" FontSize="{Binding MyFontSize}"/>

The ViewModel :

public class ContactViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private double myFontSize;

    public double MyFontSize
    {
        set
        {
            if (myFontSize != value)
            {
                myFontSize = value;
                OnPropertyChanged("MyFontSize");
            }
        }
        get
        {
            return myFontSize;
        }
    }

    private string mySizeName;

    public string MySizeName
    {
        set
        {
            if (mySizeName != value)
            {
                mySizeName = value;
                OnPropertyChanged("MySizeName");
                ConvertNameToSize();
                OnPropertyChanged("MyFontSize");
            }
        }
        get
        {
            return mySizeName;
        }
    }

   // convert SizeName to FontSize
    private void ConvertNameToSize()
    {
        if (mySizeName == "Default")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Header, typeof(Label));
        }
        else if (mySizeName == "Micro")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Micro, typeof(Label));
        }
        else if (mySizeName == "Small")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));
        }
        else if (mySizeName == "Medium")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label));
        }
        else if (mySizeName == "Large")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label));
        }
        else if (mySizeName == "Body")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Body, typeof(Label));
        }
        else if (mySizeName == "Header")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Header, typeof(Label));
        }
        else if (mySizeName == "Title")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Title, typeof(Label));
        }
        else if (mySizeName == "Subtitle")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Subtitle, typeof(Label));
        }
        else if (mySizeName == "Caption")
        {
            myFontSize = Device.GetNamedSize(NamedSize.Caption, typeof(Label));
        }else
        {
            myFontSize = Device.GetNamedSize(NamedSize.Header, typeof(Label));
        }
    }


    public ContactViewModel()
    {
        // set value for test 
        mySizeName = "Large";

        ConvertNameToSize();

    }
}

Here adding INotifyPropertyChanged for ViewModel, if the binded value be changed on runtime. The view will update automatically.

The effect: