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

SfLinearGauge losses binding inside TabControl

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>

5 Replies

MK Muneesh Kumar G Syncfusion Team 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 
 



JO John 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.


MK Muneesh Kumar G Syncfusion Team 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 
 



JO John replied to Muneesh Kumar G 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


MK Muneesh Kumar G Syncfusion Team 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 
 


Loader.
Live Chat Icon For mobile
Up arrow icon