Need to add Gauge Range List from Viewmodel

[Muthukumar]

hi team,
i have Rad gauge within a listbox so that i can add the number of gauges dynamically. since i am using MVVM pattern for my project, i should have all my properties and populate them in ViewModel.
now i am creating a class which is having all the properties of gauge and add the gauge object to list then set the list as itemssource for that created list box. here i have a big challenge that i need to add the range list dynamically if i have them static it is working good 
but i need to have them as dynamic for eg one gauge will have 2 ranges and another one will have 4 ranges. 
how could i add these rangelist dynamically from viewmodel. please give me a sample code in mvvm.

thanks
Muthukumar Nagarajan  

<Grid x:Name="LayoutRoot" Background="White">
        <ListBox ItemsSource="{Binding GaugeList}" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="{Binding View}"></StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <telerik:RadGauge Width="280"
                                            Height="160"
                                            IsEnabled="True"
                                            Tag=""
                                            x:Name="rdg" Cursor="Hand" FontFamily="Calibri" FontSize="13.333">





                        <telerik:RadGauge x:Name="RadialGauge1"
                                                IsEnabled="{Binding IsGaugeEnabled}"
                                                Tag="1" Cursor="Hand">



                            <telerik:RadialGauge
                                                    Style="{StaticResource NewGaugeStyle}"
                                                    Background="{x:Null}"
                                                    BorderBrush="{x:Null}"
                                                    OuterBackground="{x:Null}"
                                                    OuterBorderBrush="#FF1E212A"
                                                    x:Name="RadialGauge1VR" >


                                <telerik:RadialScale
                                                        Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                                        Min="{Binding Min}" Max="{Binding Max}"
                                                        MajorTickStep="{Binding MajorTickStep}"
                                                        LabelRotationMode="None"
                                                        FontWeight="Normal"
                                                        x:Name="RadialScale1" Radius="1.6" EndWidth="0.4" StartWidth="0.4" StartAngle="181" SweepAngle="177" MiddleTicks="5" MinorTicks="2">
                                    <telerik:RadialScale.MiddleTick>
                                        <telerik:MiddleTickProperties Background="White" Location="CenterOutside" Length="0.12" TickWidth="0.08"/>
                                    </telerik:RadialScale.MiddleTick>
                                    <telerik:RadialScale.Label>
                                        <telerik:LabelProperties Format="{}{0:F1}" Location="CenterInside" FontSize="16" Offset="0.25" />
                                    </telerik:RadialScale.Label>
                                    <telerik:RadialScale.MajorTick>
                                        <telerik:MajorTickProperties
                                                                Length="0.4"
                                                                Location="CenterInside"
                                                                Background="White" Offset="-0.15" TickWidth="0.05" />
                                    </telerik:RadialScale.MajorTick>
                                    <telerik:RangeList FontWeight="Normal">


                                        <telerik:RadialRange
                                                                x:Name="1"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"
                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Min}" Max="{Binding Max1}" Background="Transparent" />


                                        <telerik:RadialRange
                                                                x:Name="2"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"
                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Max1}" Max="{Binding Max2}" Background="Transparent" />


                                        <telerik:RadialRange
                                                                x:Name="3"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"

                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Max2}" Max="{Binding Max3}" Background="Transparent" />


                                    </telerik:RangeList>
                                    <telerik:IndicatorList HorizontalAlignment="Center">
                                        <telerik:Needle
                                                                x:Name="gauge1_needle1"
                                                                Value="{Binding FirstNeedleValue}"
                                                                ArrowBackground="Black"
                                                                ArrowBorderBrush="Black"
                                                                IsAnimated="True
                                                                Background="{x:Null}"
                                                                BorderBrush="{x:Null}"
                                                                HorizontalAlignment="Stretch" Style="{StaticResource NewNeedleStyle}" Location="CenterInside" RelativeShift="0" Offset="0.1" RelativeHeight="0.2" RelativeWidth="0"/>


                                    </telerik:IndicatorList>
                                </telerik:RadialScale>
                            </telerik:RadialGauge>
                        </telerik:RadGauge>


                    </telerik:RadGauge>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

[Muthukumar]

hi,
i got it worked.But i cant find any material and sample code regarding this. we spent two working days to find out this.
so please add this code Custom Binding for gauge ranges to your material 

