HTML 內的可點擊超鏈接 Label Xamarin.Forms

Question

我試圖在 xaml label 中創建 HTML 超鏈接可點擊。 我創建的類從 API 中獲取包含 HTML 的字符串，並在 Android 和 iOS 中的自定義 label 渲染器中將其正確渲染為 HTML。為了更好地理解我的困境，我有必要更好地解釋它的使用。

在我的應用程序中，我有一個消息傳遞組件，它僅使用 API 來發布和從網站獲取對話，該網站主要用於更好地幫助我們的用戶，因為我們的辦公室因冠狀病毒而關閉。 站點上的消息中心允許復雜的文本格式，如 web 論壇帖子可能，例如粗體、斜體、超鏈接等。

為了在移動設備上正確顯示它，我必須創建一個自定義 label 渲染器，它將使用帶有 HTML 標簽的字符串並將其正確顯示為消息正文。 這是一項非常簡單的任務。

問題是消息有時可能有超鏈接，目前顯示正確的鏈接，但當用戶試圖點擊鏈接時，列表項是注冊點擊的內容，而不是 label，也不是 label 中的 html 鏈接。

預期結果是，當用戶單擊列表中 label 內的超鏈接時，它將在設備默認瀏覽器中打開該超鏈接。

我知道一種解決方案可能是解析任何鏈接的消息正文，創建鏈接列表，然后將跨度動態添加到每個都有自己的手勢識別器的 label，但這對我來說是不可能的，因為超鏈接有時會在對話中途出現。 消息正文的示例可能是：

'你好用戶，請 go到此鏈接登錄到您的帳戶。

我知道有比這更好的方法來創建消息傳遞應用程序，但移動端的主要目的是讓用戶更輕松地訪問員工的回復，以及對員工消息的簡單聊天回復。 工作人員將專門使用該站點來響應用戶，並可能利用復雜的編輯器更好地幫助用戶。

謝謝你。 編輯：

在上面的例子中，末尾的鏈接是不可點擊的。 當我單擊鏈接時，整個列表視圖項目突出顯示，就好像該 ui 元素的優先級高於其中的 label。

相關代碼：

<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>

Answer 1

重新發布/編輯我之前的答案，因為它因不完整而被刪除。

這應該有一些幫助：

將 label 的一部分顯示為可點擊鏈接，一直是 Xamarin.Forms 的長期期望功能。 隨着 3.2.0 的發布，這成為可能。

可點擊范圍

創建一個 Label，具有 FormattedText 屬性和跨度，如下所示。 對於那些不熟悉的人，標簽有一個名為 FormattedText 的屬性。 它允許您將文本拆分為單獨的部分，因此您可以對每個部分進行不同的格式化。

<Label HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Hello " />
            <Span Text="Click Me!"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ClickCommand}"
                                          CommandParameter="https://xamarin.com" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" Some more text." />
        </FormattedString>
    </Label.FormattedText>
</Label>

在您的 ViewModel 中，添加以下命令。

public ICommand ClickCommand => new Command<string>((url) =>
{
    Device.OpenUri(new System.Uri(url));
});

這將產生 label，點擊我。 文本突出顯示，點擊文本。 將導致瀏覽器打開並轉到 xamarin.com。

參考： https://xamarinhelp.com/hyperlink-in-xamarin.forms-label/

Answer 2

我正在嘗試使 xaml label 中的 HTML 超鏈接可點擊。 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. 為了更好地理解我的困境，有必要解釋我的使用程度。

在我的應用程序中，我有一個消息傳遞組件，它僅使用 API 從網站發布和獲取對話，該網站主要用於更好地幫助我們的用戶，因為我們的辦公室因冠狀病毒而關閉。 網站上的消息中心允許復雜的文本格式，如 web 論壇帖子可能，如粗體、斜體、超鏈接等。

為了在移動設備上正確顯示此內容，我必須創建一個自定義 label 渲染器，該渲染器將獲取帶有 HTML 標簽的字符串並將其正確顯示為消息正文。 這是一個足夠簡單的任務。

問題是消息有時可能具有超鏈接，當前顯示為正確的鏈接，但當用戶嘗試單擊鏈接時，列表項是注冊點擊的內容，而不是 label，也不是 ZD304BA20E96D80EEEABAC581 中的 html 鏈接。

預期結果是，當用戶單擊列表中 label 內的超鏈接時，它將在設備默認瀏覽器中打開該超鏈接。

我知道一種解決方案可能是解析任何鏈接的消息正文，創建鏈接列表，然后動態地將跨度添加到 label 中，每個都有自己的手勢識別器，但這對我來說是不可能的有時超鏈接會出現在對話的中間。 消息正文的示例可能是：

'您好用戶，請 go到此鏈接登錄您的帳戶。

我知道創建消息傳遞應用程序有比這更好的方法，但移動端的主要目的是讓用戶更容易地訪問員工的回復，以及對員工消息的簡單聊天回復。 工作人員將專門使用該網站來回應用戶，並可能利用復雜的編輯器來更好地幫助用戶。

謝謝你。 編輯：

在上面的例子中，最后的鏈接是不可點擊的。 當我單擊鏈接時，整個列表視圖項突出顯示，好像該 ui 元素的優先級高於 label 內的優先級。

相關代碼：

<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>