More controls

Feb 3, 2011 at 3:12 PM

This is great!

Is there a chance for additional controls such as dropdown menus and date pickers?



Feb 4, 2011 at 12:42 PM


Yes, Fleux will include more controls, but they are in a long prioritized pending list, so probably they won't be available as soon as you expect.

However, if you need a custom control right now, you can try developing it and if you like the results you can also contribute with it. Develop a custom control in Fleux is relatively easy. Why it doesn't have more controls already? Because my priority is to make it work much faster on slower devices, so it can be widely adopted. Once this infrastructure improvements are done, I can continue with the other tasks.

Even though the samples code are easy to follow and that facilitates the dev a lot, I know the documentation is inexistent as this point, and that would be a huge issue developing custom controls for Fleux, so I may add a sort of tutorial or screencast showing how can you build a Custom Control for Fleux. A date time picker is a very good candidate for that, but probably a simpler control like the missing toggle switch or the analog check box would be better just for the sake of simplicity.

About dropdown menus, can you please elaborate? Are you asking for a context menu a-la WP7? 

The trickiest missing control in Fleux is the TextBox, I have some ideas about how to implement it in a way that fits nicely in the whole UI approach, probably mimicking the WP7 textbox behavior.

Summarizing, the current Fleux code base is a good and solid starting point for your project UI. You can extend it and customize it as you need. But there still work in progress, and it's currently being optimized and some new custom controls will be included.


Feb 4, 2011 at 1:23 PM

Thanks for your reply. I actually have no much experience in controls development. I guess a TextBox would derive from the TextElement class?

I was working on a MessageBox class, this code works however I had to add an additional bool parameter to the FleuxControlPage so I can set a form with FormBorderStyle.None

This is the code in case anyone interested, suggestions are welcome:

class msgbox
        FleuxControlPage box;

        public msgbox()
            box = new FleuxControlPage(true, true);
            box.TheForm.Width = 480;

        public DialogResult Show(string message, string caption, int type)
            int top = 14;

            Bitmap bmp = new Bitmap(480, 300);
            Graphics gr = Graphics.FromImage(bmp);
            int H = (int)gr.MeasureString(message, new Font(MetroTheme.PhoneFontFamilySemiLight, MetroTheme.PhoneFontSizeNormal, FontStyle.Regular)).Height;

            H += top + (caption != "" ? 100 : 0) + 44 + 20 + 100;
            box.TheForm.Height = H;
            bmp = new Bitmap(480, H);
            gr = Graphics.FromImage(bmp);
            gr.Clear(Color.FromArgb(31, 31, 31));

            gr.DrawRectangle(new Pen(Color.White, 3), new Rectangle(22, H - 44 - 20, 200, 48));
            gr.DrawRectangle(new Pen(Color.White, 3), new Rectangle(258, H - 44 - 20, 200, 48));
            box.Control.AddElement(new ImageElement(bmp));

            if (caption != "")
                box.Control.AddElement(new TextElement(caption)
                    Style = new TextStyle(MetroTheme.PhoneFontFamilySemiBold, MetroTheme.PhoneFontSizeMedium, Color.White),
                    Location = new Point(14, top),
                top += 100;

            box.Control.AddElement(new TextElement(message)
                Size = new Size(470, 100),
                Location = new Point(14, top),
                AutoSizeMode = TextElement.AutoSizeModeOptions.WrapText

            return box.TheForm.ShowDialog();

        void close()
            box.TheForm.DialogResult = DialogResult.OK;

Would you give an initial hint on how to start with a custom control? I'm interested in working on some... especially textbox, checkbox, datepicker and dropdown list (same as the classic WM combobox)



Feb 4, 2011 at 6:45 PM

Hi again,

Sure, I definitely want to help getting you started with custom control development for Fleux.

First of all, what you want to develop is not really a custom control, the right term in Fleux is a custom UI element. I think you already have the following background, but this would be useful for other readers.

Fleux has only one custom control called FleuxControl, and it's responsible for adapting the whole WinForms world into a Fleux world. As you probably have already seen, a Fleux app is composed by FleuxPages, which are logical representations of a classic WinForms form with a full sized child FleuxControl inside.

Now, we can place UI Elements on a FleuxControl such as a PanoramaElement, a TextElement, ImageElement, etc in an analog way to how we place controls in a form. All those UI Elements inherit from an abstract base class called Fleux.UIElements.UIElement.

Everything is based on that class. Some UIElement concrete classes can contain other child UI elements. This is easy to see in elements like a list, pivot or the panorama.

You can implement custom UIElements creating concrete classes that inherits from UIElement. The complexity will depend on the "control" logic.

The key is what kind of interaction do you need. For drawing your element you need to override the void Draw(IDrawingGraphics drawingGraphics) method. A very simple implementation is done for the ImageElement, or you can also take a look at the DelegateUIElement which can receive an Action<IDrawingGraphics> to define what do you want to draw when the control is rendered. You can also override gesture handling methods, like bool Flick(Point from, Point to, int millisecs, Point startPoint) to react accodingly, returning true if the gesture has been handled or false if there is somebody else who should care about it.

You also have a Canvas, which has the minimum code to handle child elements. A ScrollViewer that helps to scroll an element that doesn't fit on the screen. A Grid, that stills in development, but probably it would make some of your implementations tons easier.

I think the checkbox is a very good first step. It's similar to the TextElement but it should keep the state and draw the checkbox itself.

About drawing the content, you should use the drawing API provided by IDrawingGraphics. It's similar to using System.Drawing.Graphics, but easier. It has a fluent API that let's you do something like:

gr.Style(MetroTheme.PhoneTextSmallStyle).DrawText(text).MoveTo(0, gr.Bottom + 10).DrawText("Something else");


gr.Color(Color.White).DrawRectangle(0, 0, 10, 10).FillRectangle(2, 2, 8, 8);

For the drawing scale, you should think on a WVGA device, and it will be scaled accordingly when running on other devices.

If you need to add any kind of animation to your UI Elements, just let me know and can give you some pointers.



Feb 6, 2011 at 12:41 AM

Great! will start making a checkbox and a textbox. And will ask if any rock on the road.

Something I haven't found is a way to hide an element, such as a Hide() method or Visible property. Can elements be hidden and shown without having to redraw the whole page?


Feb 10, 2011 at 12:59 PM

Just realized you want to start with a Textbox. That's probably the most challenging one.

Why? Because a textbox has so many complex behaviors to implement, that the best approach so far is to reuse the existent WinForms textbox. That way you can get focus managing, selection, clipboard, masking, password mode, etc. almost for free.

That said, this approach is not really easy. We already are in a single custom control and we will need to provide a seamless transition between Fleux and the classic textbox. There are two big challenges to face:

1. We don't want all the flaky rendering issues caused by placing WinForm controls over WinForms Controls. Or at least we want to minimize it.

2. The experience of using the textbox within a Fleux UI should be natural and smooth.

Coloring, removing textbox borders, drawing fake textboxes just unti lthe user actually tries to interact with it, probably keeping only one real instance of a textbox that can be placed and show only when needed are some of my suggestions for implementing this.

Did you have the chance to look at how the WP7 textbox behaves? I would love to provide something very similar.

Let me know if you need any other pointers.