Styles in Silverlight – Part 1

Honestly, I don’t have so called “designer’s eye”. So I am really bad with designing. I think this is the curse that every developer bares … or may be it is a good thing, who knows. So the demo I am showing here is not so eye catching, but this solves the purpose so I am not going crazy with designing.

Just like HTML, Silverlight too has a concept of “Styling”, but it is bit different that what we do in HTML. Just like HTML here in Silverlight also we have different method of styling like inline styles or creating resource or use separate file that contains only styles. But this post is to show only basic concept of styling so I will just show inline code for styles, later on I will post more about other methods of styling.

In Silverlight each object can be styled individually as well as in group (just like HTML). And each style can be highly customized. For example, gradient in button. Or two different object can be used to create some new style, for example textbox with rounded corners.

<sdk:Label Margin="0,0,19,5" VerticalAlignment="Bottom" Content="First Name" 
        HorizontalAlignment="Right" Foreground="Red" FontSize="16"/>
        <sdk:Label Margin="0,0,21,4" Grid.Row="1" VerticalAlignment="Bottom" Content="Last Name" 
        HorizontalAlignment="Right" Foreground="Aqua" FontSize="14"/>
        
        
        <TextBox Grid.Column="1" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Bottom" Margin="0,0,284,0" Name="FName" 
                Background="Yellow" FontFamily="CourierNew" FontSize="18"/>
        
        <Border Grid.Column="1" Grid.Row="1" CornerRadius="80">
        <TextBox TextWrapping="Wrap" Text="TextBox" 
        VerticalAlignment="Bottom" Margin="0,0,284,0" Name="LName" Background="LightBlue"
        FontSize="10" FontFamily="Arial" />
        </Border>
        
        <Button Grid.Column="1" Grid.Row="3" Content="Submit" HorizontalAlignment="Left" 
            VerticalAlignment="Top" Width="75" Click="Button_Click" x:Name="Btn">
            <Button.Background>
                <RadialGradientBrush>
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FFF53112" Offset="1"/>
                </RadialGradientBrush>
            </Button.Background>
        </Button>

I’ve created this project using Expression Blend. I must say that this is really great tool for creating UI with a breeze. What I’ve shown here is just a sample but with use of Expression Blend we can do really cool animation using storyboard. But that is for some other time.

It’s Just A Thought …

P.S. The project source code can be downloaded from here.