RadHorizontalLinearGauge into HeaderedItemsControl - fatal UI (visualisation) bug when enable negative scale

8 posts, 0 answers
  1. kity
    kity avatar
    71 posts
    Member since:
    Mar 2012

    Posted 05 Feb 2014 Link to this post

    If you put gauge in RadListBox or HeaderedItemsControl or simple ItemsControl and enable negative scale* and not set Width and Height property. Will find that this control have fatal UI bug.
    Strech, Width and Height property not work correctly. Entire control is showing like one simple pixel that do noting.

    For test set BarIndicator to value 90 or -90

    Other problems is scale Ticks. It is apear only at half part.

    *enable negative scale:
    - HorizontalLinearScale min=0, max=100;
    - GaugeRange1 min= -100, max=0
    - GaugeRange2 min=0, max=100

    If you cannot reproduce bugs... write here and I will send to you example.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 06 Feb 2014 Link to this post

    Hi,

    Unfortunately we can't reproduce any issues using only the information you provided. Can you please create a sample solution demonstrating the reported issue and send it over? This would allow us to further investigate the case.

    Regards,
    Andrey Murzov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.

    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.

    Sign up for Free application insights >>
  3. DevCraft banner
  4. kity
    kity avatar
    71 posts
    Member since:
    Mar 2012

    Posted 06 Feb 2014 in reply to Andrey Link to this post

    Please, see attached file.


    <!-- calculates USA, Texas and Oregon cowherd -->
     
     <ScrollViewer VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
        <telerik:HeaderedItemsControl ItemsSource="{Binding MooringCollection, Mode=TwoWay}" >
     
            <telerik:HeaderedItemsControl.HeaderTemplate>
                <DataTemplate>
     
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20*" />
                            <ColumnDefinition Width="60*" />
                            <ColumnDefinition Width="10*" />
                            <ColumnDefinition Width="10*" />
                        </Grid.ColumnDefinitions>
     
                        <TextBlock Grid.Column="0" Text=" " FontSize="12" />
     
                        <StackPanel Grid.Column="1" HorizontalAlignment="Center" Orientation="Horizontal" Background="Chartreuse" >
                            <Ellipse Fill="Green" Height="14" Width="14" StrokeThickness="1" Stroke="Black" VerticalAlignment="Top" />
                            <TextBlock Text="Muu0" Margin="2 0" Width="60" />
                            <TextBlock Width="80" Text="MMM�uu;  length"  HorizontalAlignment="Center" VerticalAlignment="Top" />
                            <Ellipse Fill="Red" Height="14" Width="14" StrokeThickness="1" Stroke="Black" VerticalAlignment="Top" />
                            <TextBlock Text="Muu3" Margin="2 0" />
                        </StackPanel>
     
     
     
                        <!--<TextBlock Grid.Column="2" Text="" FontSize="12"  />-->
                        <TextBlock Grid.Column="2" Text="Muuu9" HorizontalAlignment="Center" FontSize="12"  />
                        <TextBlock Grid.Column="3" Text="Muuu8" HorizontalAlignment="Center" FontSize="12"  />
                    </Grid>
     
                </DataTemplate>
            </telerik:HeaderedItemsControl.HeaderTemplate>
     
            <telerik:HeaderedItemsControl.Items>
                <ItemsControl>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20*" />
                            <ColumnDefinition Width="60*"  />
                            <ColumnDefinition Width="10*" />
                            <ColumnDefinition Width="10*" />
                        </Grid.ColumnDefinitions>
     
                    <TextBlock Text="Moo01" VerticalAlignment="Center" Margin="2" FontSize="14" Width="100" />
     
                    <Border Grid.Column="1" BorderThickness="1" BorderBrush="Black"  Height="30" Margin="0 4">
                        <StackPanel>
     
                            <telerik:RadHorizontalLinearGauge  Width="Auto" Height="30">
                                <telerik:HorizontalLinearScale LabelTemplate="{StaticResource TickLabelEmpty}"  
                                                        Min="0" Max="100" MajorTicks="0" MiddleTicks="0" MinorTicks="0" MajorTickRelativeWidth="0.004*"
                                                        MiddleTickRelativeWidth="0.004*" >
     
                                    <telerik:HorizontalLinearScale.Indicators>
                                        <telerik:BarIndicator UseRangeColor="True" RangeColorMode="ProportionalLastRangesBrush" Value="90" IsAnimated="true"
                                                              StartWidth="0.9" EndWidth="0.9" />
     
                                        <telerik:LinearScaleMarker Value="90" IsAnimated="true" telerik:ScaleObject.Offset="-0.15*"
                                                                   telerik:LinearScale.RotateForVertical="False" telerik:ScaleObject.RelativeWidth="0.3*"
                                                                   telerik:ScaleObject.RelativeHeight="0.33*"  telerik:ScaleObject.Location="CenterOutside" >
                                            <telerik:LinearScaleMarker.Template>
                                                <ControlTemplate>
                                                    <TextBlock Text="90 muu" />
                                                </ControlTemplate>
                                            </telerik:LinearScaleMarker.Template>
                                        </telerik:LinearScaleMarker>
                                    </telerik:HorizontalLinearScale.Indicators>
     
                                    <telerik:HorizontalLinearScale.Ranges>
     
                                        <telerik:GaugeRange Min="-100" Max="0"   StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FF23568F" LabelForeground="#FF23568F" IndicatorBackground="Blue" />
                                        <telerik:GaugeRange Min="0"    Max="100" StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FFA0CCFF" LabelForeground="#FFA0CCFF" IndicatorBackground="Red" />
     
     
     
                                    </telerik:HorizontalLinearScale.Ranges>
     
                                    <!--
                                    <telerik:HorizontalLinearScale.CustomItems>
                                        <TextBlock Text="{Binding Muu1}" TextAlignment="Center" telerik:ScaleObject.Offset="0.15*" telerik:ScaleObject.Value="{Binding Value}" telerik:LinearScale.RotateForVertical="True"  telerik:ScaleObject.RelativeWidth="0.3*"  telerik:ScaleObject.RelativeHeight="0.3*"  telerik:ScaleObject.Location="CenterOutside" />
                                    </telerik:HorizontalLinearScale.CustomItems>
                                    -->
                                </telerik:HorizontalLinearScale>
                            </telerik:RadHorizontalLinearGauge>
     
                        </StackPanel>
                     </Border>
     
                    <Border Grid.Column="2" Background="White" BorderThickness="1" BorderBrush="Black" UseLayoutRounding="True"  Width="40" Height="30" >
                        <TextBlock Text="80000.25 mm" Foreground="#FF0826E4" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="10" />
                    </Border>
                    <Border  Grid.Column="3" Background="Red" BorderThickness="1" BorderBrush="Black" UseLayoutRounding="True"  Width="40" Height="30" >
                        <TextBlock Text="90000.25 mm" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="10" Foreground="Black" />
                    </Border>
                         
                </Grid>
                </ItemsControl>
                
            </telerik:HeaderedItemsControl.Items>
     
     
     
            <!--<telerik:HeaderedItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadWrapPanel Orientation="Vertical" ItemHeight="60" />
                </ItemsPanelTemplate>
            </telerik:HeaderedItemsControl.ItemsPanel>-->
     
        </telerik:HeaderedItemsControl>
    </ScrollViewer >


    <ItemsControl>          
               <ItemsControl.Items>
                   <ItemsControl >
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="20*" />
                               <ColumnDefinition Width="60*"  />
                               <ColumnDefinition Width="10*" />
                               <ColumnDefinition Width="10*" />
                           </Grid.ColumnDefinitions>
     
     
                           <TextBlock Grid.Column="0" Text="A" HorizontalAlignment="Center" FontSize="12" />
     
                           <Border  Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                               <StackPanel>
                                   <telerik:RadHorizontalLinearGauge Width="Auto" Height="50" Margin="140 0 0 0" >
                                       <telerik:HorizontalLinearScale LabelTemplate="{StaticResource TickLabelEmpty}"  
                                                               Min="0" Max="100" MajorTicks="0" MiddleTicks="0" MinorTicks="0" MajorTickRelativeWidth="0.004*" MiddleTickRelativeWidth="0.004*" >
     
                                           <telerik:HorizontalLinearScale.Indicators>
                                               <telerik:BarIndicator UseRangeColor="True" RangeColorMode="ProportionalLastRangesBrush" Value="-90" IsAnimated="true" StartWidth="0.9" EndWidth="0.9" />
     
                                               <telerik:LinearScaleMarker Margin="40 0" Value="-90" IsAnimated="true" telerik:LinearScale.RotateForVertical="False"  telerik:ScaleObject.Offset="-0.15*"  telerik:ScaleObject.RelativeWidth="0.2*" telerik:ScaleObject.RelativeHeight="0.4*"  telerik:ScaleObject.Location="CenterOutside" >
                                                   <telerik:LinearScaleMarker.Template>
                                                       <ControlTemplate>
                                                           <TextBlock Text="-90 mm" />
                                                       </ControlTemplate>
                                                   </telerik:LinearScaleMarker.Template>
                                               </telerik:LinearScaleMarker>
                                           </telerik:HorizontalLinearScale.Indicators>
     
                                           <telerik:HorizontalLinearScale.Ranges>
                                               <telerik:GaugeRange Min="-100" Max="0"  StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FF23568F" LabelForeground="#FF23568F" IndicatorBackground="#FF23568F" />
                                               <telerik:GaugeRange Min="0" Max="100" StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FFA0CCFF" LabelForeground="#FFA0CCFF" IndicatorBackground="#FFA0CCFF" />
                                           </telerik:HorizontalLinearScale.Ranges>
     
                                           
     
                                       </telerik:HorizontalLinearScale>
                                   </telerik:RadHorizontalLinearGauge>
                               </StackPanel>
                           </Border>
                            
                            
                            <TextBlock Grid.Column="2" Text="TT" HorizontalAlignment="Center" FontSize="12" />
                           <TextBlock Grid.Column="3" Text="DD" HorizontalAlignment="Center" FontSize="12" />
                            
                       </Grid>
                   </ItemsControl>
                   <ItemsControl>
                       <TextBlock Text="FUNNN 2"/>
                   </ItemsControl>
               </ItemsControl.Items>
           </ItemsControl>
            
            
            
            
            
            
            
            
            
           


    <ItemsControl>          
              <ItemsControl.Items>
                  <ItemsControl >
                      <Grid>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="20*" />
                              <ColumnDefinition Width="60*"  />
                              <ColumnDefinition Width="10*" />
                              <ColumnDefinition Width="10*" />
                          </Grid.ColumnDefinitions>
     
     
                          <TextBlock Grid.Column="0" Text="A" HorizontalAlignment="Center" FontSize="12" />
     
                          <Border  Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                              <StackPanel>
                                  <telerik:RadHorizontalLinearGauge Width="220" Height="50" Margin="140 0 0 0" >
                                      <telerik:HorizontalLinearScale LabelTemplate="{StaticResource TickLabelEmpty}"  
                                                              Min="0" Max="100" MajorTicks="0" MiddleTicks="0" MinorTicks="0" MajorTickRelativeWidth="0.004*" MiddleTickRelativeWidth="0.004*" >
     
                                          <telerik:HorizontalLinearScale.Indicators>
                                              <telerik:BarIndicator UseRangeColor="True" RangeColorMode="ProportionalLastRangesBrush" Value="90" IsAnimated="true" StartWidth="0.9" EndWidth="0.9" />
     
                                              <telerik:LinearScaleMarker Margin="40 0" Value="90" IsAnimated="true" telerik:LinearScale.RotateForVertical="False"  telerik:ScaleObject.Offset="-0.15*"  telerik:ScaleObject.RelativeWidth="0.2*" telerik:ScaleObject.RelativeHeight="0.4*"  telerik:ScaleObject.Location="CenterOutside" >
                                                  <telerik:LinearScaleMarker.Template>
                                                      <ControlTemplate>
                                                          <TextBlock Text="90 mm" />
                                                      </ControlTemplate>
                                                  </telerik:LinearScaleMarker.Template>
                                              </telerik:LinearScaleMarker>
                                          </telerik:HorizontalLinearScale.Indicators>
     
                                          <telerik:HorizontalLinearScale.Ranges>
                                              <telerik:GaugeRange Min="-100" Max="0"  StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FF23568F" LabelForeground="#FF23568F" IndicatorBackground="#FF23568F" />
                                              <telerik:GaugeRange Min="0" Max="100" StartWidth="0.02" EndWidth="0.02" Background="Transparent" TickBackground="#FFA0CCFF" LabelForeground="#FFA0CCFF" IndicatorBackground="#FFA0CCFF" />
                                          </telerik:HorizontalLinearScale.Ranges>
     
                                          
     
                                      </telerik:HorizontalLinearScale>
                                  </telerik:RadHorizontalLinearGauge>
                              </StackPanel>
                          </Border>
                           
                          <TextBlock Grid.Column="2" Text="TT" HorizontalAlignment="Center" FontSize="12" />
                          <TextBlock Grid.Column="3" Text="DD" HorizontalAlignment="Center" FontSize="12" />
                           
                      </Grid>
                  </ItemsControl>
                  <ItemsControl>
                      <TextBlock Text="FUNNN 2"/>
                  </ItemsControl>
              </ItemsControl.Items>
          </ItemsControl>
  5. kity
    kity avatar
    71 posts
    Member since:
    Mar 2012

    Posted 06 Feb 2014 in reply to kity Link to this post

    Set RadHorizontalLinearGauge to see that UI not visualisate correctly.

     
    <telerik:RadHorizontalLinearGauge Width="Auto" Height="Auto" Margin="0 0 0 0" >
  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 10 Feb 2014 Link to this post

    Hi,

    Thanks for sample code.

    We have checked it and all things work as expected in the gauge control.

    The RadHorizontalLinearGauge uses a size which is provided by the container you use. So, when you use the StackPanel for it then you should specify MinHeight property which is enough to show your gauge correctly.

    The scale which uses Min and Max as 0 and 100 is not a negative scale. So, it's incorrect to use negative values for its indicators. Also it's incorrect to use negative Min/Max values for its gauge ranges.

    Unfortunately it is not clear what are you trying to implement using the gauge control. So, It is hard to say, but probably the gauge control just does not support the functionality you should implement.

    Regards,
    Andrey Murzov
    Telerik

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  7. Richard
    Richard avatar
    11 posts
    Member since:
    Jul 2014

    Posted 26 Oct 2014 in reply to Andrey Link to this post

    Posting seems be a problem... I have the same problem... please help!
                                                    
    <telerik:RadVerticalLinearGauge Height="263" >
        <telerik:VerticalLinearScale Min="0" Max="{Binding ADspTorque.Value, Converter={StaticResource MySConverter}, ConverterParameter=1.5}" Width="45" Margin="-65,0,0,0" MajorTicks="5" MinorTicks="5" >
            <telerik:VerticalLinearScale.Indicators>
                <telerik:BarIndicator Value="{Binding ADpvTorque.Value}" ClipToBounds="True"  StartWidth=".5" EndWidth=".5"  Height="5" Background="Cyan" Margin="15,0,0,0"
                     MaxHeight="{Binding ADspTorque.Value,FallbackValue=10, Converter={StaticResource MySConverter}, ConverterParameter=1.5}"  MinHeight="0">
                </telerik:BarIndicator>
                <telerik:Marker telerik:ScaleObject.RelativeWidth="0.1*" telerik:ScaleObject.RelativeHeight="0.05*" Width="2" Height="2" Value="{Binding ADspTorque.Value}" telerik:ScaleObject.Location="Inside" Margin="20,0,0,0">
                </telerik:Marker>
            </telerik:VerticalLinearScale.Indicators>
        </telerik:VerticalLinearScale>
    </telerik:RadVerticalLinearGauge>
  8. kity
    kity avatar
    71 posts
    Member since:
    Mar 2012

    Posted 26 Oct 2014 in reply to Richard Link to this post

    http://demos.telerik.com/silverlight/#DataBar/FirstLook

    http://www.telerik.com/help/silverlight/raddatabar-overview.html

    Richard said:Posting seems be a problem... I have the same problem... please help!
                                                    
    <telerik:RadVerticalLinearGauge Height="263" >
        <telerik:VerticalLinearScale Min="0" Max="{Binding ADspTorque.Value, Converter={StaticResource MySConverter}, ConverterParameter=1.5}" Width="45" Margin="-65,0,0,0" MajorTicks="5" MinorTicks="5" >
            <telerik:VerticalLinearScale.Indicators>
                <telerik:BarIndicator Value="{Binding ADpvTorque.Value}" ClipToBounds="True"  StartWidth=".5" EndWidth=".5"  Height="5" Background="Cyan" Margin="15,0,0,0"
                     MaxHeight="{Binding ADspTorque.Value,FallbackValue=10, Converter={StaticResource MySConverter}, ConverterParameter=1.5}"  MinHeight="0">
                </telerik:BarIndicator>
                <telerik:Marker telerik:ScaleObject.RelativeWidth="0.1*" telerik:ScaleObject.RelativeHeight="0.05*" Width="2" Height="2" Value="{Binding ADspTorque.Value}" telerik:ScaleObject.Location="Inside" Margin="20,0,0,0">
                </telerik:Marker>
            </telerik:VerticalLinearScale.Indicators>
        </telerik:VerticalLinearScale>
    </telerik:RadVerticalLinearGauge>
  9. kity
    kity avatar
    71 posts
    Member since:
    Mar 2012

    Posted 26 Oct 2014 in reply to Richard Link to this post

    http://demos.telerik.com/silverlight/#DataBar/FirstLook

    http://www.telerik.com/help/silverlight/raddatabar-overview.html

    Richard said:Posting seems be a problem... I have the same problem... please help!
                                                    <telerik:RadVerticalLinearGauge Height="263" >    <telerik:VerticalLinearScale Min="0" Max="{Binding ADspTorque.Value, Converter={StaticResource MySConverter}, ConverterParameter=1.5}" Width="45" Margin="-65,0,0,0" MajorTicks="5" MinorTicks="5" >        <telerik:VerticalLinearScale.Indicators>            <telerik:BarIndicator Value="{Binding ADpvTorque.Value}" ClipToBounds="True" StartWidth=".5" EndWidth=".5"  Height="5" Background="Cyan" Margin="15,0,0,0"                 MaxHeight="{Binding ADspTorque.Value,FallbackValue=10, Converter={StaticResource MySConverter}, ConverterParameter=1.5}"  MinHeight="0">            </telerik:BarIndicator>            <telerik:Marker telerik:ScaleObject.RelativeWidth="0.1*"telerik:ScaleObject.RelativeHeight="0.05*" Width="2" Height="2" Value="{Binding ADspTorque.Value}"telerik:ScaleObject.Location="Inside" Margin="20,0,0,0">            </telerik:Marker>        </telerik:VerticalLinearScale.Indicators>    </telerik:VerticalLinearScale></telerik:RadVerticalLinearGauge>

Back to Top
DevCraft banner