Question

Currently, I have the following XAML code which is able to achieve the following effect.

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

I wish to move the x-position of the triangle arrow and message (?? is good) around dynamically, according to color bar current value.

My current code snippet is as below. It is not workable yet.

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. How I can move the TextBlock around according to color bar value? (To know what does move around means, see the 2 different screenshot, when the color bar value is 40 and 120 respectively)
2. How I can make TextBlock, to exactly fit to the string content? I need this, as I need to know the space occupied by string content, so that I will not move them out of bound. (As you can see in “120 is good” screenshot, TextBlock is occupying too much space although the string content is just a short message)

Answer 1

Move TextBlock around

To move the TextBlock around, you need to define

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

Then in your C# code.

messageTransform.X = offsetX;

Fit to The String Content

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

Use HorizontalAlignment="Left"