[Solved] Vertical Linear Scale Custom Items are vertical

[ארז]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:Gauge"

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

        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.

[Sia]

Hello,

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

Regards,
Sia
Telerik