mobile - MAUI: Resize all view components by default to handle different screen sizes and densities - Stack Overflow

admin管理员组

文章数量:1123230

I'm working on a .NET MAUI application where I need to apply scaling to all visual elements by default to handle different screen sizes and densities.

This is because I developed my app on an Android tablet and when I use it on an Android smartphone the dimensions of all the components remain too large.

I know there is a solution with OnIdiom but it seems like too long a solution to fit all my pages on the phone and also in some cases like phones too small or tablets too big it might work badly. I've currently found my solution that applying a variable to each component allows it to scale based on the screen size and density.

I want this scaling to be applied automatically without having to set a property on every single control in XAML. However, I need to ensure that explicitly set styles or properties on individual controls override this default scaling.

I've tried several approaches, but none have fully solved the problem, especially when dealing with popups, datatemplate and third-party controls.

This is my property:

public static class Scaling
{
    public static readonly BindableProperty IsScalingProperty =
        BindableProperty.CreateAttached(
            "IsScaling",
            typeof(bool),
            typeof(Scaling),
            false,
            propertyChanged: OnIsScalingChanged);

    public static bool GetIsScaling(BindableObject view)
    {
        return (bool)view.GetValue(IsScalingProperty);
    }

    public static void SetIsScaling(BindableObject view, bool value)
    {
        view.SetValue(IsScalingProperty, value);
    }

    private static void OnIsScalingChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is View view && newValue is bool isScaling && isScaling && (oldValue == null || !(bool)oldValue))
        {
            ApplyScaling(view);
        }
    }

    public static void ApplyScaling(View view)
    {
        EventHandler loadedHandler = null;

        loadedHandler = (sender, e) =>
        {
            ScaleProperties(view);

            view.Loaded -= loadedHandler;
        };

        view.Loaded += loadedHandler;
    }
}

And I can use it in XAML like this:

                <Grid
                    Padding="20"
                    ctrl:Scaling.IsScaling="True"
                    ColumnDefinitions="*,*,2*"
                    ColumnSpacing="20"
                    MaximumHeightRequest="600"
                    RowDefinitions="40,*,50"
                    RowSpacing="20"
                    WidthRequest="600"/>

I've tried many approaches like behaviors in app.xaml or defining implicit styles for each element, but it's very long and could be replaced by explicit keyed styles. The only solution I've found for now is to manually define where I need the property, but it would be more convenient to set it to true by default in all components.

The class that scales if defined manually works correctly but I don't know if it is the best way to scale the maui components based on the size and density of the screen.

Thanks for the help!

本文标签：