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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfLinearGauge losses binding inside TabControl

Thread ID:

Created:

Updated:

Platform:

Replies:

142925 Feb 26,2019 06:04 AM UTC Feb 26,2019 12:44 PM UTC WPF 5
loading
Tags: SfLinearGauge
John
Asked On February 26, 2019 06:04 AM UTC

Finally I have a working SfLinearGauge but now when I put it inside TabControl, its binding no longer works.

Here is attached code


        <TabControl>
            <TabItem Header="Some text">
            </TabItem>
            <TabItem Header="Some text2">
                <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" Orientation="Vertical">
                    <Syncfusion:SfLinearGauge.MainScale>
                        <Syncfusion:LinearScale Name="LinearScale1" ScaleDirection="Backward"  LabelVisibility="Collapsed"
                                            ScaleBarSize="40" ScaleBarStroke="Transparent"
                                            Minimum="0" Maximum="100" Interval="{Binding ElementName=LinearScale1, Path=Maximum}" MinorTicksPerInterval="0"
                                            MajorTickSize="0" MinorTickSize="0"
                                            MajorTickStroke="Black" MinorTickStroke="Red"
                                            TickPosition="Above">
                            <Syncfusion:LinearScale.Pointers>
                                <Syncfusion:LinearPointer Name="LinearPointer2"  SymbolPointerStroke="Green" SymbolPointerWidth="10"
                                                  SymbolPointerHeight="10" SymbolPointerStyle="Triangle"  SymbolPointerPosition="Above"                                                 
                                                    Opacity="0.8" PointerType="SymbolPointer"  Value="{Binding ElementName=GreenRange, Path=EndValue, Mode=OneWay}"
                                                  />
                            </Syncfusion:LinearScale.Pointers>
                            <Syncfusion:LinearScale.Ranges>
                                <Syncfusion:LinearRange StartValue="0" EndValue="100" StartWidth="10" EndWidth="10" RangeStroke="Red" RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange>
                                <Syncfusion:LinearRange x:Name="GreenRange" StartValue="35" EndValue="55" StartWidth="10" EndWidth="10" RangeStroke="Green" RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange>
                            </Syncfusion:LinearScale.Ranges>
                        </Syncfusion:LinearScale>
                    </Syncfusion:SfLinearGauge.MainScale>
                </Syncfusion:SfLinearGauge>
            </TabItem>
        </TabControl>

Muneesh Kumar G [Syncfusion]
Replied On February 26, 2019 09:11 AM UTC

Hi xmen, 
 
Thanks for using Syncfusion products.  
 
We have analyzed your query and we would like to inform you that tab item loads its binding in its selected time only. But in initial time binding set with null, so that the selected time binding not working in SfLinearGauge.  
 
You can resolve this problem by setting DataContext for tab item then bind the required field as per the below code snippet.  
 
Code snippet 
<TabControl> 
            <TabItem Header="Some text"> 
            </TabItem> 
            <TabItem Header="Some text2" DataContext="{Binding ElementName=LinearScale1}"> 
                <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" Orientation="Vertical"> 
                    <Syncfusion:SfLinearGauge.MainScale> 
                        <Syncfusion:LinearScale Name="LinearScale1"    
                              ScaleDirection="Backward"  LabelVisibility="Collapsed" 
                              ScaleBarSize="40"    
                              ScaleBarStroke="Transparent"  
                              Minimum="0" Maximum="100"  
                              Interval="{Binding Maximum}" MinorTicksPerInterval="0" 
                                            MajorTickSize="0" MinorTickSize="0"  
                                            MajorTickStroke="Black"  
                                            MinorTickStroke="Red" 
                                            TickPosition="Above"> 
                            <Syncfusion:LinearScale.Pointers> 
                                <Syncfusion:LinearPointer Name="LinearPointer2"   
                                 SymbolPointerStroke="Green" SymbolPointerWidth="10" 
                                 SymbolPointerHeight="10"  
                                 SymbolPointerStyle="Triangle"   
                                 SymbolPointerPosition="Above"                                                   
                                 Opacity="0.8"  
                                 PointerType="SymbolPointer"   
                                 Value="{Binding Ranges[1].EndValue, Mode=OneWay}" 
                                                  /> 
                            </Syncfusion:LinearScale.Pointers> 
                            <Syncfusion:LinearScale.Ranges> 
                                <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                     StartWidth="10" EndWidth="10" RangeStroke="Red"  
                                     RangeOpacity="1"  
                                     RangeOffset="-10"></Syncfusion:LinearRange> 
                                <Syncfusion:LinearRange x:Name="GreenRange" StartValue="35" EndValue="55" StartWidth="10" EndWidth="10" RangeStroke="Green" RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange> 
                            </Syncfusion:LinearScale.Ranges> 
                        </Syncfusion:LinearScale> 
                    </Syncfusion:SfLinearGauge.MainScale> 
                </Syncfusion:SfLinearGauge> 
            </TabItem> 
        </TabControl> 
 
Screenshot: 
 
 
Hope it helps you.  
  
Regards,  
Muneesh Kumar G 
 


John
Replied On February 26, 2019 10:35 AM UTC

Okay  but the problem is, my SfLinearGauge is inside a UserControl and that User Control is being used both inside and outside the tab control. So modifying it would create more problem.

Muneesh Kumar G [Syncfusion]
Replied On February 26, 2019 11:13 AM UTC

Hi xmen, 
 
Thanks for your update,  
 
We have analyzed your query and you can achieve this by implementing ViewModel with required properties and set the DataContext for the SfLinearGauge as per the below code. This will work with SfLinearGauge, when placed it inside or outside the TabControl.  
 
Code snippet 
public class ViewModel 
    { 
        public double Maximum { get; set; } 
 
        public double EndValue { get; set; } 
 
        public ViewModel() 
        { 
            Maximum = 100; 
            EndValue = 55; 
        } 
    } 
 
 
<Grid > 
        <Grid.RowDefinitions> 
            <RowDefinition/> 
            <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.Resources> 
            <local:ViewModel x:Key="viewModel"/> 
        </Grid.Resources> 
        <TabControl> 
            <TabItem Header="Some text"> 
            </TabItem> 
            <TabItem Header="Some text2" > 
                <Syncfusion:SfLinearGauge  HorizontalAlignment="Center"  
                                           Orientation="Vertical" 
                                           DataContext="{StaticResource viewModel}"> 
                    <Syncfusion:SfLinearGauge.MainScale> 
                        <Syncfusion:LinearScale Name="LinearScale1"  
                               ScaleDirection="Backward"  LabelVisibility="Collapsed" 
                               ScaleBarSize="40" ScaleBarStroke="Transparent"  
                               Minimum="0" Maximum="{Binding Maximum}"  
                               Interval="{Binding Maximum}" MinorTicksPerInterval="0" 
                               MajorTickSize="0" MinorTickSize="0"  
                               MajorTickStroke="Black" MinorTickStroke="Red" 
                               TickPosition="Above"> 
                            <Syncfusion:LinearScale.Pointers> 
                                <Syncfusion:LinearPointer Name="LinearPointer1"   
                                    SymbolPointerStroke="Green"  
                                    SymbolPointerWidth="10" 
                                    SymbolPointerHeight="10"  
                                    SymbolPointerStyle="Triangle" 
                                    SymbolPointerPosition="Above"                                                   
                                  Opacity="0.8" PointerType="SymbolPointer"   
                                  Value="{Binding EndValue, Mode=OneWay}" 
                                                  /> 
                            </Syncfusion:LinearScale.Pointers> 
                            <Syncfusion:LinearScale.Ranges> 
                                <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                                        StartWidth="10"  
                                                        EndWidth="10" RangeStroke="Red"  
                                                        RangeOpacity="1" 
                                       RangeOffset="-10"></Syncfusion:LinearRange> 
                                <Syncfusion:LinearRange x:Name="GreenRange1"        
                                            StartValue="35"  
                                            EndValue="{Binding EndValue, Mode=OneWay}" 
                                            StartWidth="10" EndWidth="10"   
                                            RangeStroke="Green"  
                         RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange> 
                            </Syncfusion:LinearScale.Ranges> 
                        </Syncfusion:LinearScale> 
                    </Syncfusion:SfLinearGauge.MainScale> 
                </Syncfusion:SfLinearGauge> 
            </TabItem> 
        </TabControl> 
        <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" 
                                   Orientation="Vertical" Grid.Row="1" 
                                   DataContext="{StaticResource viewModel}"> 
            <Syncfusion:SfLinearGauge.MainScale> 
                <Syncfusion:LinearScale Name="LinearScale2" ScaleDirection="Backward"   
                                            LabelVisibility="Collapsed" 
                                            ScaleBarSize="40"     
                                            ScaleBarStroke="Transparent"  
                                            Minimum="0" Maximum="{Binding Maximum}"  
                                            Interval="{Binding Maximum}"  
                                            MinorTicksPerInterval="0" 
                                            MajorTickSize="0" MinorTickSize="0"  
                                            MajorTickStroke="Black"  
                                            MinorTickStroke="Red" 
                                            TickPosition="Above"> 
                    <Syncfusion:LinearScale.Pointers> 
                        <Syncfusion:LinearPointer Name="LinearPointer2"   
                              SymbolPointerStroke="Green" SymbolPointerWidth="10" 
                              SymbolPointerHeight="10" SymbolPointerStyle="Triangle"   
                              SymbolPointerPosition="Above"                                                   
                              Opacity="0.8" PointerType="SymbolPointer"   
                              Value="{Binding EndValue, Mode=OneWay}" 
                                                  /> 
                    </Syncfusion:LinearScale.Pointers> 
                    <Syncfusion:LinearScale.Ranges> 
                        <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                    StartWidth="10" EndWidth="10" RangeStroke="Red"    
                           RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange> 
                        <Syncfusion:LinearRange x:Name="GreenRange2" StartValue="35" 
                                                EndValue="{Binding EndValue}"  
                                                StartWidth="10" EndWidth="10" 
                                                RangeStroke="Green" RangeOpacity="1"  
                                 RangeOffset="-10"></Syncfusion:LinearRange> 
                    </Syncfusion:LinearScale.Ranges> 
                </Syncfusion:LinearScale> 
            </Syncfusion:SfLinearGauge.MainScale> 
        </Syncfusion:SfLinearGauge> 
    </Grid>     
 
We have prepared a sample based on this, please find the sample for the following location.  
 
 
Hope it helps you.  
  
Regards,  
Muneesh Kumar G 
 


John
Replied On February 26, 2019 12:00 PM UTC

Hi xmen, 
 
Thanks for your update,  
 
We have analyzed your query and you can achieve this by implementing ViewModel with required properties and set the DataContext for the SfLinearGauge as per the below code. This will work with SfLinearGauge, when placed it inside or outside the TabControl.  
 
Code snippet 
public class ViewModel 
    { 
        public double Maximum { get; set; } 
 
        public double EndValue { get; set; } 
 
        public ViewModel() 
        { 
            Maximum = 100; 
            EndValue = 55; 
        } 
    } 
 
 
<Grid > 
        <Grid.RowDefinitions> 
            <RowDefinition/> 
            <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.Resources> 
            <local:ViewModel x:Key="viewModel"/> 
        </Grid.Resources> 
        <TabControl> 
            <TabItem Header="Some text"> 
            </TabItem> 
            <TabItem Header="Some text2" > 
                <Syncfusion:SfLinearGauge  HorizontalAlignment="Center"  
                                           Orientation="Vertical" 
                                           DataContext="{StaticResource viewModel}"> 
                    <Syncfusion:SfLinearGauge.MainScale> 
                        <Syncfusion:LinearScale Name="LinearScale1"  
                               ScaleDirection="Backward"  LabelVisibility="Collapsed" 
                               ScaleBarSize="40" ScaleBarStroke="Transparent"  
                               Minimum="0" Maximum="{Binding Maximum}"  
                               Interval="{Binding Maximum}" MinorTicksPerInterval="0" 
                               MajorTickSize="0" MinorTickSize="0"  
                               MajorTickStroke="Black" MinorTickStroke="Red" 
                               TickPosition="Above"> 
                            <Syncfusion:LinearScale.Pointers> 
                                <Syncfusion:LinearPointer Name="LinearPointer1"   
                                    SymbolPointerStroke="Green"  
                                    SymbolPointerWidth="10" 
                                    SymbolPointerHeight="10"  
                                    SymbolPointerStyle="Triangle" 
                                    SymbolPointerPosition="Above"                                                   
                                  Opacity="0.8" PointerType="SymbolPointer"   
                                  Value="{Binding EndValue, Mode=OneWay}" 
                                                  /> 
                            </Syncfusion:LinearScale.Pointers> 
                            <Syncfusion:LinearScale.Ranges> 
                                <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                                        StartWidth="10"  
                                                        EndWidth="10" RangeStroke="Red"  
                                                        RangeOpacity="1" 
                                       RangeOffset="-10"></Syncfusion:LinearRange> 
                                <Syncfusion:LinearRange x:Name="GreenRange1"        
                                            StartValue="35"  
                                            EndValue="{Binding EndValue, Mode=OneWay}" 
                                            StartWidth="10" EndWidth="10"   
                                            RangeStroke="Green"  
                         RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange> 
                            </Syncfusion:LinearScale.Ranges> 
                        </Syncfusion:LinearScale> 
                    </Syncfusion:SfLinearGauge.MainScale> 
                </Syncfusion:SfLinearGauge> 
            </TabItem> 
        </TabControl> 
        <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" 
                                   Orientation="Vertical" Grid.Row="1" 
                                   DataContext="{StaticResource viewModel}"> 
            <Syncfusion:SfLinearGauge.MainScale> 
                <Syncfusion:LinearScale Name="LinearScale2" ScaleDirection="Backward"   
                                            LabelVisibility="Collapsed" 
                                            ScaleBarSize="40"     
                                            ScaleBarStroke="Transparent"  
                                            Minimum="0" Maximum="{Binding Maximum}"  
                                            Interval="{Binding Maximum}"  
                                            MinorTicksPerInterval="0" 
                                            MajorTickSize="0" MinorTickSize="0"  
                                            MajorTickStroke="Black"  
                                            MinorTickStroke="Red" 
                                            TickPosition="Above"> 
                    <Syncfusion:LinearScale.Pointers> 
                        <Syncfusion:LinearPointer Name="LinearPointer2"   
                              SymbolPointerStroke="Green" SymbolPointerWidth="10" 
                              SymbolPointerHeight="10" SymbolPointerStyle="Triangle"   
                              SymbolPointerPosition="Above"                                                   
                              Opacity="0.8" PointerType="SymbolPointer"   
                              Value="{Binding EndValue, Mode=OneWay}" 
                                                  /> 
                    </Syncfusion:LinearScale.Pointers> 
                    <Syncfusion:LinearScale.Ranges> 
                        <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                    StartWidth="10" EndWidth="10" RangeStroke="Red"    
                           RangeOpacity="1" RangeOffset="-10"></Syncfusion:LinearRange> 
                        <Syncfusion:LinearRange x:Name="GreenRange2" StartValue="35" 
                                                EndValue="{Binding EndValue}"  
                                                StartWidth="10" EndWidth="10" 
                                                RangeStroke="Green" RangeOpacity="1"  
                                 RangeOffset="-10"></Syncfusion:LinearRange> 
                    </Syncfusion:LinearScale.Ranges> 
                </Syncfusion:LinearScale> 
            </Syncfusion:SfLinearGauge.MainScale> 
        </Syncfusion:SfLinearGauge> 
    </Grid>     
 
