Menu Item color change in wpf
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 14 of 14

Thread: Menu Item color change in wpf

  1. #1
    Join Date
    Apr 2009
    Posts
    9

    Menu Item color change in wpf

    Hi ,

    I have attaached with my project window menu bar for review .

    When i selected menu item its highlited with blue color .i dont want that color bec my req is like that.
    Please send me reply asap. bec its very urgent for me.

    please review the attachment.
    Attached Files Attached Files

  2. #2
    Join Date
    Jan 2006
    Location
    18 32' N / 73 52' E
    Posts
    416

    Re: Menu Item color change in wpf

    Put Background as white: something like this.

    Code:
    <MenuItem x:Name="mnuFile" Header="File" Background="White" Foreground="SteelBlue"/>
    It will remove Blue hovering effect.
    I hope this is what you want.
    Regards,
    MMH
    Rate my post if you find it usefull.

  3. #3
    Join Date
    Apr 2009
    Posts
    9

    Re: Menu Item color change in wpf

    Thanks for your reply and its not working for me.please let me know.

  4. #4
    Join Date
    Jan 2006
    Location
    18 32' N / 73 52' E
    Posts
    416

    Re: Menu Item color change in wpf

    Quote Originally Posted by syr View Post
    Thanks for your reply and its not working for me.please let me know.
    Can you paste the lines of code that you have coded for menu item ?

  5. #5
    Join Date
    Apr 2009
    Posts
    9

    Re: Menu Item color change in wpf

    Please check the following code.Thanks for your fast reply.

    <Menu Margin="12,0,0,0" Name="menuManageData" Height="26" VerticalAlignment="Top" Background="White" HorizontalAlignment="Left" Width="302">
    <MenuItem Header="Search For Form" Click="SearchFrm_Click" Foreground="#FF0093BD" ForceCursor="True" Background="White" FontFamily="Arial" OverridesDefaultStyle="False" Focusable="True" HeaderStringFormat="Bold" />
    <MenuItem Header="Search and Replace" Click="SearchReplace_Click" Foreground="#FF0093BD" FontFamily="Arial" />
    <MenuItem Header="Add New Form" Foreground="#FF0093BD" Click="AddNewFrm_Click" Background="White" FontFamily="Arial" />
    </Menu>

  6. #6
    Join Date
    Jan 2006
    Location
    18 32' N / 73 52' E
    Posts
    416

    Re: Menu Item color change in wpf

    Quote Originally Posted by syr View Post
    Please check the following code.Thanks for your fast reply.

    <Menu Margin="12,0,0,0" Name="menuManageData" Height="26" VerticalAlignment="Top" Background="White" HorizontalAlignment="Left" Width="302">
    <MenuItem Header="Search For Form" Click="SearchFrm_Click" Foreground="#FF0093BD" ForceCursor="True" Background="White" FontFamily="Arial" OverridesDefaultStyle="False" Focusable="True" HeaderStringFormat="Bold" />
    <MenuItem Header="Search and Replace" Click="SearchReplace_Click" Foreground="#FF0093BD" FontFamily="Arial" />
    <MenuItem Header="Add New Form" Foreground="#FF0093BD" Click="AddNewFrm_Click" Background="White" FontFamily="Arial" />
    </Menu>
    Hi, Can you tell me whether setting Background = "White" for menuItem works? or doent not work completely?

    In your code i found that, for 2nd menuItem Background="White" is missed out.

    Please check it. I have tested this in both VS2008 and VS2008 EE.
    Regards,
    MMH
    Rate my post if you find it usefull.

  7. #7
    Join Date
    Apr 2009
    Posts
    9

    Re: Menu Item color change in wpf

    I am using C# 2008 express edition and when i change the background to white to all menu items still it is showing blue whem mouse hover.

    Thank you for your continuous support .

  8. #8
    Join Date
    Jan 2006
    Location
    18 32' N / 73 52' E
    Posts
    416

    Thumbs up Re: Menu Item color change in wpf

    Quote Originally Posted by syr View Post
    I am using C# 2008 express edition and when i change the background to white to all menu items still it is showing blue whem mouse hover.

    Thank you for your continuous support .
    Whenever you want to change the appearance of a control, consider using Control Templates. Put this code in App.xaml.

    I would recommend you to make a separate resource file and put the below code. You can google to know how to use resource file.

    Code:
    <Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type Menu}">
    <Border 
    Background="White"
    BorderBrush="Transparent"
    BorderThickness="1">
    <StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    
    <ControlTemplate 
    x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" 
    TargetType="{x:Type MenuItem}">
    <Border Name="Border" >
    <Grid>
    <ContentPresenter 
    Margin="6,3,6,3" 
    ContentSource="Header"
    RecognizesAccessKey="True" />
    </Grid>
    </Border>
    <ControlTemplate.Triggers>
    <Trigger Property="IsHighlighted" Value="true">
    <Setter TargetName="Border" Property="Background" Value="White"/>
    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Foreground" Value="Gray"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>

    Regards,
    MMH
    Rate my post if you find it usefull.

  9. #9
    Join Date
    Apr 2009
    Posts
    9

    Re: Menu Item color change in wpf

    Thanks its worked.

  10. #10
    Join Date
    May 2010
    Posts
    2

    Re: Menu Item color change in wpf

    Hello I have the exact same problem but cannot implement the solution because I have stand alone xaml and no App.xaml

    Here is my code

    <Menu Name="MainMenu115" Width="1002" Height="25" Margin=" 0,160,20,50" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF1B9E3E" Foreground="White" >
    <MenuItem Name="MainMenuItem116" Header="New Menu 116" Width="125" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF1B9E3E" Foreground="White" />
    </Menu>

    It displays blue background when menu item is highlighted

  11. #11
    Arjay's Avatar
    Arjay is offline Moderator / MS MVP Power Poster
    Join Date
    Aug 2004
    Posts
    10,958

    Re: Menu Item color change in wpf

    Quote Originally Posted by hs9211 View Post
    Hello I have the exact same problem but cannot implement the solution because I have stand alone xaml and no App.xaml
    You can still use the template technique, just put the code in the resource section of the xaml file (rather than in the app.xaml file).

  12. #12
    Join Date
    May 2010
    Posts
    2

    Re: Menu Item color change in wpf

    Thanks I did that and its working

  13. #13
    Join Date
    Oct 2010
    Posts
    2

    Re: Menu Item color change in wpf

    Hi guys,

    Basically I've got the same question. I applied the suggested fix 'inline' as below:

    Code:
            <Menu Name="menu1" Width="125" BorderThickness="2" 
                  BorderBrush="Gray" FontSize="16" FontStyle="Italic" Background="Transparent">          
                    <MenuItem Header="MENU" Foreground="White" VerticalAlignment="Center" 
                              Margin="-70,0,0,0" Height="24" Padding="6,3" Width="100" 
                              Background="Transparent" Name="Item1">
                        <MenuItem.Style>
                            <Style TargetType="{x:Type MenuItem}">
                                <Style.Triggers>
                                    <Trigger Property="IsHighlighted" Value="True" >
                                        <Setter Property="Background" Value="Yellow" />
                                        <Setter Property="FontStyle" Value="Italic" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </MenuItem.Style>               
                    <MenuItem Header="Component Data">
                        .
                        .
                        .
                        and so on...
    For some reason, putting this style right into the element code doesn't seem to be working. I can go ahead do the full-blown template if need be. Maybe that will be useful later, but I'd certainly like to just be able to just put this small bit of code in and get it working quickly. Will putting the style directly into the element definition like this work? Or is a template referenced via a resource the only way a Trigger is recognized?

  14. #14
    Join Date
    Oct 2010
    Posts
    2

    Re: Menu Item color change in wpf

    Alright so I've given up on trying to inline the stuff. Too bad. That would be convenient to do for just quick experimentation here and there.

    Anyway I've now got everything in the Resource file and its working as expected BUT, I have some Header text in my menuitem element. That text disappears when the highlight trigger does its thing. I want the text to stay. Here are the relevant code snippets:

    Resource file:
    Code:
        <LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="LightGreen" Offset="0.0"/>
                    <GradientStop Color="DarkGreen" Offset="0.25"/>
                    <GradientStop Color="LightGreen" Offset="0.75"/>
                    <GradientStop Color="LightGreen" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
    
        <Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Menu}">
                        <Border 
                            Background="{StaticResource BackgroundBrush}"
                            BorderBrush="DarkGray"
                            BorderThickness="1">
    
                            <StackPanel ClipToBounds="True" Orientation="Horizontal" 
                                        IsItemsHost="True">
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    
        <ControlTemplate 
                x:Key="MenuItemTemplate1" 
                TargetType="{x:Type MenuItem}">
            <Border Name="Border" >
                <Grid>
                    <ContentPresenter 
                        Margin="6,3,6,3" 
                        ContentSource="Header"
                        RecognizesAccessKey="True"/>                
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsHighlighted" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="White"/>
                    <Setter TargetName="Border" Property="Opacity" Value=".1"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="Gray"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ResourceDictionary>
    The main window element:
    Code:
            <Menu Grid.Row="2" HorizontalAlignment="Left" Margin="32.5,37.5,0,50" 
                  Name="menu1" Width="67.5" Style="{StaticResource MenuStyle1}">
                <MenuItem Name="Item1" Template="{StaticResource MenuItemTemplate1}"
                          Width="60" Header="MENU" FontStyle="Italic" Foreground="White">                
                </MenuItem>
            </Menu>
    So nothing complex here. You can see for the 'Header' I've got a value "MENU". This is what disappears when I now hit the highlight trigger. I am applying a slight opaque color. The background of the element does not change (as I would expect it wouldn't), but the Header value goes. I'll keep messing with it and if I track this down, I'll post the solution here. Any insight would be great!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center