This is a migrated thread and some comments may be shown as answers.

Vertical Linear Scale Custom Items are vertical

1 Answer 128 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
ארז
Top achievements
Rank 1
ארז asked on 05 Nov 2014, 11:20 AM
hi,
when i try to add custom items such as textblocks, ellipse, rectangles or any ui element, they are rendered verticaly,
although i'm using the verticale scale.
I couldn't find any property in the style that can tell the scale to show them horizontaly, like the tick marks embeded directly in the vertical scale.

this is my example:
<Window x:Class="Gauge.MainWindow"
        xmlns:local="clr-namespace:Gauge"
        Title="MainWindow"
        Width="525"
        Height="500">
    <Window.Resources>
        <Style TargetType="{x:Type telerik:Marker}">
            <Setter Property="telerik:ScaleObject.Location" Value="Outside" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:Marker}">
                        <StackPanel Orientation="Horizontal">
                            <Border HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    BorderBrush="{TemplateBinding Background}"
                                    BorderThickness="2">
                                <TextBlock Width="28.5"
                                           Background="{TemplateBinding Background}"
                                           Foreground="Black"
                                           Opacity="0.5"
                                           Padding="2,0"
                                           Text="{Binding Value,
                                                          RelativeSource={RelativeSource TemplatedParent}}" />
                            </Border>
                            <Rectangle Width="10"
                                       Height="2"
                                       VerticalAlignment="Center"
                                       Fill="{TemplateBinding Background}" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="AliceBlue">
        <telerik:RadVerticalLinearGauge Grid.Row="1"
                                        Grid.Column="1"
                                        Width="100"
                                        Height="250"
                                        OuterBackground="Azure"
                                        OuterBorderBrush="Black"
                                        telerik:StyleManager.Theme="Windows8">
            <telerik:RadVerticalLinearGauge.Resources>
                <Style x:Key="CustomTick" TargetType="Ellipse">
                    <Setter Property="Fill" Value="White" />
                    <Setter Property="Width" Value="5" />
                    <Setter Property="Height" Value="5" />
                    <Setter Property="telerik:ScaleObject.Location" Value="CenterInside" />
                    <Setter Property="Canvas.ZIndex" Value="1001" />
                </Style>
                <Style x:Key="CustomTickLine" TargetType="Rectangle">
                    <Setter Property="telerik:ScaleObject.RelativeHeight" Value="0.07*" />
                    <Setter Property="Width" Value="1" />
                    <Setter Property="telerik:ScaleObject.Location" Value="CenterOutside" />
                    <Setter Property="Canvas.ZIndex" Value="1001" />
                </Style>
            </telerik:RadVerticalLinearGauge.Resources>
            <telerik:VerticalLinearScale IsInteractive="True"
                                         LabelUseRangeColor="True"
                                         Max="4500"
                                         Min="0">
                <telerik:VerticalLinearScale.Ranges>
                    <telerik:GaugeRange IndicatorBackground="Red"
                                        LabelForeground="Red"
                                        Max="2000"
                                        Min="0"
                                        TickBackground="Red" />
                    <telerik:GaugeRange IndicatorBackground="Green"
                                        LabelForeground="Green"
                                        Max="4500"
                                        Min="2000"
                                        TickBackground="Green" />
                </telerik:VerticalLinearScale.Ranges>
                <telerik:VerticalLinearScale.Indicators>
                    <telerik:BarIndicator x:Name="barIndicator_main"
                                          RangeColorMode="Default"
                                          UseRangeColor="True"
                                          Value="4200" />
                    <telerik:Marker UseRangeColor="True"
                                    telerik:ScaleObject.Offset="15"
                                    telerik:ScaleObject.RelativeHeight="20"
                                    telerik:ScaleObject.RelativeWidth="40"
                                    Value="{Binding Value,
                                                    ElementName=barIndicator_main}">
                        <telerik:Marker.LayoutTransform>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
                        </telerik:Marker.LayoutTransform>
                    </telerik:Marker>
                </telerik:VerticalLinearScale.Indicators>
                <telerik:VerticalLinearScale.CustomItems>
                    <Ellipse Stroke="Red"
                             Style="{StaticResource CustomTick}"
                             telerik:ScaleObject.Value="0">
                        <!--<Ellipse.LayoutTransform>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
                        </Ellipse.LayoutTransform>-->
                    </Ellipse>
                    <Rectangle Fill="Red"
                               Style="{StaticResource CustomTickLine}"
                               telerik:ScaleObject.Value="0">
                        <!--<Rectangle.LayoutTransform>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
                        </Rectangle.LayoutTransform>-->
                    </Rectangle>
 
                    <!--
                        <TextBlock FontWeight="Bold"
                        Foreground="Red"
                        Text="2000"
                        telerik:ScaleObject.Location="Outside"
                        telerik:ScaleObject.Value="2000" />
                    -->
                </telerik:VerticalLinearScale.CustomItems>
            </telerik:VerticalLinearScale>
 
        </telerik:RadVerticalLinearGauge>
    </Grid>
</Window>

Thanks.

1 Answer, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 07 Nov 2014, 03:02 PM
Hello,

You can use the LinearScale.RotateForVertical attachable property. Please find attached a modified version of your project.

Regards,
Sia
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.

 
Tags
Gauges
Asked by
ארז
Top achievements
Rank 1
Answers by
Sia
Telerik team
Share this question
or