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

[kity]

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.

[Andrey]

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

[kity]

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>

[kity]

Set RadHorizontalLinearGauge to see that UI not visualisate correctly.

 

<telerik:RadHorizontalLinearGauge Width="Auto" Height="Auto" Margin="0 0 0 0" >

[Andrey]

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

[Richard]

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>

[kity]

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

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

[quote]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>

[/quote]

[kity]

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

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

[quote]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>[/quote]