Support for NativeMenu

[JonCanning]

I'd like to be able to set the NativeMenu like this:

AvaloniaUI/Avalonia#3541 (comment)

[JaggerJo]

Hey @JonCanning ,

thanks for the patience. There is currently no DSL for Native Menus. BUT, it's simple to use them with plain F#. Here is a small sample extending the CounterApp with a native menu!

If you haven't done this already set the Application.Name Property.

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

type MainWindow() as this =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Height <- 400.0
        base.Width <- 400.0    

        // 🚩create menu and menu items
        let incrementItem = NativeMenuItem "Increment"
        let decrementItem = NativeMenuItem "Decrement"
        
        let editCounterItem = NativeMenuItem "Edit Counter"
        let editCounterMenu =  NativeMenu()
        editCounterItem.Menu <- editCounterMenu
        editCounterMenu.Add incrementItem
        editCounterMenu.Add decrementItem
        
        let nativeMenu = NativeMenu()
        nativeMenu.Add editCounterItem
        
        // 🚩set menu
        NativeMenu.SetMenu(this, nativeMenu)
        
        // 🚩hook menu actions in Elmish
        let menuSub (_state: Counter.State) =
            let sub (dispatch: Counter.Msg -> unit) =
                incrementItem.Clicked.Add (fun _ -> dispatch Counter.Msg.Increment)
                decrementItem.Clicked.Add (fun _ -> dispatch Counter.Msg.Decrement)
                ()
                        
            Cmd.ofSub sub
                    
        Elmish.Program.mkSimple (fun () -> Counter.init) Counter.update Counter.view
        |> Program.withHost this
        // 🚩 use menu subscription
        |> Program.withSubscription menuSub
        |> Program.withConsoleTrace
        |> Program.run

hope this helps 😉

[wuzlai]

```fsharp
type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

type MainWindow() as this =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Height <- 400.0
        base.Width <- 400.0    

        // 🚩create menu and menu items
        let incrementItem = NativeMenuItem "Increment"
        let decrementItem = NativeMenuItem "Decrement"
        
        let editCounterItem = NativeMenuItem "Edit Counter"
        let editCounterMenu =  NativeMenu()
        editCounterItem.Menu <- editCounterMenu
        editCounterMenu.Add incrementItem
        editCounterMenu.Add decrementItem
        
        let nativeMenu = NativeMenu()
        nativeMenu.Add editCounterItem
        
        // 🚩set menu
        NativeMenu.SetMenu(this, nativeMenu)
        
        // 🚩hook menu actions in Elmish
        let menuSub (_state: Counter.State) =
            let sub (dispatch: Counter.Msg -> unit) =
                incrementItem.Clicked.Add (fun _ -> dispatch Counter.Msg.Increment)
                decrementItem.Clicked.Add (fun _ -> dispatch Counter.Msg.Decrement)
                ()
                        
            Cmd.ofSub sub
                    
        Elmish.Program.mkSimple (fun () -> Counter.init) Counter.update Counter.view
        |> Program.withHost this
        // 🚩 use menu subscription
        |> Program.withSubscription menuSub
        |> Program.withConsoleTrace
        |> Program.run

Hi，I aslo want to modify the menu name.but i do not know your code. could you tell me how to operate it ??

[JaggerJo]

Hi，I aslo want to modify the menu name.but i do not know your code. could you tell me how to operate it ??

What exactly do you mean by menu name ?

[FoggyFinder]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

[JaggerJo]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

Ahh, I see. Thats actually in my sample:

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

[wuzlai]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

Ahh, I see. Thats actually in my sample:

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

Well,thanks,but my problem are three,1st is how to modify the app menu header on osx,just like the picture you see.
2rd is how to replace all drop-down box options.3th is Which file should I write the code you provided in? i guess you can get my idea.

[wuzlai]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

Ahh, I see. Thats actually in my sample:

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

thank you ,Paste the picture for me

[wuzlai]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

Ahh, I see. Thats actually in my sample:

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

Well,thanks,but my problem are three,1st is how to modify the app menu header on osx,just like the picture you see.
2rd is how to replace all drop-down box options.3th is Which file should I write the code you provided in? i guess you can get my idea.

I got a tip from gitter.Now,the first problem is ok, can you tell me the rest problems.
i attch the first answer.
change that by setting the application name...in App.xaml

[wuzlai]

What exactly do you mean by menu name ?

Title:

Image is taken from gitter

Ahh, I see. Thats actually in my sample:

type App() =
    
    inherit Application()

    override this.Initialize() =
        this.Styles.Load "resm:Avalonia.Themes.Default.DefaultTheme.xaml?assembly=Avalonia.Themes.Default"
        this.Styles.Load "resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default"

        // 🚩name visible in native menu
        this.Name <- "Counter App"

en .i use another way to solve it,i attach the code.
only add code in app.xml can replace the menu, thank you i have no problems