Question

I’m writing an application that creates a graphical ‘dial’, like a clock. Each element in the dial is created and then added to the dial in a clockwise fashion – imagine creating a single element with the hour 1 that includes the minute strokes, the number ‘1’ and other embelishments, drawing it, then repeting for the hour 2, etc.

Rather than recalculating the plotting angles and positions for each element in the dial, depending on where the dial element is to be positioned/rotated, can I create all the lines, ticks and text etc for each element as a graphical ‘group’ and then perform a rotate transform on this entire group?

Thanks for any help.

Answer 1

Yes. Use a grid, place all the other objects and or controls on that grid and then specify a view transformation for the grid to rotate it a number of degree’s.

i.e. To transform everything on the grid by 45 degrees it would look like this in XAML;

    <Grid x:Name="LayoutRoot" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="45"/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Rectangle Fill="White" Stroke="Black" Margin="198,161,265,196"/>
    </Grid>

This example only has a single rectangle on the gird but the concept is exactly the same regardless how many objects are included.

To adjust the rotation latter through C# you can then use following, which will rotate the Grid by 90 degrees:

RotateTransform aRT = new RotateTransform(90);
this.LayoutRoot.RenderTransform = aRT;