We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Current Value on Pointer

I'm trying to add current value text of LinearPointer into its pointer. There is no inbuilt way to do that, so I tried custom LinearPointer, but when I apply its position to Above. The whole template get flipped vertically.

        <syncfusion:SfLinearGauge Name="SfLinearGauge1"  Orientation="Horizontal" VerticalAlignment="Bottom" >
            <syncfusion:SfLinearGauge.MainScale>
                <syncfusion:LinearScale Name="LinearScale1" ScaleDirection="Forward"  LabelVisibility="Collapsed"
                                            ScaleBarSize="40" ScaleBarStroke="Transparent"
                                            Minimum="0" Maximum="10" Interval="5" MinorTicksPerInterval="0"
                                            MajorTickSize="10" MinorTickSize="8" LabelSize="13" LabelOffset="2"
                                            MajorTickStroke="#c1c1c1" MinorTickStroke="#c1c1c1" LabelStroke="#999999"
                                            RangePosition="Above"  TickPosition="Above" LabelPosition="Above">
                    <syncfusion:LinearScale.Pointers>
                        <syncfusion:LinearPointer Name="LinearPointer"  SymbolPointerStroke="Black" SymbolPointerWidth="10"
                                                  SymbolPointerHeight="10" SymbolPointerStyle="Triangle"  SymbolPointerPosition="Cross"                                                  
                                                    Opacity="0.8" PointerType="SymbolPointer"  Value="6"
                                                  />
                        <syncfusion:LinearPointer Name="LinearPointer1"  SymbolPointerStroke="Green" SymbolPointerWidth="10"
                                                  SymbolPointerHeight="10" SymbolPointerStyle="Triangle"  SymbolPointerPosition="Above"                                                  
                                                    Opacity="0.8" PointerType="SymbolPointer"  Value="5"
                                                  />
                        <syncfusion:LinearPointer Name="LinearPointer2"  SymbolPointerStroke="Green" SymbolPointerWidth="10"
                                                  SymbolPointerHeight="10" SymbolPointerStyle="Triangle"  SymbolPointerPosition="Above"                                                 
                                                    Opacity="0.8" PointerType="SymbolPointer"  Value="8"
                                                  />
                        <syncfusion:LinearPointer Name="LinearPointer3" PointerType="SymbolPointer" Value="7" SymbolPointerStyle="Custom" SymbolPointerPosition="Above">
                            <syncfusion:LinearPointer.SymbolPointerTemplate>
                                <DataTemplate>
                                    <StackPanel Height="30" Width="30" Orientation="Vertical">
                                        <TextBlock Text="Hello" FontSize="10" HorizontalAlignment="Center" />
                                        <Polygon Points="0,0 5,10, 10,0" Stroke="Red" Fill="Red" HorizontalAlignment="Center" />
                                    </StackPanel>
                                </DataTemplate>
                            </syncfusion:LinearPointer.SymbolPointerTemplate>
                        </syncfusion:LinearPointer>
                    </syncfusion:LinearScale.Pointers>
                    <syncfusion:LinearScale.Ranges>
                        <syncfusion:LinearRange StartValue="0" EndValue="10" StartWidth="10" EndWidth="10" RangeStroke="Red" RangeOpacity="1" RangeOffset="-10"></syncfusion:LinearRange>
                        <syncfusion:LinearRange StartValue="5" EndValue="8" StartWidth="10" EndWidth="10" RangeStroke="Green" RangeOpacity="1" RangeOffset="-10"></syncfusion:LinearRange>

                    </syncfusion:LinearScale.Ranges>
                </syncfusion:LinearScale>
            </syncfusion:SfLinearGauge.MainScale>
        </syncfusion:SfLinearGauge>

I tried to flip the text verticle in template so it can get back to normal but it just messed up more. I also tried to use Cross SymbolPointerPosition and negative top margin on template, it does work but if I change text size, it also messes up.



5 Replies

JO John February 21, 2019 09:55 AM UTC

Also template TextBlock Text="{Binding ElementName=LinearPointer3, Path=Value, Mode=OneWay}"
doesn't show anything either.

PS: Had to make new post because editing main post causing some code to be removed. Please fix that too.


MK Muneesh Kumar G Syncfusion Team February 22, 2019 12:12 PM UTC

Hi Xmen, 
 
Greetings from Syncfusion.  
 
We have analyzed your query and we would like to inform you that this is our default behavior of SymbolPointerPosition as Above. You can achieve your requirement by setting SymbolPointerPosition as Below and Margin as 0,-100,0,0 as per the below code snippet.  
 
