c# - 移动 TextBlock，并使其大小适合内容

Question

目前，我有以下 XAML 代码，可以达到以下效果。

<UserControl
    x:Class="FacionMetro.Gui.HealthIndicatorView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FacionMetro.Gui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <StackPanel>
        <Grid>
            <TextBlock Name="message" FontSize="22" Text="120 is good" Margin="250,0,-250,0"/>
        </Grid>
        <Grid>
            <TextBlock Name="arrow" FontSize="22" Text="▼" Margin="350,0,-350,0" />
        </Grid>
        <Grid Height="200">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="8*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="1">
                    <Grid.Background >
                        <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
                            <GradientStop Color="#ff00ff00"/>
                            <GradientStop Color="#ffffff00" Offset="0.25" />
                            <GradientStop Color="#ffffa500" Offset="0.75" />
                            <GradientStop Color="#ffff0000" Offset="1" />
                        </LinearGradientBrush>
                    </Grid.Background>
                </Grid>
            </Grid>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" FontSize="22" HorizontalAlignment="Center">40</TextBlock>
                <TextBlock Grid.Column="1" FontSize="22" HorizontalAlignment="Center">60</TextBlock>
                <TextBlock Grid.Column="3" FontSize="22" HorizontalAlignment="Center">100</TextBlock>
                <TextBlock Grid.Column="4" FontSize="22" HorizontalAlignment="Center">120</TextBlock>
            </Grid>
        </Grid>
    </StackPanel>
</UserControl>

我希望根据彩条当前值动态移动三角形箭头和消息的 x 位置（?? 好）。

我当前的代码片段如下。它还不可行。

public sealed partial class HealthIndicatorView : UserControl
{
    public HealthIndicatorView()
    {
        this.InitializeComponent();
    }

    public void setValue(int value)
    {
        // Margin X. For both left and right sides.
        double offsetX = this.ActualWidth / 10;

        if (value < 40) {
            // I wish to move the message and arrow the left most. How?
            // The below code is having error :
            // Cannot modify the return value of 'Windows.UI.Xaml.FrameworkElement.Margin' because it is not a variable
            message.Margin.Left = offsetX;
            arrow.Margin.Left = offsetX;
            return;
        }

        if (value > 120) {
            // messageSize and arrowSize are incorrect. As the TextBlock isn't fit to the string content.
            double messageSize = message.Width;
            double arrowSize = arrow.Width;

            double rightMostPosForMessage = this.ActualWidth - offsetX - messageSize;
            double rightMostPosForArrow = this.ActualWidth - offsetX - arrowSize;

            // I wish to move the message and arrow the right most. How?
            // The below code is having error :
            // Cannot modify the return value of 'Windows.UI.Xaml.FrameworkElement.Margin' because it is not a variable
            message.Margin.Left = offsetX;
            arrow.Margin.Left = offsetX;
        }

    }
}

1. 如何TextBlock根据彩条值移动周围？（要知道移动是什么意思，请看 2 个不同的屏幕截图，当颜色条值分别为 40 和 120 时）
2. 我怎样才能使TextBlock, 完全适合字符串内容？我需要这个，因为我需要知道字符串内容占用的空间，这样我就不会将它们移出界限。（正如你在“120 好”的截图中看到的，虽然字符串内容只是一条短消息，但 TextBlock 占用了太多空间）

Answer 1

移动 TextBlock

要四处移动TextBlock，您需要定义

<StackPanel>
    <Grid>
        <TextBlock Name="message" FontSize="22" Text="120 is good">
            <TextBlock.RenderTransform>
                <TranslateTransform x:Name="messageTransform" />
            </TextBlock.RenderTransform>
        </TextBlock>
    </Grid>
    ...

然后在您的 C# 代码中。

messageTransform.X = offsetX;

适合字符串内容

<Grid>
    <TextBlock Name="arrow" FontSize="22" Text="▼" HorizontalAlignment="Left">
        <TextBlock.RenderTransform>
            <TranslateTransform x:Name="arrowTransform" />
        </TextBlock.RenderTransform>                
    </TextBlock>
</Grid>

采用HorizontalAlignment="Left"

Answer 2

回答你的第二个问题。

您可以添加TextBlock到 aGrid并将其设置Width为Auto。也用于TextBlock.Width将其绑定到Grid.Width. 这样宽度将自动调整为内容。

message.Width="{Binding ElementName=NameOfYourGrid}"