Thursday, June 18, 2015

Add a custom DevExpress theme with its goofy theme builder.

Here are the steps I took:

  1. I set up a fresh new VMware VM and I put Visual Studio 2013 on it.
     
  2. I downloaded DevExpress from here and installed it. This put a DEVEXPRESS menu within Visual Studio.
     
  3. I spun up a new DevExpress friendly ASP.NET MVC project (with C#) with:
    DEVEXPRESS > All Platforms > New Project...
     
  4. The default app that gets made which ties into that corny Northwind database has a GridView in it in a .cshtml partial which looks like this:
    @Html.DevExpress().GridView(
    settings =>
    {
       settings.Name = "GridView";
       settings.CallbackRouteValues = new { Controller = "Home",
             Action = "GridViewPartialView" };
       settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
       settings.SettingsPager.PageSize = 32;
       settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
       settings.Settings.VerticalScrollableHeight = 350;
       settings.ControlStyle.Paddings.Padding =
             System.Web.UI.WebControls.Unit.Pixel(0);
       settings.ControlStyle.Border.BorderWidth =
             System.Web.UI.WebControls.Unit.Pixel(0);
       settings.ControlStyle.BorderBottom.BorderWidth =
             System.Web.UI.WebControls.Unit.Pixel(1);
       settings.Columns.Add("ContactName");
       settings.Columns.Add("CompanyName");
       settings.Columns.Add("ContactTitle");
       settings.Columns.Add("City");
       settings.Columns.Add("Phone");
    }).Bind(Model).GetHtml()

     
  5. I then opened the theme builder from Visual Studio (even though it is a standalone application independent from Visual Studio and I may open it independently) with:
    DEVEXPRESS > ASP.NET Controls v15.1.3 > Run ASP.NET Theme Builder...
     
  6. I tweaked an existing theme into my own (you'll see CSS to edit) and saved it, giving it a name, and then I built an assembly with a different name yet, which got saved out to a .dll, with:
    DEVEXPRESS > All Platforms > New Project...
     
  7. Back in Visual Studio, I added a reference to the .dll.
     
  8. I founf the DevExpress blob of the Web.config file which looked like this:
    <devExpress>
       <themes enableThemesAssembly="true" styleSheetTheme="" theme="DevEx"
             customThemeAssemblies="" />
       <compression enableHtmlCompression="false"
             enableCallbackCompression="true" enableResourceCompression="true"
             enableResourceMerging="true" />
       <settings doctypeMode="Html5" rightToLeft="false"
             embedRequiredClientLibraries="true" ieCompatibilityVersion="edge" />
       <errors callbackErrorRedirectUrl="" />
    </devExpress>

     
  9. The settings for theme and customThemeAssemblies both needed to change. I filled in the two separate names I gave to both my theme and the assembly I rendered out from it to a .dll.
     
  10. I ran the application in Cassini and my theme was biasing things as expected.

No comments:

Post a Comment