我可以将 DataGrid 中的 DataGridText 列格式化为超链接吗？

Question

我的 XAML 代码中有一个 DataGrid 定义了以下内容：

        <syncfusion:SfDataGrid x:Name="PasswdVw" Grid.Row="2" Grid.Column="2" Grid.RowSpan="2" ItemsSource="{Binding PassWrd}"
                           SelectedRow="{Binding SelPassRws, Mode=TwoWay}" GridLinesVisibility="Both" SelectionMode ="Multiple" NavigationMode="Row"
                           Margin="20,20,0,0" HeaderRowHeight="35" ColumnWidthMode="Fill"
                           VerticalScrollBarVisibility="Always" SortingMode="Single">
        <syncfusion:SfDataGrid.DefaultStyle>
            <syncfusion:DataGridStyle RowBackground="white" SelectedRowTextColor="White" SelectionBackground="blue"
                                      HeaderRowBackground="#C5C5C5" HeaderRowTextColor="Black" HeaderRowFontAttributes="Bold"/>
        </syncfusion:SfDataGrid.DefaultStyle>
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:DataGridTextColumn MappingName="PassId" Width="0"/>
            <syncfusion:DataGridTextColumn MappingName="PassUsrname" HeaderText="User Name"/>
            <syncfusion:DataGridTextColumn MappingName="PassPassword" HeaderText="Password"
                                            Width="150"/>
            <syncfusion:DataGridTextColumn MappingName="PassUrl" HeaderText="Web Site"/>
        </syncfusion:SfDataGrid.Columns>
    </syncfusion:SfDataGrid>

当我运行程序时，MappingName="PassUrl" 列始终填充网站地址。但是，它们仅显示为文本字符串。有没有办法将这些字符串转换为可点击的超链接？

此外，是否有一种方法可以手动调整列的大小，以便用户可以根据自己的需要在运行时调整每列的大小？

Answer 1

您可以使用

TapGestureRecognizer

创建超链接。

以下是创建超链接的步骤：

• 设置 Label 或 Span 的

  TextColor

  和

  TextDecoration

  属性。
• 将

  TapGestureRecognizer

  添加到 GestureRecognizers 集合中 Label 或 Span，其 Command 属性绑定到

  ICommand

  ，以及 其

  CommandParameter

  属性包含要打开的 URL。
• 定义将由 执行的

  ICommand

  TapGestureRecognizer

  。
• 编写将由

  ICommand

  执行的代码。

这是代码示例：

   <Label>
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Alternatively, click " />
                <Span Text="here"
                      TextColor="Blue"
                      TextDecorations="Underline">
                    <Span.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding TapCommand}"
                                              CommandParameter="https://learn.microsoft.com/dotnet/maui/" />
                    </Span.GestureRecognizers>
                </Span>
                <Span Text=" to view .NET MAUI documentation." />
            </FormattedString>
        </Label.FormattedText>
    </Label>

当点击超链接时，TapGestureRecognizer 将通过执行其

ICommand

属性定义的

Command

进行响应。此外，由

CommandParameter

属性指定的 URL 将作为参数传递给

ICommand

。

XAML 页面的代码隐藏包含

TapCommand

实现：

using System.Windows.Input;

public partial class MainPage : ContentPage
{
    // Launcher.OpenAsync is provided by Essentials.
    public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

Answer 2

要将“PassUrl”列中的字符串转换为可点击的超链接，您可以使用

DataGridTemplateColumn

并在其中定义

HyperlinkButton

。这是一个例子：

<syncfusion:DataGridTemplateColumn MappingName="PassUrl" HeaderText="Web Site">
    <syncfusion:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Content="{Binding PassUrl}">
                <Button.Template>
                    <ControlTemplate>
                        <HyperlinkButton Content="{Binding PassUrl}"
                                         NavigateUri="{Binding PassUrl}"
                                         TargetName="_blank"/>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </DataTemplate>
    </syncfusion:DataGridTemplateColumn.CellTemplate>
</syncfusion:DataGridTemplateColumn>

在此示例中，

DataGridTemplateColumn

用于为“PassUrl”列中的每个单元格定义自定义模板。在模板内部，

Button

用作

HyperlinkButton

的容器。

HyperlinkButton

绑定到

PassUrl

属性，并将

NavigateUri

设置为相同的属性。将

TargetName

设置为“_blank”将在新选项卡或窗口中打开链接。

关于手动调整列大小，Syncfusion 的

SfDataGrid

控件提供了对列大小调整的内置支持。要启用手动调整大小，您可以将每列的

ColumnSizer

属性设置为“自动”。这允许用户根据自己的需要在运行时调整列的大小。这是一个例子：

<syncfusion:DataGridTextColumn MappingName="PassUsrname" HeaderText="User Name"
                               ColumnSizer="Auto"/>
<syncfusion:DataGridTextColumn MappingName="PassPassword" HeaderText="Password"
                               Width="150" ColumnSizer="Auto"/>
<syncfusion:DataGridTextColumn MappingName="PassUrl" HeaderText="Web Site"
                               ColumnSizer="Auto"/>

通过将

ColumnSizer

属性设置为“自动”，用户将在运行时调整列的大小。

我希望这有帮助！如果您还有任何疑问，请告诉我。