CODEWITHSUNDEEP
maui
Wallace B. McClure
Wallace B. McClure

Reputation: 1555

Set Button half the window size in .NET Maui

I'd like to set the size of a button in .NET Maui to take up half of the window size, or some other fraction. I want to have some big buttons, and I can not lie. If I was doing this in html/css, I would set the width to 50%. In .NET Maui, I would think that I would set the widthrequest to 50%. There doesn't seem to be a way to do that because .WidthRequest only takes a double. So, I thought I would get the width of the current window. I try

var width = DeviceDisplay.Current.MainDisplayInfo.Width;

That only seems to return a zero when I try this in windows in debug mode. Googling doesn't seem to be much help. Is there a way to set a button to a width?

TIA

Upvotes: 6

Views: 2989

Answers (3)

HEDGEWIZARDS
HEDGEWIZARDS

Reputation: 151

You can set width straight from xaml using a custom MarkupExtension

using Microsoft.Maui.Controls.Xaml;
using Microsoft.Maui.Devices;
using System;

namespace Example.Markup
{
    public class ScreenFraction : IMarkupExtension<double>
    {
        public enum Dimension
        {
            Width,
            Height
        }

        public double Fraction { get; set; }
        public Dimension Direction { get; set; } = Dimension.Width;

        public double ProvideValue(IServiceProvider serviceProvider)
        {
            double fullSize;
            var displayInfo = DeviceDisplay.Current.MainDisplayInfo;
            if (Direction == Dimension.Width)
            {
                fullSize = displayInfo.Width / displayInfo.Density;
            }
            else if (Direction == Dimension.Height)
            {
                fullSize = displayInfo.Height / displayInfo.Density;
            }
            else
            {
                throw new InvalidCastException($"Unexpected {nameof(ScreenFraction)} Direction {Direction}");
            }

            return Fraction * fullSize;
        }

        object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)
        {
            return (this as IMarkupExtension<double>).ProvideValue(serviceProvider);
        }
    }
}

you can consume it in xaml like this

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:markup="clr-namespace:Example.Markup">
    <BoxView
        Color="Green"
        MaximumWidthRequest="{markup:ScreenFraction Direction=Width, Fraction=0.8}"/>
</ContentView>

Upvotes: 2

Jianwei Sun - MSFT
Jianwei Sun - MSFT

Reputation: 4332

I test the code and it work well:

<Button                
   x:Name="btn"                
   Text="btn"/>

double width= DeviceDisplay.Current.MainDisplayInfo.Width/4;    
public MainPage()
{        
   InitializeComponent();        
   btn.WidthRequest=width; 
}

Upvotes: 1

Andy
Andy

Reputation: 12276

Maui has proportional sizing for grid row and columns. You don't explain where you want your button but you can use multiples of * proportional.

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/grid?view=net-maui-7.0

<Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />

If you put a button in that middle row then it will be half the width of the grid and central.

Similarly, define 3 columns with * widths and you have a central cell half the width and half the height of the grid.

Upvotes: 2

Related Questions