Vertical Linear Scale Custom Items are vertical

2 posts, 0 answers
  1. ארז
    ארז avatar
    1 posts
    Member since:
    Nov 2014

    Posted 05 Nov 2014 Link to this post

    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.
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 07 Nov 2014 Link to this post

    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top