locked
How top button on this circle RRS feed

  • Question

  • Dear all,

    I have the following XAML code which display an outtercircle black and an innercircle light red

    <Grid Height="300" Width="300">
        <Grid Name="DialGrid" Height="250" Width="250">
          <Grid.RenderTransformOrigin>
            <Point X="0.5" Y="0.5"/>
          </Grid.RenderTransformOrigin>
          <Grid.RenderTransform>
            <RotateTransform x:Name="DialRotateTransform" Angle="5" CenterX="0" CenterY="0"/>
          </Grid.RenderTransform>
          <Ellipse Stroke="#FF000000" Height="250" Width="250" x:Name="ElOutside" s:Contacts.ContactDown="ElOutside_ContactDown">
            <Ellipse.Fill>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <Rectangle Margin="115,0,117,0" Name="rectangle1" Stroke="Orange" Fill="Orange" Height="52" VerticalAlignment="Top" />
    
          <Ellipse Stroke="#FF000000" Width="150" Height="150" Fill="Red" x:Name="ElInside" Margin="27,24,26,25" />
    
          
        </Grid>
        <Rectangle Fill="Black" Height="25" Margin="140,0,142,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" />
      </Grid>

    How can I place button inside the outer black ring at angle 0,90,180 and 270 degres ?

    Thnaks for help
    regards

    Serge


    Your knowledge is enhanced by that of others.
    Monday, April 26, 2010 9:29 PM

Answers

  • yep,

     

    thnaks a lot


    Your knowledge is enhanced by that of others.
    Tuesday, April 27, 2010 12:14 PM

All replies

  • <Grid Height="300" Width="300">
       <Grid Name="DialGrid" Height="250" Width="250">
        <Grid.RenderTransformOrigin>
         <Point X="0.5" Y="0.5"/>
        </Grid.RenderTransformOrigin>
        <Grid>
       <Ellipse Stroke="#FF000000" Height="250" Width="250" x:Name="ElOutside" s:Contacts.ContactDown="ElOutside_ContactDown">
        <Ellipse.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FF000000" Offset="0"/>
         <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </LinearGradientBrush>
        </Ellipse.Fill>
       </Ellipse>
       <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="75"/>
       <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Center" Width="75"/>
       <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Top" Width="75"/>
       <Button Content="Button" HorizontalAlignment="Right" VerticalAlignment="Center" Width="75"/>
       </Grid>
       <Grid Margin="50.5,0,49.5,50.5" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform Angle="5"/>
         <TranslateTransform/>
        </TransformGroup>
        </Grid.RenderTransform>
        <Rectangle Margin="64.5,0,67.5,0" x:Name="rectangle1" Stroke="Orange" Fill="Orange" Height="52" VerticalAlignment="Top" />
        <Ellipse Stroke="#FF000000" Width="150" Height="150" Fill="Red" x:Name="ElInside" Margin="0,49.5,0,0" />
       </Grid>   
      </Grid>
      <Rectangle Fill="Black" Height="25" Margin="140,0,142,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" />
     </Grid>

    Is that what you're looking for?

    I put the outer circle into a grid and placed 4 aligned buttons into the grid with it.  I also made the inner circle and rectangle a grid.  Finally, I moved the rotation from the outermost grid (thereby causing the outer circle and buttons to rotate) to the inner circle and rectangle. 

    Obviously the buttons are going to need some sprucing up.  Let me know if this is what you were looking for.

    Thanks!

    Kelly

    Monday, April 26, 2010 9:45 PM
  • yep,

     

    thnaks a lot


    Your knowledge is enhanced by that of others.
    Tuesday, April 27, 2010 12:14 PM