none
how to turn a MenuItem into a circle shape?

    Question

  •  

    hello,everyone:

    now, I add a menu  into the canvas:

    Code Snippet

           <Menu>
              <MenuItem Header ="aaa" >
                <MenuItem Header ="bbb"/>
                <MenuItem Header ="ddd"/>
                <MenuItem Header ="ccc"/>
              </MenuItem>
            </Menu>

    I  want to make the main menu look more beautiful, so I want to turn the shape of a menu into ellipse shape.

    Code Snippet

    <Window.Resources>   
          <ControlTemplate x:Key="MyTemplate" TargetType="{x:Type MenuItem}">
              <Ellipse Name ="buttonEllipse" HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     Stroke ="BlueViolet"
                     StrokeThickness="1" Width ="50" Height ="30"

                     >

                <Ellipse.Fill>
                  <RadialGradientBrush GradientOrigin="0.75,0.25">
                    <GradientStop Color="#CBC8F1" Offset="0.0" />
                    <GradientStop Color="MediumBlue" Offset="0.5" />
                    <GradientStop Color="DarkBlue" Offset="1.0" />
                  </RadialGradientBrush>
                </Ellipse.Fill>

                <Ellipse.RenderTransform>
                  <ScaleTransform x:Name="buttonEllipseScale" CenterX ="25" CenterY ="15" ScaleX ="1" ScaleY ="1"/>
                </Ellipse.RenderTransform>

                <Ellipse.Triggers>
                  <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                      <BeginStoryboard Name="mouseEnterBeginStoryboard">
                        <Storyboard>
                          <DoubleAnimation
                            Storyboard.TargetName="buttonEllipseScale"
                            Storyboard.TargetProperty="ScaleX"
                            To ="1.5" Duration="0:0:0.3" />
                          <DoubleAnimation
                            Storyboard.TargetName="buttonEllipseScale"
                            Storyboard.TargetProperty="ScaleY"
                            To ="1.5"
                            Duration="0:0:0.3" />
                        </Storyboard>
                      </BeginStoryboard>
                    </EventTrigger.Actions>
                  </EventTrigger>
                  <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                      <BeginStoryboard Name="mouseLeaveBeginStoryboard">
                        <Storyboard>
                          <DoubleAnimation
                            Storyboard.TargetName="buttonEllipseScale"
                            Storyboard.TargetProperty="ScaleX"
                            To ="1" Duration="0:0:0.5" />
                          <DoubleAnimation
                            Storyboard.TargetName="buttonEllipseScale"
                            Storyboard.TargetProperty="ScaleY"
                            To ="1"
                            Duration="0:0:0.5" />
                        </Storyboard>
                      </BeginStoryboard>
                    </EventTrigger.Actions>
                  </EventTrigger>

                </Ellipse.Triggers>
              </Ellipse>

           </ControlTemplate>
        </Window.Resources>

     

    .....

            <Menu>
              <MenuItem Header ="aaa"  Template="{DynamicResource MyTemplate}">
                <MenuItem Header ="bbb"/>
                <MenuItem Header ="ddd"/>
                <MenuItem Header ="ccc"/>
              </MenuItem>
            </Menu>

     

     

    but, when I click the menu, the menu can't open up. why?

    how to do it?

     

    thanks

     

    Tuesday, September 04, 2007 7:36 AM

Answers

  • Try using Microsoft Expressions to create the control template.
    There u have an option to "Edit A Copy" of the existing control template. So all the triggers are present already.
    Tuesday, September 04, 2007 8:56 AM

All replies

  • I think it's because in ur ControlTemplate, you left out the ControlTemplate.Triggers which handles the triggers (mouse clicks, etc) which will open the menu. Also, you did not define your ContentPresenter, hence when the template is applied to the menuItem, the headers disappear.
    Tuesday, September 04, 2007 8:33 AM
  • is there a way to realize the same function?

    Tuesday, September 04, 2007 8:52 AM
  • Try using Microsoft Expressions to create the control template.
    There u have an option to "Edit A Copy" of the existing control template. So all the triggers are present already.
    Tuesday, September 04, 2007 8:56 AM