Code snippet 
  <syncfusion:LinearPointer.SymbolPointerTemplate> 
                                <DataTemplate> 
                                    <StackPanel Height="30" Width="30" Orientation="Vertical" Margin="0,-100,0,0"> 
                                        <TextBlock Text="{Binding Path=Value}"  FontSize="10" HorizontalAlignment="Center" /> 
                                        <Polygon Points="0,0 5,10, 10,0" Stroke="Red" Fill="Red" HorizontalAlignment="Center" /> 
                                    </StackPanel> 
                                </DataTemplate> 
                            </syncfusion:LinearPointer.SymbolPointerTemplate> 
 
Also, by default the DataContext of SymbolPointerTemplate is LinearPointer, so you can bind the Value directly as like above.  
 
Screenshot: 
 
 
Hope it helps you.  
  
Thanks, 
Muneesh Kumar G. 
 



JO John replied to Muneesh Kumar G February 22, 2019 12:18 PM UTC

Hi Xmen, 
 
Greetings from Syncfusion.  
 
We have analyzed your query and we would like to inform you that this is our default behavior of SymbolPointerPosition as Above. You can achieve your requirement by setting SymbolPointerPosition as Below and Margin as 0,-100,0,0 as per the below code snippet.  
 
Code snippet 
  <syncfusion:LinearPointer.SymbolPointerTemplate> 
                                <DataTemplate> 
                                    <StackPanel Height="30" Width="30" Orientation="Vertical" Margin="0,-100,0,0"> 
                                        <TextBlock Text="{Binding Path=Value}"  FontSize="10" HorizontalAlignment="Center" /> 
                                        <Polygon Points="0,0 5,10, 10,0" Stroke="Red" Fill="Red" HorizontalAlignment="Center" /> 
                                    StackPanel> 
                                DataTemplate> 
                            syncfusion:LinearPointer.SymbolPointerTemplate> 
 
Also, by default the DataContext of SymbolPointerTemplate is LinearPointer, so you can bind the Value directly as like above.  
 
Screenshot: 
 
 
Hope it helps you.  
  
Thanks, 
Muneesh Kumar G. 
 


I did try with negative margin, but if I change the text font size, its not aligned to range bar. Also what about Orientation verticle and on their values on all pointers both sides.


JO John February 22, 2019 12:39 PM UTC

one more thing, when using verticle orientation the maximum is at bottom and minimum at top. I need it reversed, maximum at top and minimum at bottom. But when I use  ScaleDirection="Backward", the text get vertically flipped again.


MK Muneesh Kumar G Syncfusion Team February 25, 2019 05:44 AM UTC

Hi Xmen,  
 
Thanks for your update, please find the response below.  
 
Orientation: Vertical 
 
You can resolve the text flip problem by setting ScaleTransform for TextBlock as per the below code snippet.  
 
Code snippet 
  <StackPanel Height="30" Width="30" Orientation="Horizontal"> 
                                       
          <Polygon Points="10,0 10,10, 0,5" 
                   Stroke="Red" Fill="Red" VerticalAlignment="Center" 
                   HorizontalAlignment="Center" /> 
          <TextBlock Text="{Binding Value}" FontSize="16" VerticalAlignment="Center" 
                     HorizontalAlignment="Center" > 
              <TextBlock.RenderTransform> 
                    <ScaleTransform ScaleX="-1" CenterX="8" ScaleY="-1" CenterY="11"/> 
              </TextBlock.RenderTransform> 
          </TextBlock> 
 
  </StackPanel> 
 
Here we have modified the polygon points for vertical orientation and while increasing FontSize for TextBlock, you have to increase the Width of the StackPanel and adjust the CenterX and CenterY of ScaleTransform.  
 
 
 
Orientation: Horizontal 
 
We have modified the polygon points for horizontal as per the below code snippet.  
 
Code snippet 
<StackPanel Height="30" Width="30" Orientation="Vertical"> 
 
     <Polygon Points="5,0 10,10, 0,10" Stroke="Red" Fill="Red"     
              VerticalAlignment="Center" HorizontalAlignment="Center" /> 
     <TextBlock Text="{Binding Value}" FontSize="12" VerticalAlignment="Center" 
                HorizontalAlignment="Center" > 
             <TextBlock.RenderTransform> 
                  <ScaleTransform ScaleY="-1" CenterY="10"/> 
             </TextBlock.RenderTransform> 
     </TextBlock> 
 
</StackPanel> 
 
and while increasing FontSize for TextBlock, you have to increase the Width of the StackPanel and adjust the CenterX and CenterY of ScaleTransform.  
 
 
 
Please let us know if you have any queries.  
 
Thanks,     
Muneesh Kumar G. 


Loader.
Live Chat Icon For mobile
Up arrow icon