Shulou(Shulou.com)06/02 Report--

This article introduces how the new function Make Into Control of Expression Blend 3 is, the content is very detailed, interested friends can use it for reference, I hope it can be helpful to you.

Microsoft has launched Silverlight 3, a new version of its "Flash Killer". It is worth noting that not only have many new features been added to Silverlight 3, but also Expression Blend 3 has been greatly enhanced compared to its previous versions, with one cool support after another.

As the current Silverlihgt is still in the stage of rapid development, and Visual Studio does not provide visual support for XAML markup language, we must almost master the visual programming support of Expression Blend.

Now I just want to introduce one of the new features of Expression Blend 3-Make Into Control. With this support, you can draw any geometry you want and convert it into a button, slider bar, or a drop-down list box control.

[note] the premise of the operation test is that you must install Silverlight 3 Tools for Visual Studio SP1 and Microsoft Expression Blend 3 beforehand (of course, you can also use the trial version).

Case analysis

First, start Visual Studio 2008. Then, select File-New-Project. In the subsequent New Project dialog box, select the Silverlight Application template and name the project S3MakeIntoControl. Please refer to figure 1.

Figure 1 create Silverlight application dialog box

Click the OK button, and a dialog box appears, which means to select the host site for the Silverlight project. Please select the default setting.

Then, navigate to the Silverlight project, right-click on the file MainPage.xaml and select "Open in Expression Blend...".

Therefore, the system automatically opens another software, Microsoft Expression Blend 3, and presents an empty XAML page in front of you.

Notice that on the left side of this page is the toolbar of the Expression Blend program. Please select the Pencil icon (see figure 2).

Figure 2 Select the pencil icon from the Expression Blend toolbar

Now, you can draw whatever you want in the MainPage.xaml page. In this case, I drew an ugly pentagram shape. Then, select the pentagram shape above to convert it into a Silverlight control.

After selecting the pentagram shape, right-click it and select the "Make Into Control" option (see figure 3).

Figure 3 Select a pentagram and then right-click to select the "Make Into Control" option

Then a dialog box pops up to confirm that you want to convert to the specified control (see figure 4).

Figure 4 determine control type dialog box

For simplicity, select the "Button" control type in the above dialog box and enter the key name pentagonButton,*** and click the "OK" button to exit the dialog box. Now we have a Button control. How do you feel?

No, let's go ahead and make some changes. Right-click the pentagonButton button you just created, and select "Edit Template"-"Edit Current" from the pop-up menu that follows, as shown in figure 5.

Figure 5 Select the template for editing the newly created control

After doing this, we can access the VisualStateManager through the States window (as a tab next to "Projects").

Now, click the "States" tab, and then click MouseOver status in it. This triggers the state recording action for the MouseOver event, as shown in figure 6.

Figure 6 State recording action that triggers the MouseOver event of the new control

At this point, open the Properties tab on the right and set the button control's fill color to another color, as shown in figure 7.

Figure 7 fill in the new color in the MouseOver event recording state of the new control

Now, stop recording and save the work you just did (File-Save).

At this point, go to the marked state of the xaml file, and you will find the following:

< UserControl.Resources>

< Style x:Key="pentagonButton" TargetType="Button">

< Setter Property="Template">

< Setter.Value>

< ControlTemplate TargetType="Button">

< Grid>

< VisualStateManager.VisualStateGroups>

< VisualStateGroup x:Name="FocusStates">

< VisualState x:Name="Focused"/>

< VisualState x:Name="Unfocused"/>

< /VisualStateGroup>

< VisualStateGroup x:Name="CommonStates">

< VisualState x:Name="Normal"/>

< VisualState x:Name="MouseOver">

< Storyboard>

< ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

< EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF200FF"/>

< /ColorAnimationUsingKeyFrames>

< /Storyboard>

< /VisualState>

< VisualState x:Name="Pressed"/>

< VisualState x:Name="Disabled"/>

< /VisualStateGroup>

< /VisualStateManager.VisualStateGroups>

< Path x:Name="path" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Data="M73.611115,181.94444 C86.962151,170.29263 84.722221,180.84279 84.722221,154.16667 C84.722221,138.78079 86.111115,123.42919 86.111115,108.33334 C86.111115,86.345619 87.5,65.706612 87.5,44.444443 C110.16323,44.444443 126.76094,82.515137 130.55556,116.66666 C133.69991,144.96585 144.44444,166.29266 144.44444,197.22223 C121.78442,197.22223 102.99593,172.35312 81.944443,159.72223 C67.342331,150.96095 59.193172,141.79919 55.555557,123.61111 C54.629631,123.61111 53.703705,123.61111 52.777779,123.61111 C54.022728,116.14142 155.51205,39.511379 137.5,105.55556 C127.33724,142.81902 121.06282,167.95105 77.777779,183.33333">

< Path.Fill>

< RadialGradientBrush GradientOrigin="0.577,0.504">

< GradientStop Color="Black" Offset="0"/>

< GradientStop Color="#FF01FF01" Offset="1"/>

< /RadialGradientBrush>

< /Path.Fill>

< /Path>

< ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

< /Grid>

< /ControlTemplate>

< /Setter.Value>

< /Setter>

< /Style>

< /UserControl.Resources>

< Grid x:Name="LayoutRoot">

< Button Height="153.778" HorizontalAlignment="Left" Margin="52.778,44.444,0,0" Style="{StaticResource pentagonButton}" VerticalAlignment="Top" Width="92.666" Click="Button_Click"/>

In order to observe the obvious effect of the experiment, add a TextBlock control in the lower part of the page MainPage.xaml and name it txtMessage.

Next, we want to move on to the Click event handler function of the newly created pentagonButton button control. To do this, simply double-click to the right of the event name Click shown in figure 8.

Figure 8 Click event handler for pentagonButton button control to be triggered

Blend opens the background code editing page MainPage.xaml.cs. This code editing feature is also new to Blend 3.0 and supports syntax-aware prompts, which is quite good. In the Click event handler function code, the following:

Private void Button_Click (object sender, System.Windows.RoutedEventArgs e) {txbMessage.Text= "Hello world!";}

Now, navigate back to Visual Studio and you will be prompted to reload the XAML file.

*, please select "build"-"rebuild solution". After the generation is complete, right-click on the S3MakeIntoControlTestPage.aspx file of the host Web project and select View in browser.

Now you can enjoy the above masterpiece-you will observe the interface shown in figure 9.

Figure 9 Application sample initial interface

At this point, move the mouse in your hand over the pentagram (do not move the white part inside), and the color of the button will change to another form set above (we used a gradient). When you click this button, the prompt message "Hello world!" is also displayed in the prompt line below (see figure 10).

Figure 10 Click the pentagram button to display the corresponding information prompt

On the new features of Expression Blend 3 Make Into Control is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.