我试图在.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();
}
}
2条答案
按热度按时间piwo6bdm1#
不鼓励广泛使用
auto
-使用Grid s调整大小。由于您只使用行作为外部Grid,因此您可能希望将其更改为VerticalStackLayout,这应该可以解决与多行标签相关的布局问题:或者,如果你想在外部坚持使用
Grid
,你也可以尝试更改行定义的值,并将auto
的使用限制在单行或使用*
:或者:
另外请注意,
*AndExpand
LayoutOptions在MAUI中已被弃用,并将在未来版本中删除。a9wyjsp72#
https://github.com/CommunityToolkit/Maui/存储库中记录了一个问题,即如果弹出窗口的内容没有显式设置高度,则弹出窗口无法正确计算其窗口高度。
您可以通过在外部Grid上设置HeightRequest来使窗口变大,而不是试图将Popup内容压缩到小窗口中。你可以聪明一点,先测量一下内容,但既然管道中有修复程序,我就不会把它复杂化。
参见[BUG] Popup Height & Long Text #1353/[BUG]? Popup does not wrap content (on Android) #1150
下面的代码应该可以解决这个问题: