3

I'm pretty noob with UWP stuff. I'm trying to create dynamic hamburger menu. I was able to create PrimaryButtons element, and binding it in XAML worked as espected:

var loginButton = new HamburgerButtonInfo();
loginButton.ClearHistory = true;
loginButton.PageParameter = "";
loginButton.PageType = typeof(Views.Login);
var stackPanel = new StackPanel { Orientation = Orientation.Horizontal };
stackPanel.Children.Add(new SymbolIcon { Symbol = Symbol.Contact, Width = 48, Height = 48 });
stackPanel.Children.Add(new TextBlock { Text = "Login", VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0) });
loginButton.Content = stackPanel;

But I'd like to have a cleaner solution, so I tried to extend HamburgerButtonInfo class:

class MenuItem : HamburgerButtonInfo
{
    private Symbol symbol;
    private String text;
    StackPanel stackpanel = new StackPanel { Orientation = Orientation.Horizontal };
    TextBox textbox = new TextBox { VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(12, 0, 0, 0) };
    SymbolIcon symbolicon = new SymbolIcon { Width = 48, Height = 48 };

    public MenuItem():base()
    {
        StackPanel.Children.Add(symbolicon);
        StackPanel.Children.Add(textbox);
        this.Content = StackPanel;
    }

    public String Text
    {
        get { return text; }
        set {
            textbox.Text = value;
            Set(ref text, value);
        }
    }

    public StackPanel StackPanel
    {
        get { return stackpanel; }
    }

    public Symbol Symbol
    {
        get { return symbol; }
        set {
            symbolicon.Symbol = value;
            Set(ref symbol, value);
        }
    }
}

Putting it all together, I expected to get the same result:

PrimaryButtons.Add(loginButton);
PrimaryButtons.Add(new MenuItem() { PageType=typeof(Views.Login), PageParameter="", ClearHistory=true, Text="Login", Symbol=Symbol.Contact });

But here's the result

enter image description here

Am I missing something? Is that the right approach for this scenario?

Jerry Nixon
  • 31,313
  • 14
  • 117
  • 233
thepasto
  • 37
  • 2
  • 8

1 Answers1

4

Can it be done? Absolutely.

var stackPanel = new StackPanel
{
    Orientation = Orientation.Horizontal
};
stackPanel.Children.Add(new SymbolIcon
{
    Width = 48,
    Height = 48,
    Symbol = Symbol.UnSyncFolder
});
stackPanel.Children.Add(new TextBlock
{
    Margin = new Thickness(12, 0, 0, 0),
    VerticalAlignment = VerticalAlignment.Center,
    Text = "UnSync Folder"
});
var button = new HamburgerButtonInfo
{
    Content = stackPanel,
    ButtonType = HamburgerButtonInfo.ButtonTypes.Toggle,
    ClearHistory = false,
    PageType = typeof(Views.DetailPage)
};
MyHamburgerMenu.PrimaryButtons.Add(button);

Looks like this (I tried it in the Search sample).

enter image description here

It's more verbose because the XAML syntax is so compact, but you can do it in code-behind if you want to. You might just want to change visibility of an existing button if that is an option.

Best of luck!

Jerry Nixon
  • 31,313
  • 14
  • 117
  • 233
  • Thanks for your help! As you can see in the first code snippet, i already had luck to add a button writing some code. My target now is add the same button extending HaburegerButtonInfo class, adding the missing stackpanel. – thepasto Feb 06 '16 at 19:03
  • The content property of a button can hold anything you like. What you are trying to create is not currently built into Template10. You are sort of making it work as-is. You should go to GitHub and request a new ButtonTypes.Content be added to the HamButtonInfo.CuttonType. – Jerry Nixon Feb 09 '16 at 00:55