Кликабельная HTML гиперссылка в ярлыке Xamarin.Forms

Question

Я пытаюсь сделать гиперссылки HTML внутри ярлыка xaml кликабельными. Я создал классы, которые берут строку, содержащую HTML из API, и корректно отображают ее как HTML внутри пользовательского средства визуализации меток в Android и iOS. Чтобы лучше понять мою дилемму, необходимо объяснить степень моего использования.

Внутри моего приложения есть компонент обмена сообщениями, который просто использует API для публикации и получения разговоров с веб-сайта, который в основном используется для лучшего помогать нашим пользователям, так как наш офис закрыт из-за коронавируса. Центр обмена сообщениями на сайте допускает сложное форматирование текста, как, например, публикация на веб-форумах, например, полужирный шрифт, курсив, гиперссылки и т. Д. c.

Чтобы правильно отобразить это на мобильном устройстве, мне нужно было создать настраиваемое средство визуализации меток, которое будет принимать строку с тегами HTML и правильно отображать ее как тело сообщения. Это было достаточно простой задачей.

Проблема заключается в том, что сообщения могут иногда иметь гиперссылки, которые в настоящее время отображаются корректно в виде ссылок, но когда пользователь пытается щелкнуть ссылку, элемент списка регистрирует нажатие, ни метка, ни ссылка html внутри метки.

Ожидаемый результат заключается в том, что, когда пользователь нажимает гиперссылку внутри метки в списке, он открывает эту гиперссылку в браузере устройств по умолчанию.

Я понимаю, что одним из решений может быть синтаксический анализ тела сообщения для любых ссылок, создание списка ссылок, а затем динамическое добавление диапазонов к метке, каждая из которых имеет свои собственные распознаватели жестов, но это выиграло ' Это невозможно для меня из-за гиперссылок, которые иногда проходят в середине разговора. Примером тела сообщения может быть:

'Hello user , пожалуйста go до эта ссылка для входа в свою учетную запись.'

Я понимаю, что есть лучшие способы создания приложения для обмена сообщениями, чем это, но основная задача мобильной стороны состоит в том, чтобы пользователи получили более легкий доступ к ответам от персонала и для простых ответов в чате на сообщения персонала. Сотрудники будут использовать сайт исключительно для ответа пользователям и могут использовать сложный редактор, чтобы лучше помогать пользователям.

Спасибо. РЕДАКТИРОВАТЬ:

В приведенном выше примере ссылка в конце не кликабельна. Когда я нажимаю на ссылку, весь элемент представления списка выделяется так, как будто этот элемент пользовательского интерфейса имеет более высокий приоритет, чем метка внутри.

Код связан:

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

    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))
        });

    }
}

И затем я вызываю его в XAML как это:

 <localLabel:HyperlinkLabel Text="https://something.com" Grid.Row="7"
                          Margin="15"
                          Url="https://something.com"
                          HorizontalOptions="CenterAndExpand" >

                    </localLabel:HyperlinkLabel>

Answer 2

Повторное размещение / редактирование моего предыдущего ответа, так как он был удален из-за неполноты.

Это должно помочь:

Отображение части ярлыка в виде ссылки, на которую можно нажать, было долгое время желанная особенность Xamarin.Forms. В версии 3.2.0 это стало возможным.

Tappable Span

Создайте метку со свойством 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));
});

Это приведет к ярлык с Click Me! текст выделен Нажатие на текст приведет к открытию браузера и переходу на xamarin.com.

Ссылка: https://xamarinhelp.com/hyperlink-in-xamarin-forms-label/