主页 / coding / 问题 / 79479574
Accepted
Kraken
Asked: 2025-03-03 02:58:42 +0800 CST

Maui - 打字时网格列的大小会发生变化

  • 772

我的目标是窗口平台。

我已经创建了一个带有网格的内容视图，如下所示：

    <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}"/>

此 contentview 在另一个 contentview 中用作：

        <views:IndirizzoImpiegatoTemplate Grid.Row="4"
                                      MaximumWidthRequest="600"
                                      BindingContext="{Binding Impiegato.Residenza}"
                                      HorizontalOptions="Start"
                                      Grid.Column="1"/>

一开始，网格并没有使用所有可用空间。我向你展示发生了什么：

动态图

并且保存按钮的文字颜色是黑色，而不是像重置按钮那样是白色。

        <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}"/>

如果我删除命令，它可以正常工作。

更新

    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();
    }

}

这是父模板。它是一个内容视图：

    <?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 是 IndirizzoImpiegato 模板。这是一个内容视图：

<?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}&#x0a;{2} {3}&#x0a;{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>

我只使用一个包含 syncfusion 选项卡控件的页面。tabitems 包含 contentviews。

我不明白背后的代码如何影响网格控制基础的功能。

谢谢

maui

1 个回答

  1. Best Answer
    1. 对于第一个问题

    开始时，网格并未使用所有可用空间。

    这是因为您设置了MaximumWidthRequest。ContentView随着您在 中输入更多内容Entry，宽度将会增加，直到达到限制。

    <views:IndirizzoImpiegatoTemplate Grid.Row="4"
                                  MaximumWidthRequest="600"

    最简单的方法是设置WidthRequest="600"。

    1. 对于第二个问题

    并且保存按钮的文字颜色是黑色，而不是像重置按钮那样是白色。

    保存按钮之所以是黑色的，是因为它处于禁用状态，这意味着保存按钮现在无法执行。由于该CanSave方法中的逻辑有点复杂，我现在无法完全理解。但一个简单的验证方法是在方法中直接return true或，例如，return falseCanSave

    bool CanSave()
{
    //You can try return true or false to see the difference for the text color
    return true;         
}

    当您删除该命令时，按钮处于其默认启用状态，并且文本颜色再次变为白色。

    请注意，默认文本颜色为白色，您可以通过设置按钮的文本颜色属性来更改它。

    <Button Text="Try another color"     
        TextColor="Blue"
        ...

    希望有帮助！

    • 0

相关问题