Sưu tầm: Creating A LightSwitch Theme Extension using Expression Blend


image

Visual Studio LightSwitch allows you to create Theme extensions. A theme controls the overall look of a LightSwitch application.

image

Microsoft has an article, Walkthrough: Creating a Theme Extension, that covers the basics of creating themes for LightSwitch, however, this article will go a bit deeper and demonstrate creating more complex themes.

First note that the following are required in order to create LightSwitch extensions:

image

First, we create an extension project in Visual Studio.

image

We add a New Item to the .Lspkg project.

image

We add a Theme to the project.

image

A number of files are created in the various projects in the solution, including files in the Theme folder in the .Client project.

image

We click on the .Vsix project…

image

We then Start Debugging. This will open another instance of Visual Studio.

image

We create or open a LightSwitch project and go into Properties.

image

We click on the Extensions tab and enable the theme extension.

image

On the General Properties tab we select the Theme.

image

We then run the application.

image

The application shows with the default theme.

We now close the application, and the Visual Studio instance, and return to the extensions project.

Creating a Basic Theme

image

We right-click on the .xaml file and open it in Expression Blend.

image

When we click on the Resources tab, we can easily alter the brush styles.

image

When we run the application we see that our changes are reflected.

A More Advanced Theme

image

If we look at the LightSwitch Metro Theme we see an example of a more advanced theme.

image

It contains a class that implements the IThemeExtension interface, and an associated resource file.

See Jan Van der Haegen‘s article: Adding control styles to your LightSwitch theme extension for a full explanation of the the IThemeExtension interface.

image

We add a new class that implements the IThemeExtension interface using the following code:

using System;
using System.ComponentModel.Composition;
using Microsoft.LightSwitch.Theming;
using System.Collections.Generic;
using Microsoft.LightSwitch.Model;

namespace SimpleGreenTheme.Presentation.Themes
{
    [Export(typeof(IThemeExtension))]
    [Theme(GreenTheme.ThemeId, GreenTheme.ThemeVersion)]
    internal class MetroStyles :
        IThemeExtension
    {
        IEnumerable<Uri> IThemeExtension.GetControlStyleResources(
            string themeId, string themeVersion, IEnumerable<IModuleDefinition> modules)
        {
            yield return new
                Uri(@"/SimpleGreenTheme.Client;component/Presentation/Themes/GreenStyles.xaml", 
                UriKind.Relative);
        }
    }
}

image

Next, we add a Resource Dictionary to the project.

image

We can download Silverlight Themes from this link to “grab some ideas” Smile.

image

When we open the resource file in Expression Blend

image

We can visually edit the theme.

image

When we run the application we are able to see our advanced theming of controls.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

About thangletoan

Hallo Aloha

Posted on 25/09/2012, in Công nghệ và Giáo dục, Chính sách CNTT, ICT & Phát triển Rich Media content, Lập trình C, LOB, LOB - Lập trình - Phát triển phần mềm, Microsoft and tagged . Bookmark the permalink. Để lại bình luận.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: