How to design a calculator app with quadratic buttons?

Question

Hello fellow developers and enthusiasts,

I hope this message finds you well. I am currently working on my .NET Maui Calculator app and I have encountered a small challenge. I would greatly appreciate it if someone could assist me with making the buttons square-shaped within my app.

I have been able to create the buttons and they function properly, but I would like them to have equal height and width to achieve a square shape.

If any of you have experience or knowledge on how to adjust the button dimensions to make them square-shaped in the .NET Maui framework, I would be grateful for your guidance. It would be helpful if you could provide code snippets or step-by-step instructions to implement this feature.

Thank you in advance for your time and assistance. I look forward to hearing from you soon.

Best regards,
Josef

My Code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"              x:Class="Calculator.MainPage">     <Grid Padding="5">         <Grid.RowDefinitions>             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />             <RowDefinition Height="*" />         </Grid.RowDefinitions>          <Grid.ColumnDefinitions>             <ColumnDefinition Width="*" />             <ColumnDefinition Width="*" />             <ColumnDefinition Width="*" />             <ColumnDefinition Width="*" />         </Grid.ColumnDefinitions>          <Label Grid.Row="0" Grid.ColumnSpan="4" x:Name="ResultLabel" FontSize="30" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Margin="5" />          <Button Grid.Row="1" Grid.Column="0" Text="C" Clicked="OnClearClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="1" Grid.Column="1" Text="(" Clicked="OnBracketClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="1" Grid.Column="2" Text=")" Clicked="OnBracketClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="1" Grid.Column="3" Text="&lt;-" Clicked="OnDeleteClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />          <Button Grid.Row="2" Grid.Column="0" Text="7" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="2" Grid.Column="1" Text="8" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="2" Grid.Column="2" Text="9" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="2" Grid.Column="3" Text="/" Clicked="OnOperatorClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />          <Button Grid.Row="3" Grid.Column="0" Text="4" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="3" Grid.Column="1" Text="5" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="3" Grid.Column="2" Text="6" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="3" Grid.Column="3" Text="*" Clicked="OnOperatorClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />          <Button Grid.Row="4" Grid.Column="0" Text="1" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="4" Grid.Column="1" Text="2" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="4" Grid.Column="2" Text="3" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="4" Grid.Column="3" Text="-" Clicked="OnOperatorClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />          <Button Grid.Row="5" Grid.Column="0" Text="0" Clicked="OnNumberClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="5" Grid.Column="1" Text="." Clicked="OnDotClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="5" Grid.Column="2" Text="=" Clicked="OnEqualsClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />         <Button Grid.Row="5" Grid.Column="3" Text="+" Clicked="OnOperatorClicked" Margin="5" HeightRequest="{Binding ButtonSize}" WidthRequest="{Binding ButtonSize}" />     </Grid> </ContentPage> 

using System.ComponentModel; using System.Data; using System.Linq.Expressions; using System.Runtime.CompilerServices; using Microsoft.Maui.Controls;   namespace Calculator;  public partial class MainPage : ContentPage {     private string calculationExpression = string.Empty;     public double ButtonSize { get; set; }       public MainPage() 	{ 		InitializeComponent();         var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;         ResultLabel.Text = mainDisplayInfo.Width.ToString();         ButtonSize = ( mainDisplayInfo.Width - 50 ) / 6;         this.BindingContext = this;     }      private void OnNumberClicked(object sender, EventArgs e)     {         Button button = (Button)sender;         string number = button.Text;         calculationExpression += number;         ResultLabel.Text = calculationExpression;     }      private void OnOperatorClicked(object sender, EventArgs e)     {         Button button = (Button)sender;         string oper = button.Text;         calculationExpression += oper;         ResultLabel.Text = calculationExpression;     }       private void OnEqualsClicked(object sender, EventArgs e)     {         try         {             double result = Calculate();             ResultLabel.Text = result.ToString();         }         catch (Exception ex)         {             ResultLabel.Text = ex.Message;         }     }      private void OnClearClicked(object sender, EventArgs e)     {         calculationExpression = string.Empty;         ResultLabel.Text = calculationExpression;     }      private void OnDotClicked(object sender, EventArgs e)     {         calculationExpression += ".";         ResultLabel.Text = calculationExpression;     }      private void OnBracketClicked(object sender, EventArgs e)     {         Button button = (Button)sender;         string bracket = button.Text;         calculationExpression += bracket;         ResultLabel.Text = calculationExpression;     }      private void OnDeleteClicked(object sender, EventArgs e)     {         int length = calculationExpression.Length;         if(length > 0)          {             calculationExpression = calculationExpression.Substring(0, length - 1);         }         ResultLabel.Text = calculationExpression;     }      private double Calculate()     {         double result = (double) Convert.ToDouble(new System.Data.DataTable().Compute(calculationExpression, null));         calculationExpression = result.ToString();         return result;     } }  

Answer 1

Hello,

but I would like them to have equal height and width to achieve a square shape.

According to MAUI's official documentation, it is recommended that you use Style to customize the style of the button to make it a square.

Please refer to the following documentation and code sample:

• Style apps using XAML.

// define the style in ContentPage.
<ContentPage.Resources>
        <Style x:Key="BTNStyle" TargetType="Button">
            <Setter Property="HeightRequest" Value="50" />
            <Setter Property="WidthRequest" Value="50" />
        </Style>
</ContentPage.Resources>
// Use defined style.
<Button Grid.Row="1" Grid.Column="0" Text="C"  Margin="5" Style="{StaticResource BTNStyle}"/>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.