The Most important thing is 
Property of CustomRangeList should be ObservableCollection<RadialRange> then you can set this property to itemssource of RangeList.

thanks
Muthukumar Nagarajan

<ListBox ItemsSource="{Binding GaugeList}" >

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <StackPanel Orientation="{Binding View}"></StackPanel>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <telerik:RadGauge Width="280"

                                            Height="160"

                                            IsEnabled="True"

                                            Tag="1"

                                            x:Name="1" Cursor="Hand" FontFamily="Calibri" FontSize="13.333">

 

 

 

                        <telerik:RadGauge x:Name="RadialGauge1" Width="280"

                                            Height="160"

                                                IsEnabled="{Binding IsGaugeEnabled}"

                                                Tag="RadialGauge1" Cursor="Hand">

 

 

                            <telerik:RadialGauge

                                Style=""

                                                    Background="{x:Null}"

                                                    BorderBrush="{x:Null}"

                                                    OuterBackground="{x:Null}"                                                 

                                                    x:Name="RadialGauge1" >

 

                                <telerik:RadialScale

                                                        Style="{StaticResource RadialScaleHalfCircleNStyle}"

                                                        Min="{Binding Min}" Max="{Binding Max}"

                                                        MajorTickStep="{Binding MajorTickStep}"

                                                        LabelRotationMode="None"

                                                        FontWeight="Normal"

                                                        x:Name="RadialScale1" Radius="1.6" EndWidth="0.4" StartWidth="0.4" StartAngle="181" SweepAngle="177" MiddleTicks="5" MinorTicks="2">

                                    <telerik:RadialScale.MiddleTick>

                                        <telerik:MiddleTickProperties Background="White" Location="CenterOutside" Length="0.12" TickWidth="0.08"/>

                                    </telerik:RadialScale.MiddleTick>

                                    <telerik:RadialScale.Label>

                                        <telerik:LabelProperties Format="{}{0:F1}" Location="CenterInside" FontSize="16" Offset="0.25" />

                                    </telerik:RadialScale.Label>

                                    <telerik:RadialScale.MajorTick>

                                        <telerik:MajorTickProperties

                                                                Length="0.4"

                                                                Location="CenterInside"

                                                                Background="White" Offset="-0.15" TickWidth="0.05" />

                                    </telerik:RadialScale.MajorTick>

 

 

                                    <telerik:RangeList ItemsSource="{Binding CustomRangeList}" />

 

                                    <telerik:IndicatorList HorizontalAlignment="Center">

                                        <telerik:Needle

                                                                x:Name="gauge1_needle1"

                                                                Value="{Binding FirstNeedleValue}"

                                                                ArrowBackground="Black"

                                                                ArrowBorderBrush="Black"

                                                                IsAnimated="True"

                                                                Background="{x:Null}"

                                                                BorderBrush="{x:Null}"

                                                                HorizontalAlignment="Stretch" Style="{}" Location="CenterInside" RelativeShift="0" Offset="0.1" RelativeHeight="0.2" RelativeWidth="0"/>

 

                                    </telerik:IndicatorList>

                                </telerik:RadialScale>

                            </telerik:RadialGauge>

                        </telerik:RadGauge>

 

                    </telerik:RadGauge>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

public class Gauge : ViewModelCore
    {


        private ObservableCollection<GaguesData> _GaugeList;
        public ObservableCollection<GaguesData> GaugeList
        {
            get { return _GaugeList; }
            set
            {
                SetPropertyValue(() => GaugeList, value, val => _GaugeList = val);
            }
        }

        private Orientation _View = Orientation.Horizontal;
        public Orientation View
        {
            get { return _View; }
            set
            {
                SetPropertyValue(() => View, value, val => _View = val);
            }
        }

        public Gauge()
        {
            BuildGaugeList();
        }

        void BuildGaugeList()
        {
            ObservableCollection<GaguesData> tempGaugeList = new ObservableCollection<GaguesData>();
            GaguesData FirstGauge = new GaguesData();
            FirstGauge.MajorTickStep = "0.4";
            FirstGauge.Min = "0";
            FirstGauge.Max = "2";
            FirstGauge.range0 = 0.2;
            FirstGauge.range1 = 0.4;
            FirstGauge.range2 = 1.3;
            FirstGauge.range3 = 1.7;
            FirstGauge.FirstNeedleValue = "1.5";
            FirstGauge.CustomRangeList = AddRangeList(FirstGauge);
            tempGaugeList.Add(FirstGauge);

            FirstGauge = new GaguesData();
            FirstGauge.MajorTickStep = "0.4";
            FirstGauge.Min = "0";
            FirstGauge.Max = "2";
            FirstGauge.range0 = 0.2;
            FirstGauge.range1 = 0.4;
            FirstGauge.range2 = 1;
            FirstGauge.range3 = 1.5;
            FirstGauge.FirstNeedleValue = "1.2";
            FirstGauge.CustomRangeList = AddRangeList(FirstGauge);
            tempGaugeList.Add(FirstGauge);


            FirstGauge = new GaguesData();
            FirstGauge.MajorTickStep = "0.4";
            FirstGauge.Min = "0";
            FirstGauge.Max = "2";
            FirstGauge.range0 = 0.2;
            FirstGauge.range1 = 0.4;
            FirstGauge.range2= 1.2;
            FirstGauge.range3 = 1.6;
            FirstGauge.FirstNeedleValue = "1.8";
            FirstGauge.CustomRangeList = AddRangeList(FirstGauge);
            tempGaugeList.Add(FirstGauge);


            FirstGauge = new GaguesData();
            FirstGauge.MajorTickStep = "0.4";
            FirstGauge.Min = "0";
            FirstGauge.Max = "2";
            FirstGauge.range0 = 0.2;
            FirstGauge.range1 = 0.4;
            FirstGauge.range2 = 1.2;
            FirstGauge.range3 = 1.5;
            FirstGauge.FirstNeedleValue = "0.5";
            FirstGauge.CustomRangeList = AddRangeList(FirstGauge);
            tempGaugeList.Add(FirstGauge);

            GaugeList = tempGaugeList;
        }

        ObservableCollection<RadialRange> AddRangeList(GaguesData FirstGauge)
        {
            ObservableCollection<RadialRange> tempRangeList = new ObservableCollection<RadialRange>();
            RadialRange r = new RadialRange();
            r.StartWidth = 1;
            r.EndWidth = 1;
            r.Location = ScaleObjectLocation.OverCenter;
            r.Min = Convert.ToDouble(FirstGauge.Min);
            r.Max = FirstGauge.range0;
            r.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x64, 0x85, 0x1e));
            tempRangeList.Add(r);

            r = new RadialRange();
            r.StartWidth = 1;
            r.EndWidth = 1;
            r.Location = ScaleObjectLocation.OverCenter;
            r.Min = FirstGauge.range0;
            r.Max = FirstGauge.range1;
            r.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x9f, 0x88, 0x21));
            tempRangeList.Add(r);

            r = new RadialRange();
            r.StartWidth = 1;
            r.EndWidth = 1;
            r.Location = ScaleObjectLocation.OverCenter;
            r.Min = FirstGauge.range1;
            r.Max = FirstGauge.range2;
            r.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x8b, 0x25, 0x0e));
            tempRangeList.Add(r);

            r = new RadialRange();
            r.StartWidth = 1;
            r.EndWidth = 1;
            r.Location = ScaleObjectLocation.OverCenter;
            r.Min = FirstGauge.range2;
            r.Max = FirstGauge.range3;
            r.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x64, 0x85, 0x1e));
            tempRangeList.Add(r);

            r = new RadialRange();
            r.StartWidth = 1;
            r.EndWidth = 1;
            r.Location = ScaleObjectLocation.OverCenter;
            r.Min = FirstGauge.range3;
            r.Max = Convert.ToDouble(FirstGauge.Max);
            r.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0x8b, 0x25, 0x0e));
            tempRangeList.Add(r);

            return tempRangeList;
        }

        ObservableCollection<CustomTickMark> AddCustomList(GaguesData FirstGauge)
        {
            ObservableCollection<CustomTickMark> tempCustimList = new ObservableCollection<CustomTickMark>();

            CustomTickMark r = new CustomTickMark();
            r.Value = 0;
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            r = new CustomTickMark();
            r.Value = FirstGauge.range1;
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            r = new CustomTickMark();
            r.Value = FirstGauge.range1;
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            r = new CustomTickMark();
            r.Value = FirstGauge.range2;
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            r = new CustomTickMark();
            r.Value = FirstGauge.range3;
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            r = new CustomTickMark();
            r.Value = Convert.ToDouble(FirstGauge.Max);
            r.Location = ScaleObjectLocation.Inside;
            tempCustimList.Add(r);

            return tempCustimList;
        }
    }

    public class GaguesData : ViewModelCore
    {
        #region Properties

        private string _firstNeedleValue = "0";
        public string FirstNeedleValue
        {
            get { return _firstNeedleValue; }
            set { SetPropertyValue(() => FirstNeedleValue, value, val => _firstNeedleValue = val); }
        }

        private string _majorTickStep = "100";
        public string MajorTickStep
        {
            get { return _majorTickStep; }
            set { SetPropertyValue(() => MajorTickStep, value, val => _majorTickStep = val); }
        }

        private string _min = "1000";
        public string Min
        {
            get { return _min; }
            set { SetPropertyValue(() => Min, value, val => _min = val); }
        }
        private string _max = "1000";
        public string Max
        {
            get { return _max; }
            set { SetPropertyValue(() => Max, value, val => _max = val); }
        }

        private double _range3 = 0;
        public double range3
        {
            get { return _range3; }
            set { SetPropertyValue(() => range3, value, val => _range3 = val); }
        }

        private double _range2 = 0;
        public double range2
        {
            get { return _range2; }
            set { SetPropertyValue(() => range2, value, val => _range2 = val); }
        }

        private double _range1 = 0;
        public double range1
        {
            get { return _range1; }
            set { SetPropertyValue(() => range1, value, val => _range1 = val); }
        }

        private double _range0 = 0;
        public double range0
        {
            get { return _range0; }
            set { SetPropertyValue(() => range0, value, val => _range0 = val); }
        }

        private ObservableCollection<RadialRange> customRangeList = new ObservableCollection<RadialRange>();

        public ObservableCollection<RadialRange> CustomRangeList
        {
            get
            {
                return this.customRangeList;
            }

            set
            {
                SetPropertyValue(() => CustomRangeList, value, val => this.customRangeList = val);
            }
        }

        #endregion

    }

