Xamarin Form中如何让AlertBox正确渲染解析带HTML标签的消息

问题根因 #

你当前使用的Acr.UserDialogs库的默认弹窗仅支持纯文本展示，不会自动解析HTML标签，因此会原样输出标签内容。 #

方案1：简单HTML标签转纯文本（适配当前场景成本最低） #

你现有待展示内容只有<br>换行标签，直接替换标签为纯文本换行符即可复用原有弹窗逻辑，无需修改DialogService封装代码：

var data = info as OccurrencesInfo;
if (data != null && !string.IsNullOrEmpty(data.Info))
{              
    // 替换HTML换行标签为纯文本换行，如有其他简单标签可自行补充替换规则
    var InfoData = data.Info.Replace("<BR>", "\n").Replace("<br>", "\n");
    await DialogService.ShowAlertAsync(InfoData, AppResources.InfoTitle, AppResources.FlagOk);
}

方案2：自定义支持HTML渲染的弹窗（适配复杂HTML格式场景） #

如果后续需要支持加粗、斜体、颜色等复杂HTML标签，可利用Xamarin.Forms 4.0及以上版本Label自带的TextType="Html"能力自定义弹窗：

1. 在DialogService中新增支持HTML的弹窗方法：

public async Task<bool> ShowHtmlConfirmAsync(string htmlMessage, string title, string positiveButtonLabel, string negativeButtonLabel)
{
    var taskCompletionSource = new TaskCompletionSource<bool>();
    var htmlLabel = new Label
    {
        Text = htmlMessage,
        TextType = TextType.Html,
        Margin = new Thickness(20, 10, 20, 20)
    };
    var rootLayout = new StackLayout
    {
        Children =
        {
            new Label
            {
                Text = title,
                FontAttributes = FontAttributes.Bold,
                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                Margin = new Thickness(20, 20, 20, 0)
            },
            htmlLabel,
            new StackLayout
            {
                Orientation = StackOrientation.Horizontal,
                HorizontalOptions = LayoutOptions.End,
                Margin = new Thickness(20,0,20,20),
                Children =
                {
                    new Button
                    {
                        Text = negativeButtonLabel,
                        Command = new Command(() =>
                        {
                            taskCompletionSource.SetResult(false);
                            Application.Current.MainPage.Navigation.PopModalAsync();
                        })
                    },
                    new Button
                    {
                        Text = positiveButtonLabel,
                        Margin = new Thickness(10,0,0,0),
                        Command = new Command(() =>
                        {
                            taskCompletionSource.SetResult(true);
                            Application.Current.MainPage.Navigation.PopModalAsync();
                        })
                    }
                }
            }
        }
    };
    var popupPage = new ContentPage
    {
        Content = rootLayout,
        BackgroundColor = Colors.White,
        WidthRequest = 350
    };
    await Application.Current.MainPage.Navigation.PushModalAsync(popupPage, true);
    return await taskCompletionSource.Task;
}

2. 调用时直接传入原始HTML内容即可：

var data = info as OccurrencesInfo;
if (data != null && !string.IsNullOrEmpty(data.Info))
{              
    var InfoData= data.Info;
    // 仅需确认按钮的话也可以基于上述逻辑修改为单按钮实现
    await DialogService.ShowHtmlConfirmAsync(InfoData, AppResources.InfoTitle, AppResources.FlagOk, AppResources.Cancel);
}

内容的提问来源于stack exchange，提问作者vivek pawar