[SDK] XFControls - Advanced UI SDK [UPDATED w/ Sense UI Example!]

Search This thread

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
This is an Advanced UI SDK for developing finger-friendly Application UIs.

The reason for developing this SDK was mainly to learn about programming for Windows Mobile and the Compact Framework 3.5. I also developed this SDK because I could not find good UI controls that gave total display control to the programmer while taking care of all of the Physics, windowing, and frame buffering AND was open source.

Finally, this SDK was originally developed as part of the XDAFacebook application that I am currently developing.

I am releasing this SDK and its source so that people can have a good foundation to build finger-friendly Windows Mobile applications, and so that programmers starting off in the Windows Mobile world won't have to start from scratch when creating useful UI Controls.

Here are some of the features and uses of this SDK.

Features:
  • Fully customizable
  • Easily create custom UI Controls
  • Resolution independent
  • Full physics for rendering smooth scrolling

Uses:
  • Quickly create UI controls
  • Develop full UI SDKs
  • Learn basic UI programming for .net CF 3.5

I ask that if you use these controls, please provide feedback so that everyone can benefit!


Thank you and I hope you find these controls useful!
 

Attachments

  • ScreenShot16.jpg
    ScreenShot16.jpg
    48 KB · Views: 2,296
  • ScreenShot5.jpg
    ScreenShot5.jpg
    42 KB · Views: 2,147
  • ScreenShot1.jpg
    ScreenShot1.jpg
    38.1 KB · Views: 1,811
  • ScreenShot2.jpg
    ScreenShot2.jpg
    53 KB · Views: 1,456
  • ScreenShot4.jpg
    ScreenShot4.jpg
    28.9 KB · Views: 1,359
Last edited:

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
SDK Documentation

Even though the controls are easy to implement, they can seem intimidating at first. Here is an over-view of the core pieces to the SDK:

The IXFItem Interface:

Here are Properties of the interface
PHP:
XFPanelBase Parent { get; set; } // The item's List container
XFItemState State { get; set; } /* An Enum to describe the current item's state
  This could include things like [B]Selected[/B] or [B]Normal[/B]*/
Bitmap Buffer { get; set; }  // This is the item's cache buffer.  Allows for speedy rendering
XFItemStyle Style { get; set; }  // CSS like style object.  Allows for easy customization
XFItemType ItemType { get; set; }  /* Enum to label the type of the current object.  
For example, [B]Clickable[/B] or [B]Display[/B] meaning the item won't change*/

The following are the methods that need to be implemented
PHP:
int GetHeight();  /* This returns the height of the item. This value is usually calulated
but in some instances is static.  The value should be cached because this method
is called several times during the rendering process.*/
void ResetHeight();  // What ever needs to be done to reset the height cache
void ItemPaint(Graphics g, int x, int y);  // Where the magic happens.  More on this later
XFItemClickResult GetClickResult();  // An enum is return with what the action of clicking this item was.


The main part of the interface is the ItemPaint method. This method is called from the XFPanelList and passes a Graphics object created from the Buffer Bitmap of the Item. In this method, you do all of your graphics logic, drawing it with the supplied graphics object. The x and y are any offset numbers that should influence when the objects are based. Most of the time, these numbers will be 0, 0.

Because the programmer has total control over how the item is rendered, special care must be used when creating the items, to draw all the features with respect to the XFItemStyle object. This object usually is created in CTOR. An example of the XFItemStyle object being created in one of the SenseUI XFItem's CTORs:

PHP:
        public SenseItem()
        {
            ItemType = XFItemType.Clickable;
            Style = new XFItemStyle()
            {
                BoarderBottomColor = Color.FromArgb(189, 182, 189),
                DashStyleBottom = System.Drawing.Drawing2D.DashStyle.Dash,
                TextColor = Color.Black,
                TextFont = new Font(FontFamily.GenericSansSerif, 8, FontStyle.Regular),
                SelectedTextFont = new Font(FontFamily.GenericSansSerif, 8, FontStyle.Regular),
                SecondaryTextFont = new Font(FontFamily.GenericSansSerif, 7, FontStyle.Regular),
                SelectedSecondaryTextFont = new Font(FontFamily.GenericSansSerif, 7, FontStyle.Regular),
                SecondaryTextColor = Color.FromArgb(57, 52, 57),
                SelectedTextColor = Color.White,
                SelectedBackgroundColor = Color.FromArgb(43, 36, 43),
                SelectedSecondaryTextColor = Color.FromArgb(182, 178, 182),
                Padding = 11,
                PaddingBottom = 12,
                PaddingLeft = 10,
                PaddingRight = 16
            };
        }

