SfLinearGauge losses binding inside TabControl

[John]

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]

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]

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]

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/142925/ze/WPF_Sample-686372224 

 

Hope it helps you.  

  

Regards,  

Muneesh Kumar G 

 

[John]

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/142925/ze/WPF_Sample-686372224 

 

Hope it helps you.  

  

Regards,  

Muneesh Kumar G 

 

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

[Muneesh Kumar G]

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