[Andrey]

Hi Muthukumar,

In the 2011.Q3 release we introduced new gauge control. It is almost new control redesigned from scratch. Some of its features are similar to the old control’s features but they are implemented in absolutely different way (using different set of properties), while others are completely new.
Our demo application now references the new gauge control and demonstrates its features. Our help topics also describe features of the new control.
We recommend using the new gauge control for new applications. We would also recommend replacing the old control with new one in existing applications if there is a timeframe for this task. To avoid cross-controls problems we’ve removed the old control from the default Telerik namespace.

The old gauge control does not support binding of ranges. I have attached a sample solution which uses the new gauge control. I hope this helps.

All the best,
Andrey Murzov
the Telerik team

[Chris]

Hi, I have used the approach you recommended with the new radgauge control, however if you rebind the ranges collection to a large range collection first then to a smaller collection it remembers the old collection and draws both sets of ranges even when the bound ranges collection only has the second.

I.e range collection 1 has a range min 0 max 100, I then rebind the ranges collection with min 0 max 50 and you see both this range collection and the one before, even though ranges has the min 0 max 50 range.

Any ideas?

[Andrey]

Hi Chris,

You should clear the ranges collection in your viewmodel before assigning a new value.
The sample code is below.

private GaugeRangeCollection ranges = new GaugeRangeCollection();
public GaugeRangeCollection Ranges
{
    get
    {
        return this.ranges;
    }

    set
    {
        if (this.ranges != null)
        {
            // clear old collection
            while (this.ranges.Count > 0)
            {
                this.ranges.RemoveAt(0);
            }
        }

        this.ranges = value;
        OnPropertyChanged("Ranges");
    }
}

Regards,
Andrey Murzov
Telerik

 

 

[Renier Pretorius]

Hi, I have used your approach for binding the ranges of a scale to a collection in my view model. However, I want to display multiple gauges using the same set of ranges. On the the first gauges the ranges are displayed as expected, but on the subsequent gauges, no ranges are shown. Any idea why?

[Andrey]

Hi Renier,

You can't use same range collection with 2 different gauges, because range objects are linked to scale inside which they are used. Every gauge should use own collection of the ranges.

Regards,

Andrey Murzov

Telerik

 

 

[Renier Pretorius]

Hi Andrey,

I suspected it to be something like this. Bit of a hassle if you want to show comparative gauges though.

Thanks