BetterLyrics/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/PropertyRow.xaml

<?xml version="1.0" encoding="utf-8" ?>
<UserControl
    x:Class="BetterLyrics.WinUI3.Controls.PropertyRow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:BetterLyrics.WinUI3.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="using:CommunityToolkit.WinUI"
    mc:Ignorable="d">

    <Grid HorizontalAlignment="Left" ColumnSpacing="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock
            Grid.Column="0"
            VerticalAlignment="Top"
            Text="{x:Bind Header, Mode=OneWay}" />

        <Grid
            Grid.Column="1"
            VerticalAlignment="Top"
            PointerEntered="OnPointerEntered"
            PointerExited="OnPointerExited">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0">
                <RichTextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Visibility="{x:Bind TextVisibility, Mode=OneWay}">
                    <Paragraph>
                        <Run Text="{x:Bind Value, Mode=OneWay}" />
                        <Run Text="{x:Bind Unit, Mode=OneWay}" />
                    </Paragraph>
                </RichTextBlock>

                <HyperlinkButton
                    Margin="0,-2,0,0"
                    Padding="0"
                    HorizontalContentAlignment="Left"
                    Click="OnLinkClicked"
                    Visibility="{x:Bind LinkVisibility, Mode=OneWay}">
                    <TextBlock Text="{x:Bind Value, Mode=OneWay}" TextWrapping="Wrap" />
                </HyperlinkButton>
            </Grid>

            <Button
                x:Name="CopyButton"
                Grid.Column="1"
                Margin="8,-2,0,0"
                Padding="4"
                VerticalAlignment="Top"
                Click="OnCopyClicked"
                Opacity="0">
                <ToolTipService.ToolTip>
                    <ToolTip x:Uid="Copy" />
                </ToolTipService.ToolTip>
                <Button.OpacityTransition>
                    <ScalarTransition />
                </Button.OpacityTransition>
                <Grid>
                    <FontIcon
                        x:Name="CopyIcon"
                        FontFamily="{StaticResource IconFontFamily}"
                        FontSize="16"
                        Glyph="&#xE8C8;"
                        Opacity="1">
                        <FontIcon.OpacityTransition>
                            <ScalarTransition />
                        </FontIcon.OpacityTransition>
                    </FontIcon>
                    <FontIcon
                        x:Name="CheckIcon"
                        FontFamily="{StaticResource IconFontFamily}"
                        FontSize="16"
                        Glyph="&#xE73E;"
                        Opacity="0">
                        <FontIcon.OpacityTransition>
                            <ScalarTransition />
                        </FontIcon.OpacityTransition>
                    </FontIcon>
                </Grid>
            </Button>
        </Grid>
    </Grid>

</UserControl>