C#•16mo 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>

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

26 Replies

Mekasu0124OP•16mo ago

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•16mo ago

Try and play with negative margin or negative padding Like negative numbers

Mekasu0124OP•16mo ago

to get rid of the white space?

Mayor McCheese•16mo ago

Yes Often something like that does the trick I don't know it'll fix your problem

Mekasu0124OP•16mo ago

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•16mo ago

Not sure about that sorry 😦

Mekasu0124OP•16mo ago

no problem 🙂 thank you

arion•16mo ago

Do you mean something like this?

Mekasu0124OP•16mo ago

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•16mo ago

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)

Mekasu0124OP•16mo ago

omg you're a life savor. 2 things. 1. 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 2. What is the link you found this styling at? I have scowered google and couldn't find it

arion•16mo ago

1. I would need some mock code to check that, because 2. 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•16mo ago

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•16mo ago

that looks like it can work 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)

Mekasu0124OP•16mo ago

this worked perfectly!

Mekasu0124OP•16mo ago

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•16mo ago

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

Mekasu0124OP•16mo ago

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

<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 😄 Thank you so much for you guys help 😄 ❤️

arion•16mo ago

Nicee!

Mekasu0124OP•16mo ago

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.PreviewWith supposed to do?

Mekasu0124OP•16mo ago

because I've honestly just surpassed it altogether

Mekasu0124OP•16mo ago

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•16mo ago

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

Mekasu0124OP•16mo ago

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

arion•16mo ago

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> you can remove it

Mekasu0124OP•16mo ago

ok cool. again, thanks for all you guys help ❤️

Gaming

Programming

✅ How to style menu bar??? avalonia