C#•3y ago

✅ How to style menu bar??? avalonia

I have figured out how to style the menu bar itself, and style the items in the menu bar, however, I cannot figure out how to style the parts that are white. I have also tried to style the pointerover portion of the MenuItem when the user hovers over the menu, but it's not working either. It's supposed to have a charcoal background, blue font no matter what it happening with it.

<!-- Inside Style File -->
<Style Selector="Menu.menu">
  <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Margin" Value="5,0,5,0" />
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.menuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.innerMenuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>

<Style Selector="MenuItem.innerMenuItem:pointerover">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>
<!-- MenuItem Code in main file -->
<Menu Classes="menu" DockPanel.Dock="Top">
  <MenuItem Classes="menuItem" Header="_Help">
    <MenuItem Classes="innerMenuItem" Header="_FAQ" />
    <Separator />
    <MenuItem Classes="innerMenuItem" Header="_Exit" />
  </MenuItem>
</Menu>

<!-- Inside Style File -->
<Style Selector="Menu.menu">
  <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Margin" Value="5,0,5,0" />
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.menuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.innerMenuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>

<Style Selector="MenuItem.innerMenuItem:pointerover">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>
<!-- MenuItem Code in main file -->
<Menu Classes="menu" DockPanel.Dock="Top">
  <MenuItem Classes="menuItem" Header="_Help">
    <MenuItem Classes="innerMenuItem" Header="_FAQ" />
    <Separator />
    <MenuItem Classes="innerMenuItem" Header="_Exit" />
  </MenuItem>
</Menu>

<!-- Inside Style File -->
<Style Selector="Menu.menu">
  <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Margin" Value="5,0,5,0" />
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.menuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.innerMenuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>

<Style Selector="MenuItem.innerMenuItem:pointerover">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>
<!-- MenuItem Code in main file -->
<Menu Classes="menu" DockPanel.Dock="Top">
  <MenuItem Classes="menuItem" Header="_Help">
    <MenuItem Classes="innerMenuItem" Header="_FAQ" />
    <Separator />
    <MenuItem Classes="innerMenuItem" Header="_Exit" />
  </MenuItem>
</Menu>

<!-- Inside Style File -->
<Style Selector="Menu.menu">
  <Setter Property="BorderBrush" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Margin" Value="5,0,5,0" />
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.menuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="MenuItem.innerMenuItem">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>

<Style Selector="MenuItem.innerMenuItem:pointerover">
  <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
  <Setter Property="Background" Value="{DynamicResource ResourceKey=Charcoal}" />
</Style>
<!-- MenuItem Code in main file -->
<Menu Classes="menu" DockPanel.Dock="Top">
  <MenuItem Classes="menuItem" Header="_Help">
    <MenuItem Classes="innerMenuItem" Header="_FAQ" />
    <Separator />
    <MenuItem Classes="innerMenuItem" Header="_Exit" />
  </MenuItem>
</Menu>

I have also tried giving a Classes name to the separator and styling it, but that changed nothing as well. Thanks in advance.

MekOP•8/25/23, 12:01 AM

I'm even trying to style the MenuItem.menuItem:pointerover as well for the main display of the menu when a user hovers over Help, and it's not working either so I'm not sure what I'm doing wrong with trying to style the hover effects, and the pop out menu

Mayor McCheese•8/25/23, 12:57 AM

Try and play with negative margin or negative padding

Mayor McCheese•8/25/23, 12:57 AM

Like negative numbers

MekOP•8/25/23, 12:57 AM

to get rid of the white space?

Mayor McCheese•8/25/23, 12:57 AM

Yes

Mayor McCheese•8/25/23, 12:58 AM

Often something like that does the trick

Mayor McCheese•8/25/23, 12:59 AM

I don't know it'll fix your problem

MekOP•8/25/23, 1:00 AM

doing a margin of -5 on the innerMenuItem got rid of the white space. Thank you for that. So now, what about styling the hover effects? I've tried all sorts of everything I can find on google, stackoverflow, and the docs, but nothing seems to be working. When I hover over the word Help on the menu bar, the text turns black and the background turns a darker shade, but I'd like for the background to be transparent and the foreground to be light blue

Mayor McCheese•8/25/23, 1:07 AM

Not sure about that sorry

MekOP•8/25/23, 1:09 AM

no problem

thank you

MMek doing a margin of -5 on the innerMenuItem got rid of the white space. Thank you ...

arion•8/25/23, 8:48 AM

Do you mean something like this?

MekOP•8/25/23, 8:52 AM

right. As of now, this is how my menu bar reacts. I need it to remain the same color scheme regardless. Charcoal background, lightblue font

arion•8/25/23, 8:55 AM

I don't know if there's an elegant way of doing this.

