XAF Interactive Sample Application

I would like to share with all XAF community sample application, that demonstrates how to add custom DevExpress theme to any XAF Web application and customize application design, make it more flexibility for your needs.

Final project will support DevExpress Mulberry theme, custom default page design and dynamic slide menu.

You can find final project here 

For this project i'm using DevExpress Universal 14.2.4.

Create project

First of all we have to create new project.

Add a couple classes to our solution and run it to see what we have.

Perfect design for most enterprise-level solutions.

First our task will be adding csutom DevExpress theme, that XAF doesn't supports by default.

I have done similar task with Moderno theme, but now i see that DevExpress designed one more good theme - Mulberry. It looks good too as a Moderno, but have less spaces between visual elements, so it more comfortable to work with.

Build theme

For generating theme files we will use ASPxThemeBuilder and ASPxThemeDeployer.

Open ASPxThemeBuilder.
Click "New theme" and choose "Based on" theme (Mulberry) and name for your's.

After generating you can change some visual style if you need to. After that you have to save theme.

Next our main action is generating assembly. Choose "File - Create assembly".

You will see list of themes that can be included. Choose our theme (i called it "XafMullberry") and click OK.

Builder will generate assembly.

You can see it in Location path:

Now we have to generate web-project content files for our builded theme.

For this we have to use ASPxThemeDeployer. Open it.

Choose "File - Import custom theme" and locate our assembly. Load it. It will appear in "themes" list.

Usually i choose only theme that i need to use in my web project.

Set our project location (choose Solution1.Web project), unmark "Only skin files" and click "Copy files".

Some tons of files have been copied to our project.

For now we will go next step, but we have to come back to our deployed theme couple of steps later.

Register theme in project

Ok, now we have custom deployed theme and assembly. So, lets try to use it!

Add assembly to Solution1.Web references.

Go to Global.asax.cs and register our assembly on Application_Start;

Also you have to change theme in cookie:

                               

You have to change web.config also:

That's all we have to do in our project to register theme. Lets try to see what we have now.

Run our application.

  

It looks wrong because there is no required files (css) for this theme. These files can be found in XAF deeper research, so i would't describe now how i got it, may be later.
So, files you need (you can found it in attached archive):

After creating Xaf directory in App_Themes/XafMulberry we got good result:

Customize Default.aspx

Next our steps will be to customize our main page.

Add to sulution Xaf Default Vertical Template Content, as shown on picture:

Register it in Global.asax.cs (Application_Start):

And now you can customize DefaultVerticalTemplateContent.ascx as you want.

Finally, you can add any css or js logic.

So, it depends on your designer and programmer skills.
What i've got demonstrated in this sample:

You can find solution here