locked
menuitem style RRS feed

  • Question

  • Hi All.

    I have MenuItem in ToolBar and I would like create style for it. Now I have

    <ToolBar Name="Reports" Height="29" IsEnabled="True" Background="Transparent" >
        <Menu Name="Reporting" Background="Transparent" Margin="5,0,5,0" Style="{StaticResource Menu}">
            <MenuItem Name="Report" Header="Reports"  Foreground="#FF002879">
                <MenuItem Header="Report1" Name="Report1"></MenuItem>
                <MenuItem Header="Report2" Name="Report2"></MenuItem>
                <MenuItem Header="Report3" Name="Report3"></MenuItem>
            </MenuItem>
        </Menu>
    </ToolBar>

    and style

    <Window.Resources>

        <LinearGradientBrush x:Key="HighLight" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
            <GradientStop Color="#FFE3F7FF"/>
            <GradientStop Color="#FFE3F7FF" Offset="0.346"/>
            <GradientStop Color="#FFE1F1F9" Offset="0.433"/>
            <GradientStop Color="#FFBCECFE" Offset="0.567"/>
            <GradientStop Color="#FFB7E7FB" Offset="1"/>
        </LinearGradientBrush>

    <Style x:Key="Menu" TargetType="{x:Type Menu}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Menu}"> <Border> <StackPanel Orientation="Horizontal" IsItemsHost="True"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{StaticResource HighLight}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources>

    But that style doesn't work. Where my wrong?

    Thanks.



    • Edited by zleug Friday, September 14, 2012 6:44 PM
    Friday, September 14, 2012 6:30 PM

Answers

  • Hi eugzl,

    The root cause of your issue is the template is incorrect, you could not apply that template to MenuItem, because MenuItem not only a ContentControl, but it could show other MenuItems, if you use ContentPresenter to show content, the child list will not render, so you could not get other list

    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" Margin="{TemplateBinding Margin}"  />
    You have to get the default template of MenuItem, and based on the default template to cretae your custom one, you could download the default one from this link:

    https://skydrive.live.com/?cid=51b2fdd068799d15&id=51B2FDD068799D15%21616&sc=documents

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Sheldon _Xiao Monday, September 24, 2012 4:56 AM
    Monday, September 17, 2012 6:46 AM

All replies

  • Style of Menu will not work for MenuItem. Refer following link if you want to change style of MenuItem.

    http://msdn.microsoft.com/en-us/library/ms747082(v=vs.85).aspx


    Gaurav Khanna | Microsoft VB.NET MVP

    Friday, September 14, 2012 6:42 PM
  • Hi Khanna. Thanks for replay.

    I changed like

    <ToolBar Name="Reports" Height="29" IsEnabled="True" Background="Transparent" >
        <Menu Name="Reporting" Background="Transparent"  Margin="5,0,5,0">
            <MenuItem Name="Report" Header="Reports" Template="{StaticResource MenuItemTemplate}"  Foreground="#FF002879">
                <MenuItem Header="Report1" Name="Repor1t"></MenuItem>
                <MenuItem Header="Report2" Name="Report2"></MenuItem>
                <MenuItem Header="Report3" Name="Report3"></MenuItem>
        </Menu>
    </ToolBar>

    and style

    <Window.Resources>
        <LinearGradientBrush x:Key="HighLight" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
            <GradientStop Color="#FFE3F7FF"/>
            <GradientStop Color="#FFE3F7FF" Offset="0.346"/>
            <GradientStop Color="#FFE1F1F9" Offset="0.433"/>
            <GradientStop Color="#FFBCECFE" Offset="0.567"/>
            <GradientStop Color="#FFB7E7FB" Offset="1"/>
        </LinearGradientBrush>
    
    
        <ControlTemplate x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
            <Border Name="Border" BorderBrush="Transparent" BorderThickness="1.0" 
                TextBlock.Foreground="Black" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Padding="{TemplateBinding Padding}">
                <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" Margin="{TemplateBinding Margin}"  />
            </Border>
    
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource HighLight}" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource HighLight}" />
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource HighLight}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    <Window.Resources>

    Still doesn't work properly. MouseOver doesn't work. MenuItem background changed only when I click it and return back when I click in other place. And when I click I didn't group of items. How to fix it?

    Thanks.




    • Edited by zleug Friday, September 14, 2012 7:30 PM
    Friday, September 14, 2012 7:20 PM
  • Try adding TargetName="Border" to your IsMouseOver Trigger.

    <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Background" TargetName="Border" Value="{StaticResource HighLight}" />
    </Trigger>

    And you may need to set the default background of the border to Transparent if it is not detecting the mouseOver event.

    ~Christine


    My Gallery


    Saturday, September 15, 2012 3:35 PM
  • Hi Christine. Thanks for replay.

    Yes IsMouseOver become to work. But still when I click menu header Reports I cannot get list of submenu items such us Report1 Report2 and Report3. How fix it?

    Thanks.

    Saturday, September 15, 2012 9:48 PM
  • Hi eugzl,

    The root cause of your issue is the template is incorrect, you could not apply that template to MenuItem, because MenuItem not only a ContentControl, but it could show other MenuItems, if you use ContentPresenter to show content, the child list will not render, so you could not get other list

    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" Margin="{TemplateBinding Margin}"  />
    You have to get the default template of MenuItem, and based on the default template to cretae your custom one, you could download the default one from this link:

    https://skydrive.live.com/?cid=51b2fdd068799d15&id=51B2FDD068799D15%21616&sc=documents

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Sheldon _Xiao Monday, September 24, 2012 4:56 AM
    Monday, September 17, 2012 6:46 AM
  • Hi eugzl,
     
    I am marking your issue as "Answered", if you have new findings about your issue, please let me know.


    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, September 24, 2012 4:57 AM