Several Horizontal.Aligments do not cooperate

digimbyte · 25 Jan 2019, 22:00

I've been building my GUI programattically and I came across this small problem when I started aligning elements to the right

RP1 RP2 and Radio should be on the right hand side of the screen
with the DOMAIN URL stretching

here is my code

public Noesis.DockPanel Header()
    {
        Noesis.DockPanel _panel = new Noesis.DockPanel{};
        _panel.Height = 26;
        _panel.VerticalAlignment = VerticalAlignment.Top;
        _panel.HorizontalAlignment = HorizontalAlignment.Stretch;
        _panel.Background = Brushes.DimGray;


        _panel.Children.Add(new Button{
            Content = "File",
            HorizontalAlignment = HorizontalAlignment.Left,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });
        _panel.Children.Add(new TextBlock
        {
            Text = "DOMAIN URL",
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });
        _panel.Children.Add(new Button
        {
            Content = "RP1",
            HorizontalAlignment = HorizontalAlignment.Right,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });
        _panel.Children.Add(new Button
        {
            Content = "RP2",
            HorizontalAlignment = HorizontalAlignment.Right,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });
        _panel.Children.Add(new Button
        {
            Content = "Radio",
            HorizontalAlignment = HorizontalAlignment.Right,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });
        _panel.Children.Add(new Button
        {
            Content = "Radio",
            HorizontalAlignment = HorizontalAlignment.Right,
            VerticalAlignment = VerticalAlignment.Center,
            Margin = Noesis.Thickness.Parse("6,0,6,0")
        });

        return _panel;

Also, I have had trouble finding what properties I can set for elements,
such as text vs content, width span options (if any), etc
Also, I can't seem to set padding on Stack Panels but I can set margins.

digimbyte · 26 Jan 2019, 04:29

I have found a cool bit of WPF that sets all immediate children margins
"local:MarginSetter.Margin=$value"
I'm not sure if that property exists in NoesisGui but it would be handy to be able to apply that to my components

26 Jan 2019, 13:10

First, you're incorrectly using DockPanel. If you want elements to properly align ("dock") in it you need to assign DockPanel.Dock attached property (from C# it's set as DockPanel.SetDock(control, Dock.Left)). For example see https://docs.microsoft.com/en-us/dotnet ... work-4.7.2 and https://www.wpftutorial.net/DockPanel.html

Second, for the described case I would prefer to use a simple Grid. Just define multiple columns and make most of them to have auto width. The column which requires stretching should use "star" width as described here https://stackoverflow.com/a/9803853

The approach with MarginSetter is a custom extension (custom attached property) which is not available in WPF also - you need to define the class implementing it yourself. It might work in NoesisGUI too but it's unnecessary complexity as you can solve the problem by applying any of the two approaches I've described above.

Regards!

digimbyte · 26 Jan 2019, 22:41

That makes sense, the only drawback is I can't seem to set that Dock on create.
would I be able to flag an element with some sort of ID to then set its dock position post (new button())?
or perhaps navigate the children listed for tags?

if I go with a grid, would I be able to throw more buttons into it without adding more columns?
I'm not 100% sure if a grid could handle dynamic content, thus the dock where I would align
left or right as my only requirement and fill for everything else

Thanks for the help, XAML UI is fairly new to me

27 Jan 2019, 00:35

Yes, you can use a variable:

var button1 = new Button(...);
DockPanel.SetDock(button1, Dock.Left))
_panel.Children.Add(button1);

And with Grid - you can add more column definitions at any time. It's often the way to go - a simple yet powerful layout.

Regards!

28 Jan 2019, 11:48

@ai_enabled Thanks for your contribution here. I think it solves pretty well all the questions.

@digimbyte I would also suggest you take a look at some book like WPF 4.5 Unleashed, it helps a lot to get a global understanding on how WPF is structured and how it works, and would make it easier to write UI for Noesis.

Several Horizontal.Aligments do not cooperate

Several Horizontal.Aligments do not cooperate

Re: Several Horizontal.Aligments do not cooperate

Re: Several Horizontal.Aligments do not cooperate

Re: Several Horizontal.Aligments do not cooperate

Re: Several Horizontal.Aligments do not cooperate

Re: Several Horizontal.Aligments do not cooperate

Who is online