Silverlight 4.0 Tutorial (5 of N): More Blend!

Read Previous Posts: Part1, Part2, Part3, Part4

Continuing our series for building a registration booth application using Silverlight 4.0, in this post we will continue working with Expression Blend

- Open Home.xaml, select the LayoutRoot grid in the Objects and Timeline window, set the Width and Height properties to Auto so that the grid takes all the screen size.

Set to Auto

- Now we will change the background color of the page, select the LayoutRoot grid, go to the Background property and select the Gradient Brush option.

Gradient Brush Editor

- The Gradient brush we will use will have three gradient stops, you can click on the gradient bar (below the color mixer) to add a gradient stop at the specified offset, to remove a gradient stop click, hold, and drag your mouse off the gradient bar. for each gradient stop you can specify the color (RGB, Alpha).

Creating Gradient Brush

- The xaml for the grid background will be as follows.

  1. <Grid.Background>
  2.        <LinearGradientBrush EndPoint="0.5,0.998" StartPoint="0.5,0">
  3.             <GradientStop Color="#FF052744" Offset="0"/>
  4.             <GradientStop Color="#FF052744" Offset="0.02"/>
  5.             <GradientStop Color="#7F256FB7" Offset="1"/>
  6.        </LinearGradientBrush>
  7.     </Grid.Background>

- We will do another change, we will change the font of the TextBlocks, to do this add a TextBlock to the Home.xaml page, right click the TextBlock, select  Edit Style-> Create Empty a dialog box will appear to allow you to change the properties of the new style resource, Choosing the Apply to all means that this style will be applied to all the text blocks (this is a new feature in Silverlight called implicit styles).

Create Style

- change the font family to Freestyle script and the font size to 30pt.

Font

- Run the application, you will see that the TextBlocks inside the ListBox didn’t change, this is due to a limitation design issue related to the DateTemplate (more details in this post).

- To resolve this we need to define the implicit style inside the data template, so move the style definition from the Page.Resources to the Grid.Resources section inside the data template.

DateTemplate Implicit Style

- We need also to change the style of the labels inside the DataForm, the DataField control that we use inside the DataForm NewItemTemplate renders a Label control for the display name not a TextBlock so we will add a style with the same properties that we used in the previous style but we will set the TargetType property to the value “dataInput:Label” which represent the Label control defined in the System.Windows.Controls.Data.Input assembly (don’t forget to add xml prefix “dataInput” in the page tag), the NewItemTemplate definition should be as follows.

NewItemTemplate Style

That’s it for this post, see you in the next post

You can download the code from Here

Comments

Anonymous said…
This comment has been removed by a blog administrator.
August 20, 2010 4:04 PM
Post a Comment

Popular posts from this blog

Documentum DQL Query Custom Data Extension For SQL Server Reporting Services

When it comes to Reporting SQL Reporting Services is my favorite choice. SQL Reporting Services has a plenty of data source types but unfortunately Documentum is not one of them, whenever we have to develop some reports based on the data in Documentum we first develop a web service that contains the necessary DQL queries and returns the result in a Data Set, then we create an XML data source that consumes this web service and use it in our reports. Fortunately SQL Reporting Services allows you to extend its data access capabilities by developing a custom data extension (CDE)that retrieves data from your custom data source. I developed a Custom Data Extension for Documentum that allows you to specify a Documentum Repository as a data source and provide your DQL query that will populate your report, I used the Reporting Services SDK Sample (FsiDataExtension) and this Article as starting points You can download the extension from here To install the extension: you have to install the ex
Read more

Portable Class Library Projects and MVVM Light

Image
With Portable Class Library Projects you can create a single library that can target different platforms (e.g. Windows Phone, .Net, Windows Store Apps). For most of the modern apps it’s kind of mandatory to use the MVVM pattern, a famous MVVM library is Laurent Bugnion MVVM Light library. In this post we will walk through the steps needed to create a Portable Class Library that uses the MVVM Light library and targets the Windows Phone 8 and .Net for Windows Store Apps frameworks. I will be using Visual Studio 2012 with Update 3. - Let’s create a new Portable Class Library project and name it MyApp.Core, the solution name will be MyApp - We will target the Windows Phone 8 and .Net for Windows Store Apps - We will create two applications, the first is a Windows Store Blank Application named MyApp.Win8 and the second is a Windows Phone 8 named MyApp.WP8 - We will add a reference to the Portable Class Library Project MyApp.Core to the Windows Store Project and the
Read more

Using taco to create Ionic projects for the Windows platform

Image
Recently Microsoft released Tools for Apache Cordova Command Line Interface (TACO CLI), by using TACO, you can quickly start building awesome Apache Cordova apps really and leave all the plumbing of the different platforms dependencies, plugins, etc. to the tools to take care of. For example the following few commands create a cordova project based on the ionic base template, add the android platform to the project, install the platform requirements, build the app, and run it in the emulator: $ taco create sampleApp --template https://github.com/driftyco/ionic-app-base $ cd sampleApp $ taco platform add android $ taco install-reqs android $ taco build android $ taco emulate android Check the TACO home page of for installation instructions and more information http://taco.tools/ . I ran into a problem when i created a new project based on the ionic base template and tried to run it on a windows 8.1 emulator, to reproduce the issue use the following taco commands to cr
Read more