This project is read-only.

Recent list in backstage menu

Aug 7, 2014 at 10:00 PM
First, thanks for this brilliant control. Amazing work by amazing developers :-). Looking forward to future versions.

In my application I want to split the backstage menu into two columns. The left column will contain ordinary menu commands like "New", "Open" etc. In the right I want to show a list of recent files (all the time, not like a sub option). Just like it works in Wordpad in Windows 8 and several other applications. Is this possible with Fluent Ribbon?
Aug 31, 2014 at 1:48 PM
You can.

Just do it like it's done in the test application.
You will notice that when opening the backstage "Test" is selected and shows content on the right side.
You just have to add more buttons like "Save" etc.
Aug 31, 2014 at 5:28 PM
I have looked on the example and for now my application looks something like this:

Image

What annoys me is the "heavy" Recent files button. I want to have the same styling on that button like on the other buttons. Or even better not showing that button at all. I want to have it like it is in WordPad where the recent list is always visible no matter which item in the left is selected.

Image

Another thing that I like with the WordPad approach is that it doesn't use the whole window.

I'm guessing this is not supported and won't be (I have a feeling it's a massive work), but could I get a little bit closer I would be happy :-).
Aug 31, 2014 at 7:21 PM
Well, it's in the library.

Just use ApplicationMenu instead of Backstage. ;-)
Sep 1, 2014 at 6:13 PM
Thanks :-). The more I use FluentRibbon the more impressed I become :-).

Is there any good examples how to use ApplicationMenu? If not I'm willing to make one if I just get some help with some questions :-).

I have added this in the Fluent.Sample.Toolbars example:
<Fluent:Ribbon.Menu>
    <Fluent:ApplicationMenu>

        <Fluent:MenuItem Header="New"
                         Icon="Images\GreenLarge.png" />

        <Fluent:MenuItem Header="Save As"
                         Icon="Images\YellowLarge.png" />

        <Fluent:MenuItem Header="Exit"
                         Icon="Images\RedLarge.png" />

        <Fluent:ApplicationMenu.RightPaneContent>
            <StackPanel HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Orientation="Vertical">

                <Fluent:MenuItem Header="Open file 1"
                                 Icon="Images\Pink.png"
                                 Size="Small" />

                <Fluent:MenuItem Header="Open file 2"
                                 Icon="Images\Blue.png"
                                 Size="Small" />

            </StackPanel>
        </Fluent:ApplicationMenu.RightPaneContent>

    </Fluent:ApplicationMenu>
</Fluent:Ribbon.Menu>
It's pretty good but I wonder:
  • How do I add an separator in the menu (for instance between Save As and Exit).
  • Can I make the items in the right pane content thinner? I want the height to be smaller.
  • If I'm using tab to navigate in the menu I could have several items selected. Can I avoid that?
  • Is it possible to create a sub-menu? For instance I want to have ”Print” in the menu, and then ”Preview” and ”Setup printer” in the sub menu.
I'm apologize for all my questions :-)
Sep 1, 2014 at 8:49 PM
In case you are using the samples from the .zip file, be aware of the fact that they are very outdated and use a very old Fluent version.
Those have to be updated by us in the future, but currently i don't have time to take care of that work.

To answer your questions:
  • Separator: U should be able to just use <Separator />
  • Thinner: You can use whatever controls you like in that pane, using MenuItem seems to be your problem here.
  • Multiple items selected: Could you post a screenshot of that? I currently don't have time to try it myself.
  • Sub-Menu: Just use the Fluent:MenuItem as you would use a regular MenuItem (where you can simply add child MenuItems)
Marked as answer by batzen on 9/20/2014 at 11:05 AM
Sep 2, 2014 at 5:21 PM
Thanks for your reply :-). Here is my updated code (still based on the Fluent.Sample.Toolbars example):
<Fluent:ApplicationMenu>

    <Fluent:MenuItem Header="New"
                     Icon="Images\GreenLarge.png" />

    <Fluent:MenuItem Header="Save As"
                     Icon="Images\YellowLarge.png" />

    <Fluent:MenuItem Header="Print"
                     Icon="Images\YellowLarge.png">

        <Fluent:MenuItem Header="Setup"
                         Icon="Images\YellowLarge.png" />
        
        <Fluent:MenuItem Header="Preview"
                         Icon="Images\YellowLarge.png" />
        
    </Fluent:MenuItem>

    <Separator />

    <Fluent:MenuItem Header="Exit"
                     Icon="Images\RedLarge.png" />

    <Fluent:ApplicationMenu.RightPaneContent>
        <StackPanel HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Orientation="Vertical">

            <Label Content="Recent files" HorizontalAlignment="Center"  />

            <MenuItem Header="Open file 1" />

            <MenuItem Header="Open file 2" />

            <Fluent:MenuItem Header="Open file 3"
                             Icon="Images\Pink.png"
                             Size="Small" />

            <Fluent:MenuItem Header="Open file 4"
                             Icon="Images\Blue.png"
                             Size="Small" />

        </StackPanel>
    </Fluent:ApplicationMenu.RightPaneContent>

</Fluent:ApplicationMenu>

My comments to your answers:
  • Separator doesn't work in the sample project but works as expected if I use the latest source so that's fine.
  • MenuItem is a good choice :-).
  • Sub-Menu works too (it was so obvious so I'm feeling stupid). I have noticed that the text in sub menu items is bold, but maybe that's by design.
  • Here is a screenshot of the multi-selected issue (press tab several times to replicate this). I get the same result even if I use the latest source:
Image

Regarding the sample projects I'm more than willing to upgrade those to the latest version. Just let me know if I could help you in any way :-).
Marked as answer by batzen on 9/20/2014 at 11:05 AM