SfLinearGauge losses binding inside TabControl

5 Replies
2 Participants

Created by
JO John

Platform
WPF

Platform
WPF

Control
SfLinearGauge

Created On
Feb 26, 2019 06:04 AM UTC

Last Activity On
Feb 26, 2019 12:44 PM UTC

Want to subscribe?
SIGN IN

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

</TabItem>

<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>

</Grid.RowDefinitions>

<Grid.Resources>

<local:ViewModel x:Key="viewModel"/>

</Grid.Resources>

</TabItem>

<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

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.

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

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>

</Grid.RowDefinitions>

<Grid.Resources>

<sys:Double x:Key="endValue" >55</sys:Double>

</Grid.Resources>

</TabItem>

<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

Need More Help?

Get personalized assistance from our support team.

Contact Support

5 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
JO John
Platform
WPF
Control
SfLinearGauge
Created On
Feb 26, 2019 06:04 AM UTC
Last Activity On
Feb 26, 2019 12:44 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support