You will also notice that the ItemType is also set here.
How you use the Style is a little more involved. In the ItemPaint, the programmer should base all of the features off of what is in the Style object. Here is an example of how the above Style object was used in the ItemPaint method:

PHP:
        public void ItemPaint(Graphics g, int x, int y)
        {
            int width = Parent == null ? Screen.PrimaryScreen.WorkingArea.Width : Parent.Width;
            XFControlUtils.DrawBoarders(Style, g, 0, 0, width, GetHeight());

            int currX = Style.PaddingLeft;
            int currY = Style.PaddingTop;
            int mHeight = 0;
            int sHeight = 0;

            if (Icon != null)
                currX += _iconSize + Style.PaddingLeft;

            SizeF mText = new SizeF();
            if (!string.IsNullOrEmpty(MainText))
            {
                mText = XFControlUtils.GetEllipsisStringMeasure(width - currX - Style.PaddingRight, MainText, Style.TextFont);
                MainText = XFControlUtils.EllipsisWord(width - currX - Style.PaddingRight, MainText, Style.TextFont);
            }

            SizeF sText = new SizeF();
            if (!string.IsNullOrEmpty(SecondaryText))
            {
                sText = XFControlUtils.GetEllipsisStringMeasure(width - currX - Style.PaddingRight, SecondaryText, Style.SecondaryTextFont);
                SecondaryText = XFControlUtils.EllipsisWord(width - currX - Style.PaddingRight, SecondaryText, Style.SecondaryTextFont);
            }

            mHeight = (GetHeight() / 2) - ((int)mText.Height / 2);

            if (!string.IsNullOrEmpty(SecondaryText))
            {
                mHeight = (GetHeight() / 2) - _textSpace - (int)mText.Height;
                sHeight = (GetHeight() / 2) + _textSpace;
            }

            if (State == XFItemState.Selected)
            {
                XFControlUtils.DrawBackgroundSelected(Style, g, x, y, width, GetHeight());

                if (!string.IsNullOrEmpty(MainText))
                    using (SolidBrush b = new SolidBrush(Style.SelectedTextColor))
                        g.DrawString(MainText, Style.SelectedTextFont, b, currX, mHeight);
                if (!string.IsNullOrEmpty(SecondaryText))
                    using (SolidBrush b = new SolidBrush(Style.SelectedSecondaryTextColor))
                        g.DrawString(SecondaryText, Style.SelectedSecondaryTextFont, b, currX, sHeight);
            }
            else
            {
                if (!string.IsNullOrEmpty(MainText))
                    using (SolidBrush b = new SolidBrush(Style.TextColor))
                        g.DrawString(MainText, Style.TextFont, b, currX, mHeight);
                if (!string.IsNullOrEmpty(SecondaryText))
                    using (SolidBrush b = new SolidBrush(Style.SecondaryTextColor))
                        g.DrawString(SecondaryText, Style.SecondaryTextFont, b, currX, sHeight);
            }

            if (Icon != null)
                XFControlUtils.DrawAlphaFirstPix(g, Icon, Style.PaddingLeft, Style.PaddingTop);
        }


That is as complex as it gets. Other than doing normal Event Handling for ClickReturns, this is all that is required to create beautiful UI Controls for your application.

I hope that this helps! Feel free to PM me or post a reply if you need further clarification.
 
Last edited:

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
Class List

Form Controls:
  • XFPanelContainer - The main control that interacts with the Form.

XFPanels:
  • XFPanelBase - Basic building block. Handles most of the generic functionality
  • XFPanelList - Can add IXFItem items.
  • XFPanelHeader - The top header bar for an XFPanelContainer

XFItems
  • IXFItem - Interface that all XFItems inherate
  • XFItemSimpleText - Simple item that displays text
  • XFItemBack - Special item that allows a panel to slide back
  • XFItemLoading - Item that allows for work to be down in the background.

XFControlUtils: Library of static, useful utilities for this SDK
  • DrawAlpha - Draws an image with a supplied Graphics object with a specific level of opacity
  • DrawAlphaFirstPix - Draws an image and renders all pixels that are the same color as pixel (1,1) are 100% transparent
  • DrawJustifiedString - draws a justified string
  • GetEllipsisStringMeasure - Takes a string and if it is more than the supplied width, clips the string and adds a trailing "..." at the end
  • EllipsisWord - same as the GetEllipsisStringMeasure, except it ellipsis at the words and not at the char level.
  • GetSizedString - Takes a string and adds "\n" so that the string wraps according to the supplied width
  • Many Others!
 
