menuitem style

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.