How to overlay two gauge controls? - wpf

Question

I've set up binding of a double value to an AngularBlockBar control. There are two gauges in the layout, but the AngularBlockBar which is over layed on top of the AngularGauge doesn't show its binding value updating on screen, although valid binding values are being updated to it.
To debug this, I've checked first that the binding value that is bound to the AngularBlockBar is valid and this shows as true by setting a break point.
The binding value shows as valid.
I'm thinking its because of the way the two gauges are over layed over each other, which causes the AngularBlockBar's binding to not show.
Does anyone know what the issue could be here, that prevents the AngularblockBar's binding from being shown on screen?
The layout below is the main user control of the application where the two gauges are over layed. The first gauge updates correctly with a white fill value as shown in the screen shot below. But the AngularBlockBar which has a blue fill value isn't updated
<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>
The first gauge binding being shown, but the over layed value for the block bar isn't shown.

Answer 1

Don't you need to define Grid.Column and/or Grid.Row on your guage and blockbar other wise they will just lay ontop of eachother?
example with Grid.ColumnDefinitions, you probably want 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>