1

現在、次の効果を達成できる次の 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カラーバーの値に応じて移動するにはどうすればよいですか? (移動の意味を知るには、カラー バーの値がそれぞれ 40 と 120 の場合の 2 つの異なるスクリーンショットを参照してください)
  2. TextBlockを文字列の内容に正確に合わせるにはどうすればよいですか? 文字列コンテンツが占有するスペースを知る必要があるため、これが必要です。これにより、それらが範囲外に移動することはありません。(「120 is good」のスクリーンショットでわかるように、文字列の内容は単なる短いメッセージですが、TextBlock はスペースを占有しすぎています)
4

2 に答える 2

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"

于 2012-10-31T10:14:47.290 に答える
0

to answer your Second Question.

You can add the TextBlock to a Grid and set the Width to Auto. Also for TextBlock.Width bind it to the Grid.Width. That way the width will be automatically adjusted to content. 

message.Width="{Binding ElementName=NameOfYourGrid}"
于 2012-10-31T08:50:02.143 に答える