Last edited:

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
Sense UI Example

Here is a working example. I made this Sense UI example in about 3 hours 15 hours. It isn't complete but gives a good example of how to/why use this SDK. There are 3 screenshots of what this demo looks like.

I'll explain some of the pieces of code when I get some time later today.


The other great example of how to use this SDK is the XFAFacebook Application.
The source for this project is located @ http://code.google.com/p/xda-winmo-facebook/source/browse/#svn/trunk/XFSenseUI
There are a few screenshots of the XDAFacebook application included.


Finally, a quick start tutorial.

  1. Start a new Smart Device project.
  2. Add a reference to the XFControls.dll
  3. Place the following lines of code in the Form1 constructor (after the InitializeComponent();)

Code:
            XFPanelContainer container = new XFPanelContainer();
            container.Dock = DockStyle.Fill;
            Controls.Add(container);

            XFPanelList list = new XFPanelList();
            container.SetMainPanel(list);

            list.ShowScrollbar(true);

            for (int i = 0; i < 50; i++)
            {
                list.Add("This is item " + i);
            }

Run the project and you will get an output like the "SimpleText.png"

It's that easy!

UPDATE: I've added the XFSense to the Google Code page and have made some pretty extensive updates to it. I've added a few controls including sliders, toggles, checkboxes and radio buttons. It still isn't complete but I will be working to make it a full fledge Sense SDK.

Stay tuned!
 

Attachments

  • ScreenShot6.jpg
    ScreenShot6.jpg
    21.1 KB · Views: 501
  • ScreenShot7.jpg
    ScreenShot7.jpg
    39.7 KB · Views: 512
  • ScreenShot10.jpg
    ScreenShot10.jpg
    41.5 KB · Views: 497
  • ScreenShot12.jpg
    ScreenShot12.jpg
    15.3 KB · Views: 423
  • ScreenShot14.jpg
    ScreenShot14.jpg
    41.5 KB · Views: 520
  • ScreenShot15.jpg
    ScreenShot15.jpg
    44.4 KB · Views: 489
  • SimpleText.jpg
    SimpleText.jpg
    48 KB · Views: 394
Last edited:

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
When major updates occur, the DLLs will be posted here. The best thing to do is pull the source from the Google Code page and use that.

This will guarantee the freshes code will be used for your projects

Instructions:
  • Download and unzip the latest XFControls.zip from below.
  • Add the .dll as a reference.
  • Program!

The source can be found at: http://code.google.com/p/xda-winmo-facebook/source/browse/#svn/trunk/XDAFacebook/XFControls

List of downloads:
  • 10/6/10 - Updated for speed and better scrolling! - XFControls 0.2.zip
  • 9/1/10 - Initial upload - XFControls 0.1.zip
 
Last edited:

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
Only 3 downloads?! Hmmm.... I figured more people would be interested in a finger-friendly and open source UI SDK...

Is there something wrong with my posts? Are they too confusing?
Let me know what I can do to help! This has taken me a good deal of time to write and I would hope that it would be of use to someone else...
 

kliptik

Senior Member
Apr 22, 2009
268
18
Austin, TX
Only 3 downloads?! Hmmm.... I figured more people would be interested in a finger-friendly and open source UI SDK...

Is there something wrong with my posts? Are they too confusing?
Let me know what I can do to help! This has taken me a good deal of time to write and I would hope that it would be of use to someone else...

Just DL'd a copy. I'm super swamped at the moment trying to get the next release of KD-Font out, but I'll try and check this out when I get a chance.

Thank you for your contribution!
 

meltwater

Inactive Recognized Developer
Jan 28, 2009
2,070
325
I will definitely give this a test run at some point. Good work!
 

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
you have to add you own graphics to this sdk?


yes, this is a UI SDK. it is used to create user controls. The core code handles all the caching and physics, but the programmer must create the actual controls. including the graphics. look at the sense UI example to see how you can implement your own custom UI controls. like i said in the post, it only took about 3 hours to create those controls. most of which was spent creating graphics.
 

janneman22

Senior Member
Jan 21, 2009
444
2
28
Sommelsdijk
yes, this is a UI SDK. it is used to create user controls. The core code handles all the caching and physics, but the programmer must create the actual controls. including the graphics. look at the sense UI example to see how you can implement your own custom UI controls. like i said in the post, it only took about 3 hours to create those controls. most of which was spent creating graphics.

oh right. but does it place controls in the toolbox, or have you to create the controls hard coded?

