Need to add Gauge Range List from Viewmodel

8 posts, 0 answers
  1. Muthukumar
    Muthukumar avatar
    15 posts
    Member since:
    Oct 2011

    Posted 13 Sep 2012 Link to this post

    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>
  2. Muthukumar
    Muthukumar avatar
    15 posts
    Member since:
    Oct 2011

    Posted 13 Sep 2012 Link to this post

    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
      
        }
  3. DevCraft banner
  4. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 17 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  5. Chris
    Chris avatar
    4 posts
    Member since:
    Jul 2012

    Posted 04 Apr 2014 in reply to Andrey Link to this post

    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?
  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 04 Apr 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 01 Aug 2014 in reply to Andrey Link to this post

    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?
  8. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 04 Aug 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  9. Renier Pretorius
    Renier Pretorius avatar
    46 posts
    Member since:
    Apr 2010

    Posted 04 Aug 2014 in reply to Andrey Link to this post

    Hi Andrey,

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

    Thanks 
Back to Top
DevCraft banner