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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Current Value on Pointer

Thread ID:

Created:

Updated:

Platform:

Replies:

142832 Feb 21,2019 09:37 AM UTC Feb 25,2019 05:44 AM UTC WPF 5
loading
Tags: SfLinearGauge
John
Asked On February 21, 2019 09:37 AM UTC

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.



John
Replied On 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.

Muneesh Kumar G [Syncfusion]
Replied On 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. 
 


John
Replied On 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.

John
Replied On 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.

Muneesh Kumar G [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon