Maui - The size of the grid columns changes while typing
I'm Targeting window platform.
I have created a contentview with a grid within like:
<Grid RowDefinitions="auto,auto,auto,auto,auto,auto,auto" ColumnDefinitions="*,*,*"
BackgroundColor="Yellow"
ColumnSpacing="3" RowSpacing="3">
<Entry Placeholder="Strada"
Grid.ColumnSpan="2"
ToolTipProperties.Text="Strada"
Text="{Binding Indirizzo.Strada}" />
<Entry ToolTipProperties.Text="Civico"
Grid.Column="2"
Text="{Binding Indirizzo.Civico}" />
<Entry Placeholder="Cap"
Grid.Row="1"
ToolTipProperties.Text="Cap"
Text="{Binding Indirizzo.Cap}" />
<Entry ToolTipProperties.Text="Località"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Placeholder="Località"
Text="{Binding Indirizzo.Localita}" />
<Entry Placeholder="Provincia"
Grid.Row="2"
Grid.ColumnSpan="3"
ToolTipProperties.Text="Provincia"
Text="{Binding Indirizzo.Provincia}" />
<Entry Placeholder="Nazione"
Grid.Row="3"
Grid.ColumnSpan="3"
Text="{Binding Indirizzo.Nazione}"
ToolTipProperties.Text="Nazione di provenienza" />
<Switch IsToggled="{Binding Indirizzo.Attivo}"
Grid.Row="4"
ToolTipProperties.Text="Attivare o disattivare l'indirizzo" />
<Button Text="Save"
Grid.Row="5"
Grid.Column="0" Grid.ColumnSpan="1"
BackgroundColor="DodgerBlue"
MinimumHeightRequest="15"
Command="{Binding SaveCommand}"
CornerRadius="0"
Padding="20,5"/>
<Button Text="Reset"
Grid.Row="5"
Grid.Column="1"
BackgroundColor="Red"
MinimumHeightRequest="15"
CornerRadius="0"
Padding="20,5"
Command="{Binding ResetCommand}"/>
This contentview is used in another contentview as:
<views:IndirizzoImpiegatoTemplate Grid.Row="4"
MaximumWidthRequest="600"
BindingContext="{Binding Impiegato.Residenza}"
HorizontalOptions="Start"
Grid.Column="1"/>
At the start, the grid does not use all the available space. I show you what happen:
And the text color of the save button is black, not white like the reset button.
<Button Text="Save"
Grid.Row="5"
Grid.Column="0" Grid.ColumnSpan="1"
BackgroundColor="DodgerBlue"
MinimumHeightRequest="15"
Command="{Binding SaveCommand}"
CornerRadius="0"
Padding="20,5"/>
<Button Text="Reset"
Grid.Row="5"
Grid.Column="1"
BackgroundColor="Red"
MinimumHeightRequest="15"
CornerRadius="0"
Padding="20,5"
Command="{Binding ResetCommand}"/>
If I remove Command it work fine.
Update
public partial class IndirizzoImpiegatoViewModel:ObservableObject
{
IndirizzoImpiegatoModelView? _old;
IDialogService _dialog;
public IndirizzoImpiegatoViewModel(ICollection<IndirizzoImpiegatoModel>? indi=null)
{
_dialog =IPlatformApplication.Current!.Services.GetRequiredService<IDialogService>();
if (indi is not null)
Indirizzi = new(indi!.Select(c => new IndirizzoImpiegatoModelView(c)));
//else Indirizzi = new();
Indirizzo = new();
Indirizzo.PropertyChanged += (s, e) =>
{
SaveCommand.NotifyCanExecuteChanged();
};
}
[ObservableProperty] IndirizzoImpiegatoModelView? _indirizzo;
[ObservableProperty]
ObservableCollection<IndirizzoImpiegatoModelView>? _indirizzi;
[ObservableProperty] IndirizzoImpiegatoModelView? _indirizzoSelezionato;
[RelayCommand(CanExecute =nameof(CanSave))]
void Save()
{
if(Indirizzi is null)Indirizzi=new();
if(_old is null)
Indirizzi!.Add(Indirizzo!);
else
{
IndirizzoImpiegatoModelView? indiToEdit=Indirizzi.Where(c=>c.Id==_old.Id).FirstOrDefault();
indiToEdit = Indirizzo;
}
Indirizzo=new();
}
bool CanSave()
{
if(Indirizzo!.HasErrors)return false;
if (_old is not null && _old.IsEqualJson(Indirizzo)) return true;
if (!Indirizzo!.IsEqualJson(_old!)) return true;
else return false;
}
[RelayCommand]
async Task DeleteItem(IndirizzoImpiegatoModelView item)
{
var result=await _dialog.DisplayAlertYesNoAsync("Elimina item", "Desideri eliminare l'item selezionato?", "Si", "No");
if(result)
Indirizzi?.Remove(item);
}
[RelayCommand]
void EditItem(IndirizzoImpiegatoModelView item)
{
Indirizzo=item;
}
[RelayCommand]
void Reset()
{
Indirizzo = new();
}
}
This is parent template. It is a contentview:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.Views.EmploeeTemplate"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
xmlns:mod="clr-namespace:MauiApp1.ViewModel"
xmlns:views="clr-namespace:MauiApp1.Views"
x:DataType="mod:ImpiegatoViewModel">
<ContentView.Resources>
<Style TargetType="Entry">
<Setter Property="TextTransform"
Value="Uppercase" />
<Setter Property="ClearButtonVisibility"
Value="WhileEditing" />
</Style>
</ContentView.Resources>
<Grid RowDefinitions="auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto,auto"
ColumnDefinitions="auto,auto" ColumnSpacing="5" RowSpacing="5" Margin="20">
<Label Text="Immagine"
FontAttributes="Bold"
HorizontalTextAlignment="End" />
<Border Stroke="Gray"
StrokeThickness="1"
Grid.Column="1"
HorizontalOptions="Start"
Padding="3">
<Image MinimumWidthRequest="150"
MaximumWidthRequest="200"
HorizontalOptions="Start"
MinimumHeightRequest="150"
MaximumHeightRequest="200"
BackgroundColor="LightGray"
Aspect="AspectFit"
Source="{Binding Impiegato.Immagine.FullPath,Mode=TwoWay}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SelectImageCommand}" />
</Image.GestureRecognizers>
</Image>
</Border>
<Label FontAttributes="Bold"
HorizontalOptions="End"
VerticalOptions="Center"
Text="Cognome e nome"
Grid.Row="1" />
<HorizontalStackLayout Spacing="5" Grid.Column="1" Grid.Row="1">
<Entry Placeholder="Cognome"
MinimumWidthRequest="200"
Text="{Binding Impiegato.Cognome}"/>
<Entry Placeholder="Nome"
MinimumWidthRequest="200"
Text="{Binding Impiegato.Nome}"/>
</HorizontalStackLayout>
<Label FontAttributes="Bold"
Text="Luogo nascita"
HorizontalOptions="End"
VerticalOptions="Center"
Grid.Row="2" />
<HorizontalStackLayout Spacing="5"
Grid.Column="1"
Grid.Row="2">
<Entry Placeholder="Località nascita"
MinimumWidthRequest="150"
Text="{Binding Impiegato.LuogoNascita}" />
<Entry Placeholder="Provincia nascita"
MinimumWidthRequest="150"
Text="{Binding Impiegato.ProvinciaNascita}" />
<Entry Placeholder="Nazionalità"
MinimumWidthRequest="150"
Text="{Binding Impiegato.Nazionalita}" />
</HorizontalStackLayout>
<Label FontAttributes="Bold"
Text="Data nascita"
HorizontalOptions="End"
VerticalOptions="Center"
BackgroundColor="Yellow"
Grid.Row="3" />
<DatePicker Grid.Row="3" BackgroundColor="Yellow"
Grid.Column="1"
MinimumHeightRequest="12"
VerticalOptions="Center"
Date="{Binding Impiegato.DataNascita}" />
<Label FontAttributes="Bold"
Text="Residenza"
HorizontalOptions="End"
VerticalOptions="Start"
BackgroundColor="Yellow"
Grid.Row="4" />
<views:IndirizzoImpiegatoTemplate Grid.Row="4"
MaximumWidthRequest="600"
BindingContext="{Binding Impiegato.Residenza}"
HorizontalOptions="Start"
Grid.Column="1"/>
</Grid>
</ContentView>
Tihi is IndirizzoImpiegatoTemplate. It is a contentview:
<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mod="clr-namespace:MauiApp1.ViewModel"
xmlns:mv="clr-namespace:MauiApp1.ModelView"
x:DataType="mod:IndirizzoImpiegatoViewModel"
x:Class="MauiApp1.Views.IndirizzoImpiegatoTemplate">
<ContentView.Resources>
<!--<DataTemplate x:Key="ItemTemplate" x:DataType="mv:IndirizzoImpiegatoModelView">
<HorizontalStackLayout Padding="5">
<Label>
<Label.Text>
<MultiBinding StringFormat="{}{0}, {1}
{2} {3}
{4}">
<Binding Path="{Binding Strada}"/>
<Binding Path="{Binding Civico}" />
<Binding Path="{Binding Cap}" />
<Binding Path="{Binding Localita}" />
<Binding Path="{Binding Provincia}" />
</MultiBinding>
</Label.Text>
</Label>
<ImageButton Source="edit.svg"
x:DataType="mod:IndirizzoImpiegatoViewModel"
Command="{Binding EditItemCommand}"
CommandParameter="{Binding}" />
<ImageButton Source="delete.svg"
x:DataType="mod:IndirizzoImpiegatoViewModel"
Command="{Binding DeleteItemCommand}"
CommandParameter="{Binding}"/>
</HorizontalStackLayout>
</DataTemplate>-->
</ContentView.Resources>
<Grid RowDefinitions="auto,auto,auto,auto,auto,auto,auto" ColumnDefinitions="*,*,*"
BackgroundColor="Yellow"
ColumnSpacing="3" RowSpacing="3">
<Entry Placeholder="Strada"
Grid.ColumnSpan="2"
ToolTipProperties.Text="Strada"
Text="{Binding Indirizzo.Strada}" />
<Entry ToolTipProperties.Text="Civico"
Grid.Column="2"
Text="{Binding Indirizzo.Civico}" />
<Entry Placeholder="Cap"
Grid.Row="1"
ToolTipProperties.Text="Cap"
Text="{Binding Indirizzo.Cap}" />
<Entry ToolTipProperties.Text="Località"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Placeholder="Località"
Text="{Binding Indirizzo.Localita}" />
<Entry Placeholder="Provincia"
Grid.Row="2"
Grid.ColumnSpan="3"
ToolTipProperties.Text="Provincia"
Text="{Binding Indirizzo.Provincia}" />
<Entry Placeholder="Nazione"
Grid.Row="3"
Grid.ColumnSpan="3"
Text="{Binding Indirizzo.Nazione}"
ToolTipProperties.Text="Nazione di provenienza" />
<Switch IsToggled="{Binding Indirizzo.Attivo}"
OnColor="DodgerBlue"
Grid.Row="4"
ToolTipProperties.Text="Attivare o disattivare l'indirizzo" />
<Button Text="Save"
Grid.Row="5"
Grid.Column="0" Grid.ColumnSpan="1"
BackgroundColor="DodgerBlue"
MinimumHeightRequest="15"
CornerRadius="0"
Command="{Binding SaveCommand}"
Padding="20,5"/>
<Button Text="Reset"
Grid.Row="5"
Grid.Column="1"
BackgroundColor="Red"
MinimumHeightRequest="15"
CornerRadius="0"
Padding="20,5"
Command="{Binding ResetCommand}"/>
<FlexLayout BindableLayout.ItemsSource="{Binding Indirizzi}"
Grid.Row="6"
Grid.ColumnSpan="3"
Direction="Row"
Wrap="Wrap"
JustifyContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="mv:IndirizzoImpiegatoModelView">
<Border Margin="0,0,3,3"
StrokeThickness="4"
BackgroundColor="BlanchedAlmond"
Stroke="Black">
<Border.Triggers>
<DataTrigger TargetType="Border"
Binding="{Binding Attivo}"
Value="true">
<Setter Property="BackgroundColor"
Value="Bisque" />
<Setter Property="ToolTipProperties.Text"
Value="Indirizzo attivo" />
<Setter Property="Stroke"
Value="Red" />
</DataTrigger>
</Border.Triggers>
<Grid RowDefinitions="auto,auto,auto"
ColumnDefinitions="auto,auto,auto"
ColumnSpacing="10"
Padding="5">
<HorizontalStackLayout Spacing="5">
<Label Text="{Binding Strada}"
FontAttributes="Bold"
VerticalOptions="Center"
MinimumHeightRequest="12" />
<Label Text="{Binding Civico}"
VerticalOptions="Center"
FontAttributes="Bold"
MinimumHeightRequest="12"/>
</HorizontalStackLayout>
<HorizontalStackLayout Grid.Row="1"
Spacing="5">
<Label Text="{Binding Cap}"/>
<Label Text="{Binding Localita}"/>
<Label Text="{Binding Provincia}"/>
</HorizontalStackLayout>
<ImageButton Source="edit.png"
BackgroundColor="Transparent"
Grid.Column="1"
Grid.RowSpan="3"
MinimumHeightRequest="24"
MaximumHeightRequest="24"
MinimumWidthRequest="24"
MaximumWidthRequest="24"
HeightRequest="16"
WidthRequest="16"
x:DataType="mv:IndirizzoImpiegatoModelView"
Command="{Binding EditItemCommand,Source={RelativeSource AncestorType={x:Type mod:IndirizzoImpiegatoViewModel}},x:DataType=mod:IndirizzoImpiegatoViewModel}"
CommandParameter="{Binding}"
HorizontalOptions="End" />
<ImageButton Source="delete.png"
BackgroundColor="Transparent"
Grid.Column="2"
Grid.RowSpan="3"
MinimumHeightRequest="24"
MinimumWidthRequest="24"
HeightRequest="24"
Command="{Binding DeleteItemCommand,Source={RelativeSource AncestorType={x:Type mod:IndirizzoImpiegatoViewModel}},x:DataType=mod:IndirizzoImpiegatoViewModel}"
HorizontalOptions="End"
CommandParameter="{Binding}" />
<Label Grid.Row="2"
Text="{Binding Nazione}" />
</Grid>
</Border>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</Grid>
</ContentView>
I use only one page that contain a syncfusion tab control. The tabitems contains contentviews.
I don't understand how the code behind could impact the functionality of the grid control base.
Thanks
Solution
- For the first question
At the start, the grid does not use all the available space.
This is because you set MaximumWidthRequest for the ContentView. As you type more in the Entry, the width will increase until it reach the limits.
<views:IndirizzoImpiegatoTemplate Grid.Row="4"
MaximumWidthRequest="600"
The easiest way is to set WidthRequest="600" instead.
- For the second question
And the text color of the save button is black, not white like the reset button.
The reason why the save button is black is because it's in the disabled state, which means the save button cannot be executed now. As the logic in the CanSave method is a little bit complex, I cannot understand fully now. But an easy way to verify is to just return true or return false in the CanSave method, e.g.,
bool CanSave()
{
//You can try return true or false to see the difference for the text color
return true;
}
When you remove the Command, the button is in its default enabled state, and the text color is white again.
Please note that the default text color in white and you can change it by setting the text color property for the Button.
<Button Text="Try another color"
TextColor="Blue"
...
Hope it helps!
- MAUI: Keep audio playing when navigating to a new page
- How to Implement an Audio Playback Progress Slider in .NET MAUI?
- How to Stop Previous Audio When Playing a New One in .NET MAUI
- How to use MultiBinding in net maui?
- SkiaSharp in Blazor for desktop app without WASM ( Blazor Hybrid? )
- .NET MAUI Blazor Hybrid - cannot resolve clr-namespace for Components.Routes
- Maui - The size of the grid columns changes while typing
- Building .Net MAUI application with VSCode 'Platform/Android/google-services.json' would result in a file outside of the app bundle and cannot be used
- .NET MAUI: WebView Height Not Adjusting Dynamically in Custom WebView on iOS platform
- .NET MAUI App without Shell - Floating Tabbar
- .NET MAUI: The name 'InitializeComponent' does not exist in the current context
- Maui.Storage.Preferences Not Persisting Values After App Closure (.NET 8)
- .NET Maui PropertyChanged event is not updating XAML view
- .Net Maui Android Align entry control immediately to right of label
- MAUI / .NET 8 - QR Code Scanner (ZXing) not detecting codes
- New .Net MAUI App project throws 'The name 'InitializeComponent' does not exist in the current context' build errors
- Grouped CollectionView in .NET MAUI
- Selecting ContentView based on condition in .NET MAUI
- Blazor Hybrid window move event?
- .Net Maui App bar graph throwing XLS0414 error unexpectedly
- Use resx files for localization in .NET 9 Maui
- Write to the console in .net MAUI
- How to create Axis in XAML in LiveCharts2, MAUI
- MAUI CollectionView Selected style only works on first item
- MAUI - The project cannot be launched for Android. Please check the error list for more details
- MAUI - Buttons interfere with each other
- Loosing XML cryptographic tooling in android release mode of a MAUI hybrid app
- .NET MAUI Capture photo and capture video in the same view
- Custom DatePicker in .NET MAUI
- MAUI - Binding Issue: ActivityIndicator in BaseContentPage Not Updating from Inherited ViewModel