We have prepared a sample based on this, please find the sample for the following location.  
 
 
Hope it helps you.  
  
Regards,  
Muneesh Kumar G 
 


Is there any other way ? It works fine outside tab control

Muneesh Kumar G [Syncfusion]
Replied On February 26, 2019 12:44 PM UTC

Hi Johann, 
 
You can achieve this by using Self-RelativeSource and Binding value from root parent resource as per the below code snippet.  
 
Code snippet 
<Window x:Class="Sample1.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:Sample1" 
        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf" 
        xmlns:sys="clr-namespace:System;assembly=mscorlib" 
        Title="Sample" WindowState="Maximized" 
        x:Name="window"  
        Height="500" Width="725"> 
    <Grid > 
        <Grid.RowDefinitions> 
            <RowDefinition/> 
            <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.Resources> 
            <sys:Double x:Key="endValue" >55</sys:Double> 
        </Grid.Resources> 
        <TabControl> 
            <TabItem Header="Some text"> 
            </TabItem> 
            <TabItem Header="Some text2" > 
                <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" Orientation="Vertical"> 
                    
                    <Syncfusion:SfLinearGauge.MainScale> 
                        <Syncfusion:LinearScale Name="LinearScale1"  
                              ScaleDirection="Backward"  LabelVisibility="Collapsed" 
                              ScaleBarSize="40" ScaleBarStroke="Transparent"  
                              Minimum="0" Maximum="100"  
                              Interval="{Binding RelativeSource={RelativeSource   
                                        Mode=Self}, Path=Maximum}"  
                              MinorTicksPerInterval="0" 
                              MajorTickSize="0" MinorTickSize="0"  
                              MajorTickStroke="Black" MinorTickStroke="Red" 
                              TickPosition="Above"> 
                             
                            <Syncfusion:LinearScale.Pointers> 
                                <Syncfusion:LinearPointer Name="LinearPointer1"   
                                  SymbolPointerStroke="Green" SymbolPointerWidth="10" 
                                  SymbolPointerHeight="10"  
                                  SymbolPointerStyle="Triangle"          
                                  SymbolPointerPosition="Above"                                                   
                                  Opacity="0.8" PointerType="SymbolPointer"  
                                  Value="{StaticResource endValue}" 
                                                  /> 
                            </Syncfusion:LinearScale.Pointers> 
                            <Syncfusion:LinearScale.Ranges> 
                                <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                                   StartWidth="10" EndWidth="10" RangeStroke="Red"  
                                  RangeOpacity="1"  
                                  RangeOffset="-10"></Syncfusion:LinearRange> 
                                <Syncfusion:LinearRange x:Name="GreenRange"  
                                   StartValue="35" EndValue="{StaticResource endValue}"  
                                   StartWidth="10" EndWidth="10" RangeStroke="Green"  
                                   RangeOpacity="1"  
                                   RangeOffset="-10"></Syncfusion:LinearRange> 
                            </Syncfusion:LinearScale.Ranges> 
                        </Syncfusion:LinearScale> 
                    </Syncfusion:SfLinearGauge.MainScale> 
                </Syncfusion:SfLinearGauge> 
            </TabItem> 
        </TabControl> 
        <Syncfusion:SfLinearGauge  HorizontalAlignment="Center" Orientation="Vertical"  
                                   Grid.Row="1"> 
            <Syncfusion:SfLinearGauge.MainScale> 
                <Syncfusion:LinearScale Name="LinearScale2" ScaleDirection="Backward"   
                                        LabelVisibility="Collapsed" 
                                        ScaleBarSize="40" ScaleBarStroke="Transparent"  
                                        Minimum="0" Maximum="100"  
                               Interval="{Binding RelativeSource={RelativeSource  
                                          Mode=Self}, Path=Maximum}" 
                               MinorTicksPerInterval="0" 
                               MajorTickSize="0" MinorTickSize="0"  
                               MajorTickStroke="Black" MinorTickStroke="Red" 
                               TickPosition="Above"> 
                    <Syncfusion:LinearScale.Pointers> 
                        <Syncfusion:LinearPointer Name="LinearPointer2"      
                           SymbolPointerStroke="Green" SymbolPointerWidth="10" 
                           SymbolPointerHeight="10" SymbolPointerStyle="Triangle"    
                           SymbolPointerPosition="Above"                                                   
                           Opacity="0.8" PointerType="SymbolPointer"   
                           Value="{StaticResource endValue}" 
                                            /> 
                    </Syncfusion:LinearScale.Pointers> 
                    <Syncfusion:LinearScale.Ranges> 
                        <Syncfusion:LinearRange StartValue="0" EndValue="100"  
                            StartWidth="10" EndWidth="10" RangeStroke="Red"  
                            RangeOpacity="1"  
                            RangeOffset="-10"></Syncfusion:LinearRange> 
                        <Syncfusion:LinearRange x:Name="GreenRange2" StartValue="35" 
                                                EndValue="{StaticResource endValue}"  
                                                StartWidth="10" EndWidth="10" 
                                                RangeStroke="Green" RangeOpacity="1"  
                                       RangeOffset="-10"></Syncfusion:LinearRange> 
                    </Syncfusion:LinearScale.Ranges> 
                </Syncfusion:LinearScale> 
            </Syncfusion:SfLinearGauge.MainScale> 
        </Syncfusion:SfLinearGauge> 
    </Grid>     
</Window> 
 
 
Please let us know if you have any queries.  
  
Regards,  
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

;