Gauge Resizing

[Tom Cugini]

Have a Grid with two columns.
Radial Gauge in Column 0.
Vertical Grid Splitter.

Radial Gauge has two RadialScales.
Have two TextBlocks in middle of Radial Gauge; one shows Name 2nd Value.
Have two more textblocks on side of Gauge for outer RadialScale Name/Value.

How can i keep the textboxes in sync w/ gauge when resing window or when moving vertical splitter?

[Andrey]

Hello Tom Cugini,

It seems that you use the Margin property to place text blocks to their positions. If you want to use resizable gauge with text over it, then you should use relative positioning for text blocks also. For example you can use the Grid element with row and column definitions for text blocks.

<UserControl x:Class="GaugeExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot">
        <telerik:RadGauge>
            <telerik:RadialGauge>
                <telerik:RadialScale x:Name="radialScale1"
                                     Min="0" Max="10">
                    <telerik:IndicatorList>
                        <telerik:Marker x:Name="marker1"
                                        IsAnimated="True"
                                        Value="5.5"/>
                    </telerik:IndicatorList>
                </telerik:RadialScale>
                <telerik:RadialScale x:Name="radialScale2"
                                     Min="0" Max="100"
                                     MajorTicks="4"
                                     Radius="0.4">
                    <telerik:IndicatorList>
                        <telerik:Marker x:Name="marker2"
                                        IsAnimated="True"
                                        Value="50"/>
                    </telerik:IndicatorList>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </telerik:RadGauge>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="1" Grid.Row="1"
                       FontSize="12" Foreground="Yellow"
                       Text="{Binding ElementName=marker1, Path=Value, StringFormat='Speed: {0:F2}'}"/>
        </Grid>
    </Grid>
</UserControl>

Best wishes,
Andrey Murzov
the Telerik team