如何叠加两个仪表控件？

Question

我已经设置了双精度值与 AngularBlockBar 控件的绑定。布局中有两个仪表，但位于 AngularGauge 之上的 AngularBlockBar 不会在屏幕上显示其绑定值更新，尽管有效的绑定值正在更新到它。

为了对此进行调试，我首先检查了绑定到 AngularBlockBar 的绑定值是否有效，并且通过设置断点显示为 true。

绑定值显示有效。

我认为这是因为两个仪表相互重叠的方式导致 AngularBlockBar 的绑定不显示。

有谁知道这里可能存在什么问题，阻止 AngularblockBar 的绑定显示在屏幕上？

下面的布局是两个仪表重叠的应用程序的主要用户控件。第一个仪表正确更新为白色填充值，如下面的屏幕截图所示。但是具有蓝色填充值的 AngularBlockBar 没有更新

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
             xmlns:gauges="http://gu.se/Gauges"
             xmlns:local="clr-namespace:MyoTestv4"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="MyoTestv4.AdductionAbductionFlexionView"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Viewbox>
        <Grid HorizontalAlignment="Left" Height="280" Margin="10,10,0,0" VerticalAlignment="Top" Width="280">


            <TextBox HorizontalAlignment="Left" x:Name="statusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="30" Margin="0,3,0,0" TextWrapping="Wrap" Text="{Binding CurrentStatus}" VerticalAlignment="Top" Width="75"/>
            <TextBox HorizontalAlignment="Left" x:Name="poseStatusTbx" Background="#141c28" Foreground="White" BorderBrush="#141c28" Height="39" Margin="80,4,0,0" TextWrapping="Wrap" Text="{Binding PoseStatus}" VerticalAlignment="Top" Width="75"/>
            <TextBox HorizontalAlignment="Left" x:Name="degreeOfAbductionTbx" Background="#141c28" Foreground="White" Height="22" Margin="0,246,0,0" TextWrapping="Wrap" Text="{Binding DegreeStatus}" VerticalAlignment="Top" Width="47"/>
            <Label Content="Arc start:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,186,0,0" VerticalAlignment="Top" Width="57"/>
            <Image HorizontalAlignment="Left" Source="pack://application:,,,/Images/abduction_side_trans.png" x:Name="exerciseImage" Height="100" Margin="0,33,0,0" VerticalAlignment="Top" Width="100"/>
            <TextBox HorizontalAlignment="Left" x:Name="painfulArcEndTbx" Background="#141c28" Foreground="White" Height="22" Margin="62,217,0,0" TextWrapping="Wrap" Text="{Binding EndDegreeStatus}" VerticalAlignment="Top" Width="48"/>
            <Label Content="Arc end:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,217,0,0" VerticalAlignment="Top" Width="57"/>
            <TextBox HorizontalAlignment="Left" x:Name="painfulArcStartTbx" Background="#141c28" Foreground="White" Height="23" Margin="62,189,0,0" TextWrapping="Wrap" Text="{Binding StartDegreeStatus}" VerticalAlignment="Top" Width="48"/>


            <Grid>

                <gauges:AngularGauge
                                         HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                         IsDirectionReversed="False"
                                         MajorTickFrequency="8"
                                         FontSize="10"
                                         MajorTicks="10"
                                         MaxAngle="0"
                                         Maximum="180"
                                         MinAngle="-180"
                                         Minimum="0"
                                         Style="{StaticResource FatAngular}"
                                         MinorTickFrequency="4"
                                         Value="{Binding DegreeStatus}" Margin="149,2,-89,2" RenderTransformOrigin="0.5,0.5" Height="Auto" Width="Auto"
                                         >
                    <gauges:AngularGauge.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="-89.642"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </gauges:AngularGauge.RenderTransform>

                </gauges:AngularGauge>

                <gauges:AngularBlockBar 
                        MaxAngle="180"
                        Maximum="1"
                        MinAngle="0"
                        Minimum="0"
                        Opacity="0.2"
                        ReservedSpace="50"
                        Margin="149,2,-96,0"
                        TickLength="55"
                        Fill="DodgerBlue"
                        Value="{Binding PainfulArcStatus}" 
                        RenderTransformOrigin="0.5,0.5" >
                    <gauges:AngularBlockBar.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform Angle="90.711"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </gauges:AngularBlockBar.RenderTransform>
                </gauges:AngularBlockBar>


            </Grid>

            <TextBlock HorizontalAlignment="Left" x:Name="repCntTblk" Margin="80,43,0,0" TextWrapping="Wrap" Text="" FontSize="38" Foreground="#00bdde" VerticalAlignment="Top" Width="34" Height="41"/>
            <Button Content="Submit" x:Name="submitBtn" Command="{Binding Path=DataSubmitCommand}" IsDefault="True" IsCancel="True" HorizontalAlignment="Left"  Background="#00bdde" Foreground="White" Margin="0,148,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.76,5.093"/>


        </Grid>
    </Viewbox>
</UserControl>

显示了第一个仪表绑定，但未显示方块栏的重叠值。

Answer 1

你不需要在你的 guage 和 blockbar 上定义 Grid.Column and/or Grid.Row 否则它们只会叠加在一起吗？

带有 Grid.Column 定义的示例，您可能需要 RowDefinitions

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100px"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ComboBox ItemsSource="{Binding NavigationItems}" SelectedItem="{Binding SelectedNavigationItem, Mode=TwoWay}" Grid.Row="0" Grid.Column="0">
    </ComboBox>
    <ContentControl Content="{Binding SelectedNavigationItem}" Grid.Row="0" Grid.Column="1"/>
</Grid>

如何叠加两个仪表控件？

How to overlay two gauge controls?

wpf

xaml

binding

gauge