Part 1: Live Search using Silverlight (Main Page)

I wanted to get my live search sample rebuilt using Silverlight2 Beta1. Here is where I am so far. I wanted to have following things on the page…

1. TextBox where user can enter the search query
2. Button to start the search
3. Logo for Search
4. Area for Search Results
5. Area for detail view of search results

For Alpha release, I had to do most of these things myself. Silverlight did not have TextBox, so I ended up using HTML textbox and using DOM bridge to communicate back and forth. I did not  have Grid either so to get the layout I needed meant lot of work on my part. But SLB1 has Grid layout so now I can get all of these out of box.

This time instead of handwriting all the XAML, I have also tried to use Blend as much as possible (from the looks of the page, you can tell I have long ways to go)

Step 1: Get Layout

So here is the XAML I started with…

<UserControl x:Class="Search.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignHeight="500" d:DesignWidth="500">
   
    <Grid x:Name="LayoutRoot" ShowGridLines="True" >     
        
        <Grid.RowDefinitions>
            <RowDefinition Height="0.091*"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="0.833*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.098*"/>
            <ColumnDefinition Width="0.66*" MinWidth="300"/>
            <ColumnDefinition Width="0.242*"/>
        </Grid.ColumnDefinitions>
        
        <Button  
            Grid.Column="1" Grid.Row="1" Margin="0,10,10,10" 
            MaxWidth="100"  
            Content="Search" 
            Name="btnSearch" 
            HorizontalAlignment="Right"/>
    
        <TextBox 
            Grid.Column="1" Grid.Row="1" Margin="40,10,120,10" 
            Text="TextBox" 
            x:Name="txtSearch"/>
            
    </Grid>
</UserControl>

Here is what it does…

1. Grid has 3 rows and 3 columns.
2. I have fixed the height of middle row since I did not want height of search input controls to change
3. I have also put a minwidth on middle column so that it does not go below certain width and Button and TextBox always have enough space
4. I have put Button and TextBox in the Row 1/Column 1 (starting from 0), using attached property on Grid (Grid.Column=”1″ Grid.Row=”1″ )
5. I have aligned Button to right and TextBox to Left
6. Put some margin on those controls to get the right layout.

Here is how this basic XAML looks like

Step 2: Get Looks

I wanted to get some gradient background so here is the xaml I ended up using

<RadialGradientBrush x:Key="PageBackgroundBrush" 
GradientOrigin="-0.0240000002086163,-0.0240000002086163">
    <RadialGradientBrush.RelativeTransform>
        <TransformGroup>
            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.991" ScaleY="0.987"/>
            <SkewTransform CenterX="0.5" CenterY="0.5"/>
            <RotateTransform CenterX="0.5" CenterY="0.5"/>
            <TranslateTransform X="-0.001" Y="-0.005"/>
        </TransformGroup>
    </RadialGradientBrush.RelativeTransform>
    <GradientStop Color="#FFFFFFFF"/>
    <GradientStop Color="#FFACD3E5" Offset="1"/>
    <GradientStop Color="#FFF1F5F7" Offset="0.60000002384185791"/>
    <GradientStop Color="#FFC8E7F7" Offset="0.29499998688697815"/>
</RadialGradientBrush>

This XAML uses RadialGradient brush with transform applied to it so that Gradients center appears to be on the left hand side, top corner. This is defined as a Resource (in <UserControl.Resources>) so that it can be used anywhere else in the page. If I needed to share this across controls, I could also define this as Application resource (in <Application.Resources>).

To consume this resource, Grid tag in my original XAML changes to following…

<Grid x:Name="LayoutRoot" ShowGridLines="True" 
          Background="{StaticResource PageBackgroundBrush}">

Similar to this, I also defined a brush for TextBackground.

To get the looks for controls, I used Styles. Style is bag of “Setters” where I can set properties of a frameworkelement. Style has a key like any other resource and TargetType (in this case Button)

<Stylex:Key=”ButtonStyle”TargetType=”Button”>
    <SetterProperty=”Background” Value=”#FF007FFF”/>
    <SetterProperty=”Foreground”Value=”Black”/>
    <SetterProperty=”FontFamily”Value=”Trebuchet MS”/>
    <SetterProperty=”FontSize”Value=”17″/>
</Style>

In this case, I have set the Background/Forground/FontFamily/Size for the button.

<Button  
    Grid.Column="1" Grid.Row="1" Margin="0,10,10,10" 
    MaxWidth="100"  
    Content="Search" 
    Name="btnSearch" 
    HorizontalAlignment="Right" 
    Style="{StaticResource ButtonStyle}"/>

To add Icon…

Instead of using image, I decided drew simple looking glass using Blend. so it is all in XAML.

<Canvas Grid.Column="0" Grid.Row="1" 
        Margin="30.1760005950928,5,0,-26" VerticalAlignment="Stretch">
    <Ellipse HorizontalAlignment="Stretch" Margin="0,0,0,0" 
             VerticalAlignment="Stretch" Stroke="#FF000000" 
             StrokeThickness="4" Width="51" Height="48.682">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.293000012636185,0.666999995708466" 
                                 StartPoint="0.5,0">
                <GradientStop Color="#FF00AEFF"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Path Height="28" Width="27" Canvas.Left="36.824" Canvas.Top="38.076" 
          Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" 
          StrokeThickness="4" Data="M39.823997,41.075745 L59.823997,62.075745"/>
    <Path Height="22" HorizontalAlignment="Right" Margin="0,0,0,0" 
          VerticalAlignment="Top" Width="21" Grid.Row="2" Fill="#FFFFFFFF"
          Stretch="Fill" Stroke="#FF000000" StrokeThickness="7"
          Data="M139.2532,209.79701 L125.25321,194.79701" 
          Canvas.Top="45.374" Canvas.Left="43.402"/>
</Canvas>

I did not want to put my icon directly inside GRID since then drawing elements (Ellipse, Path) respond to layout and their look changes based on size. So I put them inside a canvas and then I put that Canvas in the Grid.

So at the end of this I got following page…

Here is the full XAML

(In next part, I will hook up button to talk to Webservice)