Constants for Thickness

Viewed 100

I am looking for a way to define Thickness in Xaml based on application wide defined constants, e.g.

<StackLayout Margin="MSpace,SSpace,LSpace,MSpace">
   <Label Text="Just an example"/>
</StackLayout>

where SSpace, MSpace and LSpace are constants defined once in the app.

If I was only dealing with my own custom controls only I could probably write my own TypeConverter (c# how to implement type converter) and decorate each property where appropriate with something like

[TypeConverter(typeof(ConstantStringToThicknessConverter))]

I don't think this is an option since I want to use my string of constants with any type of Maui layout. I am looking for a solution where everything is done in xaml with the exception of defining the constants.

4 Answers

You can achieve this function by using c# .

please refer to the following code:

1.create class Constants.cs

public  class Constants 
{

    public static readonly int MSpace = 20;
    public static readonly int SSpace = 20;
    public static readonly int LSpace = 20;
}

2.A simple usage :

   public class TestPage1 : ContentPage 
{

    Thickness thickness = new Thickness (Constants.MSpace, Constants.SSpace, Constants.LSpace, Constants.MSpace);

    public TestPage1()
    {
        Content = new StackLayout
        { 
            BackgroundColor= Color.Yellow,

            Children = {
                new Label { Text = "Welcome to Xamarin.Forms!" ,Margin= thickness }
                
            }
        };
    }
}

Update:

can I do the same thing in xaml?

You can bind the defined thickness to your control as a whole in your xaml.

Please refer to the following code:

public  class Constants 
{

    public static readonly int MSpace = 50;
    public static readonly int SSpace = 50;
    public static readonly int LSpace = 50;


    public Thickness thickness
    {
        get
        {
            return new Thickness(Constants.MSpace, Constants.SSpace, Constants.LSpace, Constants.MSpace);
        }
    }
}

And a simple usage :

   <ContentPage.BindingContext> 
        <formapp908:Constants></formapp908:Constants>
    </ContentPage.BindingContext>
    
    
    <ContentPage.Content>
        <StackLayout>

            <BoxView HorizontalOptions="FillAndExpand" BackgroundColor="Red" HeightRequest="100"></BoxView>

            <Label Text="Welcome to Xamarin.Forms!"   Margin="{ Binding  thickness}" BackgroundColor="Green" HeightRequest="80"
                HorizontalOptions="Center" />
        </StackLayout>

Here's what I've been doing lately.

namespace MyApp.UI;

public static class UiConstants 
{
    public static readonly Thickness DefaultMargin = new Thickness(10, 10, 10, 10);
}
<ContentPage ...
    xmlns:ui="clr-namespace:MyApp.UI">
    <StackLayout Margin="{x:Static ui:UiConstants.DefaultMargin}">
        <Label Text="Just an example"/>
    </StackLayout>
</ContentPage>

Maybe using styles without keys?

In your App.xaml.cs

    const double MSpace = 30;
    const double SSpace= 30;
    const double LSpace= 30;

    public App()
    {
        InitializeComponent();
        // You can replace this with a constant file if you want too
        Application.Current.Resources.Add("MSpace", MSpace);
        Application.Current.Resources.Add("SSpace", SSpace);
        Application.Current.Resources.Add("LSpace", LSpace);
        MainPage = new MainPage();
    }

Then in your App.xaml

<Application.Resources>
    <Style TargetType="StackLayout">
        <Setter Property="Margin" Value="{DynamicResource MSpace, SSpace, LSpace}" />
    </Style>
</Application.Resources>

Then wherever in your app

    <StackLayout>
        <Label Text="Just an example" />
    </StackLayout>

Define Thickness in XAML Resources:

<x:Double x:Key="left">10</x:Double>
<x:Double x:Key="top">20</x:Double>
<x:Double x:Key="right">30</x:Double>
<x:Double x:Key="bottom">40</x:Double>

<Thickness x:Key="thickness" 
           Left="{StaticResource left}"
           Top="{StaticResource top}"
           Right="{StaticResource right}"
           Bottom="{StaticResource bottom}"/>

Usage in XAML StackLayout:

<StackLayout Margin="{StaticResource thickness}" />

Thickness can also be used like this in a StackLayout Margin:

<StackLayout>
  <StackLayout.Margin>
    <Thickness Left="{StaticResource left}"
               ...
  </StackLayout.Margin>
  ...

With constants:

namespace ConstantsNamespace
{
  public static class Constants
  {
    public const double Left = 10;
    ...

Usage of constants in XAML Thickness:

xmlns:ns="clr-namespace:ConstantsNamespace;assembly=Constants.Assembly"
...
<Thickness Left="{x:Static ns:Constants.Left}"
           ...
Related