i could help you to make some grapics packages for this sdk:rolleyes:
 

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
Ok, I've updated the binaries to be the latest and greatest. The scrolling is super smooth and things are starting to look pretty good!

I also will be updating the XFSense and I'll probably be extending it a little more because I plan on bringing it into the XDA Facebook app.

As always, let me know what you think!

EDIT: Oh, and to answer the question about adding objects to the toolbox, I have not added the OCX files (or whatever they are) so that they can be added to the tool box. But, after you've added the container and the panels, everything is logic after that, so adding the items to the toolbox really doesn't benefit too much.

As far as graphics, I would love help with graphics! Send me a PM and we'll talk!
 
Last edited:

JarekG

Senior Member
Feb 16, 2008
135
10
Here is a working example. I made this Sense UI example in about 3 hours. It isn't complete but gives a good example of how to/why use this SDK. There are 3 screenshots of what this demo looks like.

I'll explain some of the pieces of code when I get some time later today.


The other great example of how to use this SDK is the XFAFacebook Application.
The source for this project is located @ http://code.google.com/p/xda-winmo-facebook/source/browse/
There are a few screenshots of the XDAFacebook application included.


Finally, a quick start tutorial.

  1. Start a new Smart Device project.
  2. Add a reference to the XFControls.dll
  3. Place the following lines of code in the Form1 constructor (after the InitializeComponent();)

Code:
            XFPanelContainer container = new XFPanelContainer();
            container.Dock = DockStyle.Fill;
            Controls.Add(container);

            XFPanelList list = new XFPanelList();
            container.SetMainPanel(list);

            list.ShowScrollbar(true);

            for (int i = 0; i < 50; i++)
            {
                list.Add("This is item " + i);
            }

Run the project and you will get an output like the "SimpleText.png"

It's that easy!


Very nice control. I downloaded the sample (had problem with missing XFControl project but downloaded it from code.google).

Have a couple questions, how would i go about adding image to a child panel?

What I'm trying to so is have about 75 items on the main screen and each item will have sub-panel, when clicking on sub-panel I need to have label x2 and image.

Also when compiling the project I get error:
"Error 1 'XFControls.XFPanels.XFPanelHeader' does not contain a definition for 'BackgroundImage' and no extension method 'BackgroundImage' accepting a first argument of type 'XFControls.XFPanels.XFPanelHeader' could be found (are you missing a using directive or an assembly reference?) C:\downloads\C#\XFSenseUI\XFSenseUIDemo\Form1.cs 39 24 XFSenseUIDemo"
 

joe_coolish

Retired Recognized Developer
Mar 26, 2010
755
234
American Fork
Alright, I'll post an example if I get some time in a bit. But as for the error, it is because the Core XFControls has been modified since the last time I updated this thread. You can download the freshes code from the google code page or use the attached DLL. I'd suggest the Google Code page, since it gets updated more frequently. But then you get all the XDAFacebook with it, so it can also be negative.

Basically to add an image to an XFItem to be added to the XFPanelList, you can either create your own item by inheriting from the IXFItem and doing all the image manipulation in the ItemDraw() method.

For an example of how to do that, look at the XFItemImageDisplay item in the XFControls.XFPanels.XFPanelItems namespace.

If you need something specific, let me know and I'll see if I can whip up an example :)
 

Attachments

  • XFCore.zip
    187.6 KB · Views: 82

Top Liked Posts

  • There are no posts matching your filters.
  • 3
    This is an Advanced UI SDK for developing finger-friendly Application UIs.

    The reason for developing this SDK was mainly to learn about programming for Windows Mobile and the Compact Framework 3.5. I also developed this SDK because I could not find good UI controls that gave total display control to the programmer while taking care of all of the Physics, windowing, and frame buffering AND was open source.

    Finally, this SDK was originally developed as part of the XDAFacebook application that I am currently developing.

    I am releasing this SDK and its source so that people can have a good foundation to build finger-friendly Windows Mobile applications, and so that programmers starting off in the Windows Mobile world won't have to start from scratch when creating useful UI Controls.

    Here are some of the features and uses of this SDK.

    Features:
    • Fully customizable
    • Easily create custom UI Controls
    • Resolution independent
    • Full physics for rendering smooth scrolling

    Uses:
    • Quickly create UI controls
    • Develop full UI SDKs
    • Learn basic UI programming for .net CF 3.5

    I ask that if you use these controls, please provide feedback so that everyone can benefit!


    Thank you and I hope you find these controls useful!
    1
    Thanks for sharing Joe,

    this SDK could indeed get handy in the future for a project I have.

    Sweet! The SDK in this thread is pretty old. PM me for a newer one if you'd like!