XAML 当包含多行标签时,MAUI中的弹出窗口被裁剪

1l5u6lss  于 2023-09-28  发布在  其他
关注(0)|答案(2)|浏览(122)

我试图在.Net MAUI中生成自定义弹出窗口,以便在我的应用程序中给予一些信息和消息。我遇到了一个问题,当我的弹出窗口中显示的文本消息超过一行时,弹出窗口会被裁剪,底部的按钮不会完全显示。
举例来说:
单线标签:

多行标签:

我的弹出窗口的XAML代码

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
           xmlns:utils="clr-namespace:MauiUtils"
           x:Class="MauiUtils.Popups.DialogPopup"
           CanBeDismissedByTappingOutsideOfPopup="True">
    <Grid MinimumWidthRequest="350" HorizontalOptions="FillAndExpand" Background="Transparent">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" HorizontalOptions="FillAndExpand" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <utils:ImageTintColor x:Name="PopupIcon" Grid.Column="1" IsVisible="False" StyleClass="Popup" MaximumHeightRequest="40" MaximumWidthRequest="40" Margin="0, 5, 0, 5"/>
            <Label Grid.Column="2" x:Name="PopupTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" FontAttributes="Bold" Text="" MaximumWidthRequest="350" StyleClass="Popup"/>
        </Grid>

        <Grid Grid.Row="1">
            <Label x:Name="PopupContent" HorizontalTextAlignment="Center" FontSize="Medium" Margin="10" Text=""  StyleClass="Popup" VerticalOptions="FillAndExpand"/>
        </Grid>
         
        <Grid Grid.Row="2" Margin="0,0,0,10" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition x:Name="TogglableColumn" Width="1*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="ConfirmBtn" Grid.Column="0" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="ComfirmBtn_Clicked" StyleClass="Popup"/>
            <Button x:Name="CancelBtn" Grid.Column="1" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="CancelBtn_Clicked" IsVisible="True" StyleClass="Popup"/>
        </Grid>
    </Grid>
</mct:Popup>

相关的C#代码:

using CommunityToolkit.Maui.Views;
using System.Diagnostics;

namespace MauiUtils.Popups;

public partial class DialogPopup : Popup
{
    readonly Action ConfirmMethod;
    readonly Action CancelMethod;

    public DialogPopup(Action _ConfirmMethod = null, Action _CancelMethod = null, string _Title = "Dialog", string _IconSource = "", string _Content = "Lorem ipsum", bool _ShowCancelBtn = true, string _ConfirmBtnLabel = "Yes", string _CancelBtnLabel = "No", bool _TapOutDismiss = true)
    {
        ConfirmMethod = _ConfirmMethod;
        CancelMethod = _CancelMethod;
        this.CanBeDismissedByTappingOutsideOfPopup = _TapOutDismiss;

        InitializeComponent();

        PopupTitle.Text = _Title;

        if (_IconSource != "")
        {
            try
            {
                PopupIcon.Source = _IconSource;
                PopupIcon.IsVisible = true;
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
        }

        PopupContent.Text = _Content;
        ConfirmBtn.Text = _ConfirmBtnLabel;
        CancelBtn.IsVisible = _ShowCancelBtn;
        if (!CancelBtn.IsVisible)
        {
            TogglableColumn.Width = new GridLength(0);
        }
        CancelBtn.Text = _CancelBtnLabel;
    }

    private void ComfirmBtn_Clicked(object sender, EventArgs e)
    {
        ConfirmMethod?.Invoke();
        Close();
    }

    private void CancelBtn_Clicked(object sender, EventArgs e)
    {
        CancelMethod?.Invoke();
        Close();
    }
}
piwo6bdm

piwo6bdm1#

不鼓励广泛使用auto-使用Grid s调整大小。由于您只使用行作为外部Grid,因此您可能希望将其更改为VerticalStackLayout,这应该可以解决与多行标签相关的布局问题:

<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:mct="clr-namespace:CommunityToolkit.Maui.Views;assembly=CommunityToolkit.Maui"
           xmlns:utils="clr-namespace:MauiUtils"
           x:Class="MauiUtils.Popups.DialogPopup"
           CanBeDismissedByTappingOutsideOfPopup="True">

    <VerticalStackLayout MinimumWidthRequest="350" HorizontalOptions="Fill" Background="Transparent">

        <Grid HorizontalOptions="Fill" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <utils:ImageTintColor x:Name="PopupIcon" Grid.Column="1" IsVisible="False" StyleClass="Popup" MaximumHeightRequest="40" MaximumWidthRequest="40" Margin="0, 5, 0, 5"/>
            <Label Grid.Column="2" x:Name="PopupTitle" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Large" FontAttributes="Bold" Text="" MaximumWidthRequest="350" StyleClass="Popup"/>
        </Grid>

        <Grid>
            <Label x:Name="PopupContent" HorizontalTextAlignment="Center" FontSize="Medium" Margin="10" Text="" StyleClass="Popup" VerticalOptions="Center"/>
        </Grid>
         
        <Grid Margin="0,0,0,10" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition x:Name="TogglableColumn" Width="1*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="ConfirmBtn" Grid.Column="0" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="ComfirmBtn_Clicked" StyleClass="Popup"/>
            <Button x:Name="CancelBtn" Grid.Column="1" Text="" HorizontalOptions="Fill" Margin="20, 0, 20, 0" FontSize="Medium" Clicked="CancelBtn_Clicked" IsVisible="True" StyleClass="Popup"/>
        </Grid>

    </VerticalStackLayout>

</mct:Popup>

或者,如果你想在外部坚持使用Grid,你也可以尝试更改行定义的值,并将auto的使用限制在单行或使用*

<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="auto"/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

或者:

<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="80"/>
</Grid.RowDefinitions>

另外请注意,*AndExpand LayoutOptions在MAUI中已被弃用,并将在未来版本中删除。

a9wyjsp7

a9wyjsp72#

https://github.com/CommunityToolkit/Maui/存储库中记录了一个问题,即如果弹出窗口的内容没有显式设置高度,则弹出窗口无法正确计算其窗口高度。
您可以通过在外部Grid上设置HeightRequest来使窗口变大,而不是试图将Popup内容压缩到小窗口中。你可以聪明一点,先测量一下内容,但既然管道中有修复程序,我就不会把它复杂化。
参见[BUG] Popup Height & Long Text #1353/[BUG]? Popup does not wrap content (on Android) #1150
下面的代码应该可以解决这个问题:

相关问题