Question

我正在尝试使用C＃/ WPF创建一个也可以自行旋转的线性仪表。仪表的填充百分比及其方向将取决于将通过数据绑定更新的2个参数。

我通过创建一个具有2列的灵活网格来解决这个问题，这些列的宽度取决于参数（这将是测量仪填充的百分比;我的例子是随着时间的推移而改变它）。我有一个黑色矩形，随时填充2列;因此它的大小是恒定的;和一个只填充第一列的橙色矩形;它的宽度取决于网格宽度并随时间变化。

当我尝试根据另一个参数旋转两个矩形时（在我的代码中它是一个45度的常量），它给我带来了麻烦。黑色和橙色矩形不再对齐（尽管它们保持平行）。只有当橙色矩形填满整个空间时，它们才会对齐。我试图将橙色矩形转换为黑色矩形，但它似乎不起作用。我甚至不确定这是否是正确的方法。你们有没有办法解决这个问题，或者建议采用另一种方法？

XAML：

 <Grid x:Name="AdjustableGrid" Grid.Column="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding ThrusterPower}" />
                        <ColumnDefinition Width="{Binding ThrusterPowerOpposite}" />
                    </Grid.ColumnDefinitions>

                        <Rectangle x:Name="GaugeBackground" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Stretch="Fill"   Fill="Black" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <RotateTransform  Angle="45" />
                            </Rectangle.RenderTransform>
                        </Rectangle>

                        <Rectangle  x:Name="Gauge"  Grid.Row="1" Stretch="Fill" Fill="Orange" Margin="0,3,0,3" RenderTransformOrigin="0.5,0.5" >
                            <Rectangle.RenderTransform>
                                <RotateTransform  Angle="45" />
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Grid>

主：

 void dispatcherTimer_Tick(object sender, EventArgs e)
        {

            if (Tpower <= 100 && Tdir)
            {
                Tpower += dt;
            }
            else
            {
                Tdir = false;
            }

            if (Tpower >= 0 && !Tdir)
            {
                Tpower -= dt;
            }
            else
            {
                Tdir = true;
            }

            appData.UpdateThrusterPower(Tpower.ToString());
            appData.UpdateThrusterPowerOpposite((100 - Tpower).ToString());

            Point relative_distance = GaugeBackground.TranslatePoint(new Point(0, 0), Gauge);
            Console.WriteLine(relative_distance);

            TranslateTransform translateTransform1 = new TranslateTransform();
            RotateTransform rotateTransform1 = new RotateTransform();

            translateTransform1.X = relative_distance.X;
            translateTransform1.Y = relative_distance.Y;

            rotateTransform1.Angle = 45;
            TransformGroup transformGroup1 = new TransformGroup();

            transformGroup1.Children.Add(translateTransform1);
            transformGroup1.Children.Add(rotateTransform1);

            Gauge.RenderTransform = transformGroup1;
        }

Answer 1

ProgressBar可能是一个更好的主意，它专门针对这类事情而设计。这是一个非常简单的边框，它周围有一个边框...触发器/故事板动画代码仅用于说明目的，可以删除：

<Border Width="200" Height="50" BorderBrush="Black" BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
    <Border.RenderTransform>
        <RotateTransform x:Name="theTransform" Angle="0" />
    </Border.RenderTransform>
    <Border.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="theTransform" Storyboard.TargetProperty="Angle" 
                        From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
                    <DoubleAnimation
                        Storyboard.TargetName="theProgressBar" Storyboard.TargetProperty="Value" 
                        From="0" To="100" Duration="0:0:5" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Border.Triggers>
    <ProgressBar Name="theProgressBar" Minimum="0" Maximum="100" Value="0" Foreground="Orange" Background="DarkGray" BorderThickness="0" />
</Border>

使用C＃/ WPF创建旋转线性仪表

1 个答案: