title: How to overlay two gauge controls?
body: <p>I've set up binding of a double value to an <code>AngularBlockBar</code> 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.</p>
  
  <p>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.</p>
  
  <p>The binding value shows as valid.
  <img src="https://i.stack.imgur.com/vNyBh.png" alt="binding value"></p>
  
  <p>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.</p>
  
  <p>Does anyone know what the issue could be here, that prevents the AngularblockBar's binding from being shown on screen?</p>
  
  <p>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 </p>
  
  <pre><code>&lt;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"&gt;
      &lt;Viewbox&gt;
          &lt;Grid HorizontalAlignment="Left" Height="280" Margin="10,10,0,0" VerticalAlignment="Top" Width="280"&gt;
  
  
              &lt;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"/&gt;
              &lt;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"/&gt;
              &lt;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"/&gt;
              &lt;Label Content="Arc start:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,186,0,0" VerticalAlignment="Top" Width="57"/&gt;
              &lt;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"/&gt;
              &lt;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"/&gt;
              &lt;Label Content="Arc end:" Foreground="#00bdde" HorizontalAlignment="Left" Margin="0,217,0,0" VerticalAlignment="Top" Width="57"/&gt;
              &lt;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"/&gt;
  
  
              &lt;Grid&gt;
  
                  &lt;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"
                                           &gt;
                      &lt;gauges:AngularGauge.RenderTransform&gt;
                          &lt;TransformGroup&gt;
                              &lt;ScaleTransform/&gt;
                              &lt;SkewTransform/&gt;
                              &lt;RotateTransform Angle="-89.642"/&gt;
                              &lt;TranslateTransform/&gt;
                          &lt;/TransformGroup&gt;
                      &lt;/gauges:AngularGauge.RenderTransform&gt;
  
                  &lt;/gauges:AngularGauge&gt;
  
                  &lt;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" &gt;
                      &lt;gauges:AngularBlockBar.RenderTransform&gt;
                          &lt;TransformGroup&gt;
                              &lt;ScaleTransform/&gt;
                              &lt;SkewTransform/&gt;
                              &lt;RotateTransform Angle="90.711"/&gt;
                              &lt;TranslateTransform/&gt;
                          &lt;/TransformGroup&gt;
                      &lt;/gauges:AngularBlockBar.RenderTransform&gt;
                  &lt;/gauges:AngularBlockBar&gt;
  
  
              &lt;/Grid&gt;
  
              &lt;TextBlock HorizontalAlignment="Left" x:Name="repCntTblk" Margin="80,43,0,0" TextWrapping="Wrap" Text="" FontSize="38" Foreground="#00bdde" VerticalAlignment="Top" Width="34" Height="41"/&gt;
              &lt;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"/&gt;
  
  
          &lt;/Grid&gt;
      &lt;/Viewbox&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>The first gauge binding being shown, but the over layed value for the block bar isn't shown.</p>
  
  <p><img src="https://i.stack.imgur.com/w9RXG.png" alt="angular gauge"></p>