Expression blend (4)-create an iPhone-like screen lock control (on)

This article will eventually:

 

 

Of course, it's not just a UI. If it's just a picture, professional designers can make better results. Here, it is a control with many events and attributes. In fact, it is a checkbox control. Let's make a big transformation to the checkbox together ~ Words, before we have changed to ListBox, if you are interested in view: http://www.cnblogs.com/vimsk/archive/2011/03/09/1978326.html blend is indeed a good tool, through it, you can play to your imagination, in addition, it is so convenient to use (why is there any suspicion of advertising ). Okay, you don't need to talk about it anymore. Let's get started ~~

 

Knowledge gained through this article

1. Use the blend template to create a custom template.

2. How to perform template binding.

3. grid layout

4. Create a state transition using states.

5. Fluid layout application.

There are a lot of content, so the article is intended to be divided into two articles, otherwise it looks a little tired :)

 

The following content is being created...

 

1. Open blend and create a Silverlight project:

 

 

2. Drag a checkbox from the asset panel to the work zone:

3. Next, create a template:

Therefore, we can enter the template editing area. If you have read my previous articles, you should be familiar with these articles.

 

 

 

As shown in, you can use it to easily switch between Template editing and normal editing. If you view the timeline and object area at this time, you will also see the template organization (as shown in ).

 

 

As shown in red, you can switch from the template editing.

 

Next, we switch to the States tab to view the status of the checkbox:

 

Wow... A bunch ..... @! % ￥ % # ￥ @ %

Here we mainly focus on the checked status. This is also the main function of checkbox. For the moment, let's take a look at the composition of the checkbox template. After reading it, we found a grid with a grid and a contentprestener. Expand the grid, and we can see a lot of things. Let's zoom in and see:

The preceding background uses template binding. The advantage is that after you complete template editing, the control modifies the related attributes. For example, the background of the default checkbox template is the borderbrush attribute bound to the control, in this way, when the color of the control boerderbursh changes, the result is that the background attribute in the template is changed, and the color indicated by the Red Arrow is visually changed.

Next, let's take a look at the attributes of contentprestener. We found that it has a content attribute. If you click it, we also find that it is also bound.

It is bound to the content attribute of the Control. By default, a checkbox is dragged, and its content is a text.

After learning about these things, I started to get started. First, delete the grid in the grid and the contentprestener:

Delete all the grids at the outermost layer. Then, put an empty grid and it looks like this:

 

Our goal is to make the final look similar to the iPhone screen lock, so the final structure is as follows:

Expand grid:

, Rectangle is a rectangle, representing the background. Place a thumb rectangle and a path in the embedded grid. The following figure is displayed on the canvas:

The thumb is the button, the rectangle is the blue background, and the path is the middle arrow. It is clear now ....

Next, observe. Are there two locks on the top? There is also a diagonal double arrow in the middle. Here, the grid is divided into three columns. The first column is an open lock, which indicates that it is set according to the percentage, the center is the automatic width, and the last is the fixed length. Here we set it to 0. it makes sense to set this way, because in the end, our buttons will slide from the first column to the second column, and the second column length is related to the control length, when it is set to automatic, and the third column is fixed to zero, when the control length changes, the button will not slide out of the grid, the specific hands-on try it out.

Next, we need to bind the background color and the foreground color of the button to the borderbrush and foreground of the control respectively:

In this way, when we switch to the control editing area and set borderbrush and foreground, we will find that the color of the corresponding part of the template will change. We adjusted the color and dragged another checkbox to reference the template we edited above.

Finally, adjust the borderbrush and foreground of the two checkboxes respectively:

The current position only has the appearance, and we find that the button will not slide. Next, we will complete the checked. When the button slides from the left to the right, this article will not be written, it's too long. See the next article .. :)