Label Xamarin.Forms中的可单击HTML超链接 [英] Clickable HTML hyperlink within Label Xamarin.Forms
问题描述
我正在尝试使xaml标签中的HTML超链接可点击。我创建了一些类，这些类从API中获取包含HTML的字符串，然后将其正确呈现为Android和iOS中自定义标签呈现器中的HTML。为了更好地理解我的困境，有必要解释我的使用范围。
在我的应用程序内部，我有一个消息传递组件，该组件仅使用API来发布和获取对话由于网站由于冠状病毒而关闭，主要是为了更好地为我们的用户提供帮助。该网站上的消息传递中心允许使用复杂的文本格式，例如网络论坛上的帖子，例如粗体，斜体，超链接等。
为了在以下位置正确显示此文本移动设备，我必须创建一个自定义标签渲染器，该渲染器将使用带有HTML标签的字符串并将其正确显示为消息正文。这是很简单的任务。
问题在于，消息有时可能具有超链接，这些超链接当前正确显示为链接，但是当用户尝试单击链接时列表项是注册拍子的内容，不是标签，也不是标签内的html链接。
预期结果是，当用户单击列表中标签内的超链接时，它将在设备默认浏览器中打开该超链接。
我知道一种解决方案可能是解析任何链接的消息正文，创建链接列表，然后将跨度动态添加到每个标签都具有的跨度他们自己的手势识别器，但是对我来说这是不可能的，因为超链接有时在对话过程中途进行。邮件正文的示例可能是：
'你好用户，请转到：
公共类HyperlinkLabel：标签
{
public static readonly BindableProperty UrlProperty = BindableProperty.Create（nameof（Url），typeof（string），typeof（HyperlinkLabel），null）;
公共字符串Url
{
get {return（string）GetValue（UrlProperty）; }
set {SetValue（UrlProperty，value）; }
}
public HyperlinkLabel（）
{
TextDecorations = TextDecorations.Underline;
TextColor = Color.Green;
GestureRecognizers.Add（new TapGestureRecognizer
{
Command = new Command（async（）=>等待Launcher.OpenAsync（Url））
}）;
}
}
然后我在这样的XAML：
< localLabel：HyperlinkLabel Text = https://something.com Grid.Row = 7
Margin = 15
Url = https://something.com
HorizontalOptions = CenterAndExpand>
< / localLabel：HyperlinkLabel>
I'm trying to make HTML hyperlinks within a xaml label clickable. I have created classes which take a string containing HTML from an API, and renderer it correctly as HTML inside of a custom label renderer in both Android and iOS. To understand my dilemma better, its necessary to explain the extent of my use.
Inside my app, I have a messaging component that simply uses an API to post and get conversations from a website which is used primarily for better helping our users since our office is closed due to the coronavirus. The messaging center on the site allows for complex text formatting like a web forums post may, such as bold, italics, hyperlinks, etc.
In order to display this correctly on mobile, I had to create a custom label renderer that will take the string with HTML tags and display it correctly as the body of the message. This was a simple enough task.
The issue becomes that the messages may sometimes have hyperlinks, which currently display correct as links, but when a user tries to click on a link the list item is what registers the tap, not the label, nor the html link within the label.
The expected result is that when a user clicks on the hyperlink within the label, within the list, it will open that hyperlink in the devices default browser.
I understand that one solution may be to parse the body of the message for any links, create a list of links, and then dynamically add spans to a label that each have their own gesture recognizers, but this won't be possible for me due to the hyperlinks being at times midway through a conversation. An example of a messages body may be:
'Hello user, please go to this link to login to your account.'
I understand there are better ways to create a messaging app than this, but the primary purpose of the mobile side is for users to get easier access to responses from staff, and for simple chat responses to staff messages. Staff will use the site exclusively to respond to users, and may utilize the complex editor to better assist users.
Thank you. EDIT:
In the above example, the link at the end is not clickable. When i click on the link, the whole list view item highlights as if that ui element is higher priority than the label within.
Code associated:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame
Margin="5"
Padding="0"
BorderColor="LightGray"
CornerRadius="15"
HasShadow="False">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout
Padding="5"
BackgroundColor="#f5f5f5"
Orientation="Horizontal">
<Label
Margin="5,2.5,5,2.5"
BackgroundColor="Transparent"
FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Text="{Binding SentBy}"
TextColor="Black"
VerticalOptions="FillAndExpand" />
<Label
Margin="5,2.5,5,2.5"
BackgroundColor="Transparent"
FontAttributes="Bold"
FontSize="Small"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="End"
Text="{Binding Sent}"
TextColor="Black"
VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout Padding="5" Orientation="Horizontal">
<Label
Margin="2.5"
BackgroundColor="Transparent"
FontSize="Small"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Text="{Binding Body}"
TextColor="Black"
TextType="Html"
VerticalOptions="FillAndExpand" />
</StackLayout>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Following up with the previous answer, i simply created a class that inherits from Label and uses Xamarin Essentials' launcher:
public class HyperlinkLabel : Label
{
public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkLabel()
{
TextDecorations = TextDecorations.Underline;
TextColor = Color.Green;
GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
And then i call it in the XAML like this:
<localLabel:HyperlinkLabel Text="https://something.com" Grid.Row="7"
Margin="15"
Url="https://something.com"
HorizontalOptions="CenterAndExpand" >
</localLabel:HyperlinkLabel>
这篇关于Label Xamarin.Forms中的可单击HTML超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