But here's the xaml for the example:

    <Window.Styles>
        <Style Selector="MenuItem.FunnyClass">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="Purple"/>
        </Style>
        
        <Style Selector="MenuItem.FunnyClass:pointerover /template/ Border#PART_LayoutRoot">
            <Setter Property="Background" Value="LightBlue"/>
        </Style>
        <Style Selector="MenuItem.FunnyClass:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
            <Setter Property="Foreground" Value="Purple"/>
        </Style>
    </Window.Styles>
    
    <Menu HorizontalAlignment="Center" VerticalAlignment="Center">
        <MenuItem Header="Open" Classes="FunnyClass"/>
        <MenuItem Header="View" Classes="FunnyClass"/>
        <MenuItem Header="Tools" Classes="FunnyClass"/>
        <MenuItem Header="Help" Classes="FunnyClass"/>
    </Menu>

    <Window.Styles>
        <Style Selector="MenuItem.FunnyClass">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Foreground" Value="Purple"/>
        </Style>
        
        <Style Selector="MenuItem.FunnyClass:pointerover /template/ Border#PART_LayoutRoot">
            <Setter Property="Background" Value="LightBlue"/>
        </Style>
        <Style Selector="MenuItem.FunnyClass:pointerover /template/ ContentPresenter#PART_HeaderPresenter">
            <Setter Property="Foreground" Value="Purple"/>
        </Style>
    </Window.Styles>
    
    <Menu HorizontalAlignment="Center" VerticalAlignment="Center">
        <MenuItem Header="Open" Classes="FunnyClass"/>
        <MenuItem Header="View" Classes="FunnyClass"/>
        <MenuItem Header="Tools" Classes="FunnyClass"/>
        <MenuItem Header="Help" Classes="FunnyClass"/>
    </Menu>

(The style containing Foreground is for the MenuItem's foreground, and the one with background is for background)

Aarion I don't know if there's an elegant way of doing this[.](https://cdn.discordapp.c...

MekOP•8/25/23, 9:03 AM

omg you're a life savor. 2 things.

How can I style the border of the popup window? Right now it's like a white, but I'd like to make it lightblue as well
What is the link you found this styling at? I have scowered google and couldn't find it

MMek omg you're a life savor. 2 things. 1. How can I style the border of the popup wi...

arion•8/25/23, 9:12 AM

I would need some mock code to check that, because 2.
No link, rather with rider you can usually see attached parts via an Attribute like this
Sometimes they don't include subsequent item tags, for those cases I run some test code and run Avalonia's DevTools (When the window is in the foreground hit F12 and you can step through the tree, then target specific things

SinFluxx•8/25/23, 9:12 AM

I think you can target the popup border with e.g.:

<Style Selector="MenuItem /template/ Popup#PART_Popup Border">
    <Setter Property="BorderThickness" Value="10" />
    <Setter    Property="BorderBrush" Value="Pink" />
</Style>

<Style Selector="MenuItem /template/ Popup#PART_Popup Border">
    <Setter Property="BorderThickness" Value="10" />
    <Setter    Property="BorderBrush" Value="Pink" />
</Style>

arion•8/25/23, 9:12 AM

that looks like it can work

Aarion 1. I would need some mock code to check that, because 2. 2. No link, rather with...

arion•8/25/23, 9:14 AM

Just an addition to this:
The logical tree has less items while the visual tree is much more verbose and shows almost everything, selecting a specific control in the logical tree, then navigating to the visual tree tab will start you off at that object in the tree (saves some time)

SSinFluxx I think you can target the popup border with e.g.: ```cs <Style Selector="MenuI...

MekOP•8/25/23, 9:14 AM

this worked perfectly!

MekOP•8/25/23, 9:16 AM

I don't know if you can notice it or not, but so far everything is great. Just one nit pick part. When I hover over Help, it stays the color scheme, but when I click it for the popup menu, and move my mouse away from the word help, it turns back black....I have zero idea what "part" that is

arion•8/25/23, 9:22 AM

When opening popup it looks to have the following pseudoclasses :selected:selected :open:open

MekOP•8/25/23, 9:24 AM

so would it be MenuItem:selectedMenuItem:selected or MenuItem:selected /template/ ContentPresenter#PART_PopupMenuItem:selected /template/ ContentPresenter#PART_Popup?

MekOP•8/25/23, 9:26 AM

<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
    <Setter Property="Foreground" Value="{DynamicResource ResourceKey=LightBlue}" />
</Style>

I got it with this

MekOP•8/25/23, 9:26 AM

Thank you so much for you guys help

arion•8/25/23, 9:26 AM

Nicee!

MekOP•8/25/23, 9:29 AM

one last question and it's something I've just noticed. In the top of each style file, it has

<Styles xmlns="" xmlns:x="">
  <Design.PreviewWith>
    <Border Padding="20">
    </Border>
  </Design.PreviewWith>
</Styles>

<Styles xmlns="" xmlns:x="">
  <Design.PreviewWith>
    <Border Padding="20">
    </Border>
  </Design.PreviewWith>
</Styles>

what does that Design.PreviewWithDesign.PreviewWith supposed to do?

MekOP•8/25/23, 9:29 AM

because I've honestly just surpassed it altogether

MekOP•8/25/23, 9:30 AM

and as a side note, can I just say this is really starting to feel like a lot of css for a website xD My home page for my application's style file has 173 lines with spaces

arion•8/25/23, 9:31 AM

its for the avalonia previewer to set up a design-time preview (with specific settings like width = x and stuff)

its used as an example of what a specific thing is intended to look like

MekOP•8/25/23, 9:32 AM

so I can remove it from the file altogether? or should I use it?

arion•8/25/23, 9:33 AM

eg. you have a style that adds a rainbow background to a button when its class is "Rainbow" then the code would be like: <Design.PreviewWith><Button Classes="Rainbow"/></Design.PreviewWith>

MMek so I can remove it from the file altogether? or *should* I use it?

arion•8/25/23, 9:33 AM

you can remove it

MekOP•8/25/23, 9:35 AM

ok cool. again, thanks for all you guys help