STYLING IN SILVERLIGHT in Java

Generation DataMatrix in Java STYLING IN SILVERLIGHT

<Setter Property="FontWeight" Value="Bold"/> <Setter Property="Width" Value="200"/> <Setter Property="Foreground" Value="#FF0000FF"/> <Setter Property="Margin" Value="5"/> </Style> </UserControl.Resources> Now you have two styles defined, and two of your controls are set to these styles. Next, you need to set the style for your other controls. 8. Return to the UserControl in the Objects and Timeline panel and select the second TextBox control. Select Object Edit Style Apply a Resource TextBoxStyle from the main menu. This will add the Style="{StaticResource TextBoxStyle}" attribute to the second TextBox. Select the second Button control and select Object Resource ButtonStyle. Your XAML should now look as follows: <UserControl.Resources> <Style x:Key="TextBoxStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="22"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="Foreground" Value="#FFFF0000"/> <Setter Property="Margin" Value="5"/> </Style> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="FontSize" Value="20"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Width" Value="200"/> <Setter Property="Foreground" Value="#FF0000FF"/> <Setter Property="Margin" Value="5"/> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" > <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBox Text="TextBox" TextWrapping="Wrap" Style="{StaticResource TextBoxStyle}"/> <TextBox Text="TextBox" TextWrapping="Wrap" Style="{StaticResource TextBoxStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> </StackPanel> </Grid> 10. Run the application. The form now appears as shown in Figure 10-18. Edit Style Apply a

Figure 10-18. Silverlight application with styles Applied Now, let s say that you want to change the width of the text boxes in your application. Currently, their width is automatically set, but you would like to change them to a fixed width of 400 pixels. If you were using inline properties, as in the first two exercises in this chapter, you would need to set the property for each TextBox control in your application. However, since you are using Silverlight styles, you can simply change the TextBoxStyle, and all TextBox controls assigned to that style will be updated automatically. Let s see how this works. 11. To modify the TextBoxStyle property from Expression Blend, click the Resources panel. When you expand the UserControl item, you will see your two styles listed. To the right of TextBoxStyle, you will see an Edit Resource button, as shown in Figure 10-19. Click this button, and you will see that you have returned to the TextBoxStyle s design scope.

In the Properties panel, set the Width property of the TextBoxStyle to 400. Then click the up arrow in the Objects and Timeline panel to return to the UserControls scope. Your XAML should now look as follows: <Style x:Key="TextBoxStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="22"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="Foreground" Value="#FFFF0000"/> <Setter Property="Margin" Value="5"/> <Setter Property="Width" Value="400"/> </Style> 12. Run the application to confirm that the width of both text boxes has been updated, as shown in Figure 10-20.

Figure 10-20. The application with the updated TextBoxStyle This exercise showed how Silverlight styles can be used as an alternative to defining styles inline. As you can see, this approach provides for much cleaner XAML and also greatly improves the ease of maintaining your application.

In the previous example, you defined the styles locally, within your UserControl. If you have multiple UserControl components that you would like to share styles, you can define the styles at the application level. As far as the controls are concerned, there is absolutely no difference. You still indicate the style for the control using the Style="{StaticResource StyleName}" extended attribute. What does change is where the styles are defined. In the preceding example, your styles were defined within the <UserControl.Resources> element on the UserControl itself, as follows:

<UserControl.Resources> <Style x:Key="TextBoxStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="22"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="Foreground" Value="#FFFF0000"/> <Setter Property="Margin" Value="5"/> <Setter Property="Width" Value="400"/> </Style> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="FontSize" Value="20"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Width" Value="200"/> <Setter Property="Foreground" Value="#FF0000FF"/> <Setter Property="Margin" Value="5"/> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White" > <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top"> <TextBox Text="TextBox" TextWrapping="Wrap" Style="{StaticResource TextBoxStyle}"/> <TextBox Text="TextBox" TextWrapping="Wrap" Style="{StaticResource TextBoxStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> </StackPanel> </Grid> In order to define the styles at the application level, instead of defining the styles in the <UserControl.Resources>, you move them to the App.xaml file within the element <Application.Resources>, as follows: <Application.Resources> <Style x:Key="TextBoxStyle" TargetType="TextBox"> <Setter Property="FontSize" Value="22"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="Foreground" Value="#FFFF0000"/> <Setter Property="Margin" Value="5"/> <Setter Property="Width" Value="400"/> </Style> <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="FontSize" Value="20"/> <Setter Property="FontFamily" Value="Trebuchet MS"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Width" Value="200"/> <Setter Property="Foreground" Value="#FF0000FF"/> <Setter Property="Margin" Value="5"/> </Style> </Application.Resources> That is all there is to it. Again, there are no changes at all to the controls themselves. For example, to use these styles on your UserControl, the XAML would still look like the following: