Gauge Resizing

2 posts, 0 answers
  1. Tom Cugini
    Tom Cugini avatar
    5 posts
    Member since:
    Mar 2010

    Posted 10 Mar 2011 Link to this post

    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?
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 15 Mar 2011 Link to this post

    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"
        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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
Back to Top