Get Browser Information In Silverlight

On July 9, 2009 · 1 Comment

While writing Silverlight you may come across a need to get information about host browsers within your application. In Silverlight this information is exposed by BrowserInformation class within System.Windows.Browser namespace. BrowserInformation can be accessed through HtmlPage class which also lives in System.Windows.Browser namespace. Here is an example where I am retrieving information about the browser.

<StackPanel x:Name="LayoutRoot"
            Margin="10"
            Background="PaleGoldenrod">

  <StackPanel.Resources>
    <Style x:Key="TextBlockStyle"
           TargetType="TextBlock">
             <Setter
               Property="FontSize"
               Value="14" />
             </Style>
  </StackPanel.Resources>

  <TextBlock
    Text="Information about your browser"
    HorizontalAlignment="Center"
    Style="{StaticResource TextBlockStyle}" />
  <controls:WrapPanel>
    <TextBlock
      Text="You are using "
      Style="{StaticResource TextBlockStyle}"/>
    <TextBlock
      Text="{Binding Name}"
      Style="{StaticResource TextBlockStyle}" />
    <TextBlock
      Text=". Version "
      Style="{StaticResource TextBlockStyle}" />
    <TextBlock
      Text="{Binding BrowserVersion}"
      Style="{StaticResource TextBlockStyle}" />
    <TextBlock
      Text="Your platform is "
      Style="{StaticResource TextBlockStyle}"/>
    <TextBlock
      Text="{Binding Platform}"
      Style="{StaticResource TextBlockStyle}"/>
  </controls:WrapPanel>
</StackPanel>

 

We also need to assign a DataContext for our StackPanel to BrowserInformation object.

LayoutRoot.DataContext =
  System.Windows.Browser.HtmlPage.BrowserInformation;

 

And the output on my machine is.

image

Tagged with: • •
 

Insert Master Detail Data With LINQ To SQL

On July 8, 2009 · 8 Comments

Best thing about running One .Net Way is interaction with members of developer community. I thoroughly enjoy answering questions which come my way through this site. Early in the morning today I saw a question by Joey. To avoid loosing details in paraphrasing, here is the exact question asked by Joey.

I’m new to LINQ. If I had two tables “Customer” and “CustomerDetails”, how (using LINQ) can I insert to both of these tables? Do I need to create a “Customer” object as well as a “CustomerDetails” object?

In short the answer is yes. LINQ can insert to both tables, you will need to populate both Customer and CustomerDetails objects with data. I will now present an example to support my answer.

What we have here is a one to many scenario which involves two tables linked through a Foreign Key. To serve as an example, I have modelled the tables like this.

image

Each customer can have many nick names which are stored in CustomerDetails table. Let’s go ahead and generate LINQ To SQL entities. Please refer to LINQ To SQL tutorial if you want a refresher on how to generate LINQ To SQL entities. After dragging our tables to designer we can see that designer has recognised relationship we have between our tables.

image

A quick glance over generated code confirms that we have a property of Type EntitySet<CustomerDetails> in our Customer class.

image

Now let’s insert some data. The following code will insert one Customer record and two CustomerDetails records.

private void InsertData()
{
  string firstName = "LINQ";
  string lastName = "Dude";
  string nickName1 = "Cool";
  string nickName2 = "DataBuster";

  using (CustomerDatabaseDataContext context = new CustomerDatabaseDataContext())
  {
    // Create a Customer object
    Customer customer = new Customer
      {
        FirstName = firstName,
        LastName = lastName,
        // Create two CustomerDetails objects
        CustomerDetails = new System.Data.Linq.EntitySet<CustomerDetail>()
          {
            new CustomerDetail{NickName = nickName1},
            new CustomerDetail{NickName = nickName2}
          }

        };

    // We'd like to Insert our changes as new
    context.Customers.InsertOnSubmit(customer);
    // Submit changes to database
    context.SubmitChanges();
  }
}

 

Code above produces following T-SQL

exec sp_executesql N'INSERT INTO [dbo].[Customer]([FirstName], [LastName])
VALUES (@p0, @p1)

SELECT CONVERT(Int,SCOPE_IDENTITY()) AS [value]',N'@p0 varchar(4),@p1 varchar(4)',
@p0='LINQ',@p1='Dude'
go
exec sp_executesql N'INSERT INTO [dbo].[CustomerDetails]([CustomerId], [NickName])
VALUES (@p0, @p1)

SELECT CONVERT(Int,SCOPE_IDENTITY()) AS [value]',N'@p0 int,@p1 varchar(4)',
@p0=2,@p1='Cool'
go
exec sp_executesql N'INSERT INTO [dbo].[CustomerDetails]([CustomerId], [NickName])
VALUES (@p0, @p1)

SELECT CONVERT(Int,SCOPE_IDENTITY()) AS [value]',N'@p0 int,@p1 varchar(10)',
@p0=2,@p1='DataBuster'
go

 

In T-SQL above you can see that we are inserting one row for Customer and two rows for CustomerDetails. However in our C# we only called SubmitChanges once.

Tagged with: •
 

Style Silverlight ScrollViewer With A New ControlTemplate

On July 7, 2009 · 1 Comment

In an earlier post I showed you how to add ScrollViewer to Panels. In this post I will show you how to change the look of  the ScrollViewer using Expression Blend. I will work with the same example where I placed  ScrollViewer for a StackPanel. Here is the XAML I will use with a screenshot of its output.

<ScrollViewer>
  <StackPanel x:Name="LayoutRoot"
              Background="Honeydew">
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
  </StackPanel>
</ScrollViewer>

 

StackPanel With ScrollViewer

I will now show you how to modify the standard look of the ScrollViewer. Rather than killing myself by typing all the XAML required to achieve the goal, I will use Blend which makes doing this a breeze. In the Objects and Timeline I can see the hierarchy of Controls in my Page.

image 

What I need to do now is change the default Control Template for ScrollViewer. This can be done by right clicking ScrollViewer in Objects and Timeline –> Edit Control Parts (Template) –> Edit a Copy.

image

My Objects and Timeline shows me the hierarchy of controls involved in a ScrollViewer. I now need to modify the template for VerticalScrollBar. This can be done by right clicking VierticalScrollBar –> Edit Control parts (Template) –> Edit a Copy.

In Objects and Timeline I now see this hierarchy.

image

To keep things simple, I will just change the background of my ScrollViewer. This can be done by applying a Radial gradient to the first Rectangle (highlighted above).

image

Screenshot below shows the changed background for ScrollViewer in Expression Blend.

image

Now when I run my application I can see that the background of my ScrollViewer has a Radial gradient applied to it.

image

Similarly we can changes other parts of the ScrollViewer such as top and bottom buttons and the thumb. Silverlight allows us to change look of controls significantly by editing Control Templates. You saw an example of this awesomeness in this article.

Tagged with: • • • •
 

Scrolling In Silverlight Panels

On July 7, 2009 · 2 Comments

Scrolling is a very basic User Interface feature which allows you to navigate vertically or horizontally the content which may take up more than available area. In Silverlight scrolling is not available by default for any of the panels. But it can easily be made available with just a little bit of XAML. In this post I will show you how to enable scrolling for a StackPanel which contains more items than it can fit within its size.

To begin with I will create a StackPanel with about 10 rectangles. 

<StackPanel x:Name="LayoutRoot"
            Background="Honeydew">
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
  <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
</StackPanel>

Panel without ScrollViewer

To get a ScrollViewer all I need to do is Wrap my StackPanel inside a ScrollViewer.

<ScrollViewer>
  <StackPanel x:Name="LayoutRoot"
              Background="Honeydew">
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkRed" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkGreen" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkMagenta" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkOrchid" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkTurquoise" />
    <Rectangle Margin="5" Width="270" Height="40" Fill="DarkViolet" />
  </StackPanel>
</ScrollViewer>

 

ScrollViewer

ScrollViewer can also be used with other panels such as Grid, Canvas etc. Other than scrolling vertically ScrollViewer can also be uses to scroll horizontally. This can be done by setting HorizontalScrollBarVisibility property as shown below.

HorizontalScrollBarVisibility

Tagged with: • • •
 

Select Max Value With LINQ To SQL

On July 7, 2009 · 12 Comments

Today I was asked a question by a developer on my team. The question is “How do you select MAX value for a column in a table with LINQ To SQL?”. I will try to answer the question in this post with an example. Let’s say that we want to retrieve maximum unit price from Products table in Northwind database. In T-SQL such a query can be written like this.

SELECT MAX(UnitPrice)
FROM products

 

Query above produces the correct result.

image

In LINQ To SQL we can write the following query

(from p in Products select (p.UnitPrice)).Max()

 

which will get translated into this T-SQL.

 image

Other than MAX we can also use other aggregates such as MIN, SUM etc..

Tagged with: •
 

What Is Microsoft Windows Azure?

On July 1, 2009 · 2 Comments

This video is by far the best explanation I have seen. It cannot get any simpler and smarter. Original source of the video is Channel 9.

Get Microsoft Silverlight

Tagged with: •
 

Silverlight Predefined Colors – What Color Are They?

On June 30, 2009 · 5 Comments

While writing Silverlight applications, I find it challenging to pick colors from the list of predefined colors supported by Silverlight. Honestly I don’t know what those fancy colors look like. There! I said it!. Happy? To overcome this issue in true developer style, I wrote a small utility which shows all predefined colors on a page. This post is about how I wrote the utility. Here is a screenshot of what my little application looks like when it is running.

 

image

In XAML we have more colors available to us as compared to when we are in code behind. When  we write something like Fill=”DarkBlue”, XAML parser converts it into the proper dark blue color. Look at the choice of colors we get when writing XAML.

image

And this is our limited choice in c#.

image

But for my little utility I needed to know about all those pre-defined colors in c#. I found a post by Jabb which came in handy for this.

Writing this application was very simple. In my XAML I defined a DataTemplate which is used by a ListBox to show all colors. 

<UserControl x:Class="AllColors.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
  <StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
      <DataTemplate x:Key="ColorsTemplate">
        <StackPanel Margin="10" Orientation="Horizontal">
          <TextBlock
            Margin="20"
            Width="200"
            VerticalAlignment="Center"
            Text="{Binding Path=ColorName}"
            FontFamily="Verdana"
            FontSize="20"  />
          <Rectangle
            Margin="20"
            Width="300"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            Height="100"
            Fill="{Binding Path=ColorName}" />
        </StackPanel>
      </DataTemplate>
    </StackPanel.Resources>

    <ListBox x:Name="lstColors"
      Margin="50"
      Height="800"
      ItemTemplate="{StaticResource ColorsTemplate}"
      ScrollViewer.VerticalScrollBarVisibility="Visible" />
    </StackPanel>
</UserControl>

In C# code for my UserControl, I assigned ItemSource property to a list of pre-defined colors. 

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  AllColorsHelper helper = new AllColorsHelper();
  lstColors.ItemsSource = helper.PredefinedColors;
}

A collection of pre-defined colors came from a helper class. This collection is loaded in the constructor of AllColorsHelper class.

public class Color
{
  public string ColorName { get; set; }
  public uint ColorCode { get; set; }
}

public class AllColorsHelper
{
  public AllColorsHelper()
  {
    PredefinedColors = new List<Color>
      {
         new Color{ColorName = "Aliceblue", ColorCode = 0xFFF0F8FF},
         new Color{ColorName = "AntiqueWhite", ColorCode = 0xFFFAEBD7},
         new Color{ColorName = "Aqua", ColorCode = 0xFF00FFFF},
         new Color{ColorName = "Aquamarine", ColorCode = 0xFF7FFFD4},
         new Color{ColorName = "Azure", ColorCode = 0xFFF0FFFF},
         new Color{ColorName = "Beige", ColorCode = 0xFFF5F5DC},
         new Color{ColorName = "Bisque", ColorCode = 0xFFFFE4C4},
         new Color{ColorName = "Black", ColorCode = 0xFF000000},
         new Color{ColorName = "BlanchedAlmond", ColorCode = 0xFFFFEBCD},
         new Color{ColorName = "Blue", ColorCode = 0xFF0000FF},
         new Color{ColorName = "BlueViolet", ColorCode = 0xFF8A2BE2},
         new Color{ColorName = "Brown", ColorCode = 0xFFA52A2A},
         new Color{ColorName = "BurlyWood", ColorCode = 0xFFDEB887},
         new Color{ColorName = "CadetBlue", ColorCode = 0xFF5F9EA0},
         new Color{ColorName = "Chartreuse", ColorCode = 0xFF7FFF00},
         new Color{ColorName = "Chocolate", ColorCode = 0xFFD2691E},
         new Color{ColorName = "Coral", ColorCode = 0xFFFF7F50},
         new Color{ColorName = "CornflowerBlue", ColorCode = 0xFF6495ED},
         new Color{ColorName = "Cornsilk", ColorCode = 0xFFFFF8DC},
         new Color{ColorName = "Crimson", ColorCode = 0xFFDC143C},
         new Color{ColorName = "Cyan", ColorCode = 0xFF00FFFF},
         new Color{ColorName = "DarkBlue", ColorCode = 0xFF00008B},
         new Color{ColorName = "DarkCyan", ColorCode = 0xFF008B8B},
         new Color{ColorName = "DarkGoldenrod", ColorCode = 0xFFB8860B},
         new Color{ColorName = "DarkGray", ColorCode = 0xFFA9A9A9},
         new Color{ColorName = "DarkGreen", ColorCode = 0xFF006400},
         new Color{ColorName = "DarkKhaki", ColorCode = 0xFFBDB76B},
         new Color{ColorName = "DarkMagenta", ColorCode = 0xFF8B008B},
         new Color{ColorName = "DarkOliveGreen", ColorCode = 0xFF556B2F},
         new Color{ColorName = "DarkOrange", ColorCode = 0xFFFF8C00},
         new Color{ColorName = "DarkOrchid", ColorCode = 0xFF9932CC},
         new Color{ColorName = "DarkRed", ColorCode = 0xFF8B0000},
         new Color{ColorName = "DarkSalmon", ColorCode = 0xFFE9967A},
         new Color{ColorName = "DarkSeaGreen", ColorCode = 0xFF8FBC8F},
         new Color{ColorName = "DarkSlateBlue", ColorCode = 0xFF483D8B},
         new Color{ColorName = "DarkSlateGray", ColorCode = 0xFF2F4F4F},
         new Color{ColorName = "DarkTurquoise", ColorCode = 0xFF00CED1},
         new Color{ColorName = "DarkViolet", ColorCode = 0xFF9400D3},
         new Color{ColorName = "DeepPink", ColorCode = 0xFFFF1493},
         new Color{ColorName = "DeepSkyBlue", ColorCode = 0xFF00BFFF},
         new Color{ColorName = "DimGray", ColorCode = 0xFF696969},
         new Color{ColorName = "DodgerBlue", ColorCode = 0xFF1E90FF},
         new Color{ColorName = "Firebrick", ColorCode = 0xFFB22222},
         new Color{ColorName = "FloralWhite", ColorCode = 0xFFFFFAF0},
         new Color{ColorName = "ForestGreen", ColorCode = 0xFF228B22},
         new Color{ColorName = "Fuchsia", ColorCode = 0xFFFF00FF},
         new Color{ColorName = "Gainsboro", ColorCode = 0xFFDCDCDC},
         new Color{ColorName = "GhostWhite", ColorCode = 0xFFF8F8FF},
         new Color{ColorName = "Gold", ColorCode = 0xFFFFD700},
         new Color{ColorName = "Goldenrod", ColorCode = 0xFFDAA520},
         new Color{ColorName = "Gray", ColorCode = 0xFF808080},
         new Color{ColorName = "Green", ColorCode = 0xFF008000},
         new Color{ColorName = "GreenYellow", ColorCode = 0xFFADFF2F},
         new Color{ColorName = "Honeydew", ColorCode = 0xFFF0FFF0},
         new Color{ColorName = "HotPink", ColorCode = 0xFFFF69B4},
         new Color{ColorName = "IndianRed", ColorCode = 0xFFCD5C5C},
         new Color{ColorName = "Indigo", ColorCode = 0xFF4B0082},
         new Color{ColorName = "Ivory", ColorCode = 0xFFFFFFF0},
         new Color{ColorName = "Khaki", ColorCode = 0xFFF0E68C},
         new Color{ColorName = "Lavender", ColorCode = 0xFFE6E6FA},
         new Color{ColorName = "LavenderBlush", ColorCode = 0xFFFFF0F5},
         new Color{ColorName = "LawnGreen", ColorCode = 0xFF7CFC00},
         new Color{ColorName = "LemonChiffon", ColorCode = 0xFFFFFACD},
         new Color{ColorName = "LightBlue", ColorCode = 0xFFADD8E6},
         new Color{ColorName = "LightCoral", ColorCode = 0xFFF08080},
         new Color{ColorName = "LightCyan", ColorCode = 0xFFE0FFFF},
         new Color{ColorName = "LightGoldenrodYellow", ColorCode = 0xFFFAFAD2},
         new Color{ColorName = "LightGray", ColorCode = 0xFFD3D3D3},
         new Color{ColorName = "LightGreen", ColorCode = 0xFF90EE90},
         new Color{ColorName = "LightPink", ColorCode = 0xFFFFB6C1},
         new Color{ColorName = "LightSalmon", ColorCode = 0xFFFFA07A},
         new Color{ColorName = "LightSeaGreen", ColorCode = 0xFF20B2AA},
         new Color{ColorName = "LightSkyBlue", ColorCode = 0xFF87CEFA},
         new Color{ColorName = "LightSlateGray", ColorCode = 0xFF778899},
         new Color{ColorName = "LightSteelBlue", ColorCode = 0xFFB0C4DE},
         new Color{ColorName = "LightYellow", ColorCode = 0xFFFFFFE0},
         new Color{ColorName = "Lime", ColorCode = 0xFF00FF00},
         new Color{ColorName = "LimeGreen", ColorCode = 0xFF32CD32},
         new Color{ColorName = "Linen", ColorCode = 0xFFFAF0E6},
         new Color{ColorName = "Magenta", ColorCode = 0xFFFF00FF},
         new Color{ColorName = "Maroon", ColorCode = 0xFF800000},
         new Color{ColorName = "MediumAquamarine", ColorCode = 0xFF66CDAA},
         new Color{ColorName = "MediumBlue", ColorCode = 0xFF0000CD},
         new Color{ColorName = "MediumOrchid", ColorCode = 0xFFBA55D3},
         new Color{ColorName = "MediumPurple", ColorCode = 0xFF9370DB},
         new Color{ColorName = "MediumSeaGreen", ColorCode = 0xFF3CB371},
         new Color{ColorName = "MediumSlateBlue", ColorCode = 0xFF7B68EE},
         new Color{ColorName = "MediumSpringGreen", ColorCode = 0xFF00FA9A},
         new Color{ColorName = "MediumTurquoise", ColorCode = 0xFF48D1CC},
         new Color{ColorName = "MediumVioletRed", ColorCode = 0xFFC71585},
         new Color{ColorName = "MidnightBlue", ColorCode = 0xFF191970},
         new Color{ColorName = "MintCream", ColorCode = 0xFFF5FFFA},
         new Color{ColorName = "MistyRose", ColorCode = 0xFFFFE4E1},
         new Color{ColorName = "Moccasin", ColorCode = 0xFFFFE4B5},
         new Color{ColorName = "NavajoWhite", ColorCode = 0xFFFFDEAD},
         new Color{ColorName = "Navy", ColorCode = 0xFF000080},
         new Color{ColorName = "OldLace", ColorCode = 0xFFFDF5E6},
         new Color{ColorName = "Olive", ColorCode = 0xFF808000},
         new Color{ColorName = "OliveDrab", ColorCode = 0xFF6B8E23},
         new Color{ColorName = "Orange", ColorCode = 0xFFFFA500},
         new Color{ColorName = "OrangeRed", ColorCode = 0xFFFF4500},
         new Color{ColorName = "Orchid", ColorCode = 0xFFDA70D6},
         new Color{ColorName = "PaleGoldenrod", ColorCode = 0xFFEEE8AA},
         new Color{ColorName = "PaleGreen", ColorCode = 0xFF98FB98},
         new Color{ColorName = "PaleTurquoise", ColorCode = 0xFFAFEEEE},
         new Color{ColorName = "PaleVioletRed", ColorCode = 0xFFDB7093},
         new Color{ColorName = "PapayaWhip", ColorCode = 0xFFFFEFD5},
         new Color{ColorName = "PeachPuff", ColorCode = 0xFFFFDAB9},
         new Color{ColorName = "Peru", ColorCode = 0xFFCD853F},
         new Color{ColorName = "Pink", ColorCode = 0xFFFFC0CB},
         new Color{ColorName = "Plum", ColorCode = 0xFFDDA0DD},
         new Color{ColorName = "PowderBlue", ColorCode = 0xFFB0E0E6},
         new Color{ColorName = "Purple", ColorCode = 0xFF800080},
         new Color{ColorName = "Red", ColorCode = 0xFFFF0000},
         new Color{ColorName = "RosyBrown", ColorCode = 0xFFBC8F8F},
         new Color{ColorName = "RoyalBlue", ColorCode = 0xFF4169E1},
         new Color{ColorName = "SaddleBrown", ColorCode = 0xFF8B4513},
         new Color{ColorName = "Salmon", ColorCode = 0xFFFA8072},
         new Color{ColorName = "SandyBrown", ColorCode = 0xFFF4A460},
         new Color{ColorName = "SeaGreen", ColorCode = 0xFF2E8B57},
         new Color{ColorName = "SeaShell", ColorCode = 0xFFFFF5EE},
         new Color{ColorName = "Sienna", ColorCode = 0xFFA0522D},
         new Color{ColorName = "Silver", ColorCode = 0xFFC0C0C0},
         new Color{ColorName = "SkyBlue", ColorCode = 0xFF87CEEB},
         new Color{ColorName = "SlateBlue", ColorCode = 0xFF6A5ACD},
         new Color{ColorName = "SlateGray", ColorCode = 0xFF708090},
         new Color{ColorName = "Snow", ColorCode = 0xFFFFFAFA},
         new Color{ColorName = "SpringGreen", ColorCode = 0xFF00FF7F},
         new Color{ColorName = "SteelBlue", ColorCode = 0xFF4682B4},
         new Color{ColorName = "Tan", ColorCode = 0xFFD2B48C},
         new Color{ColorName = "Teal", ColorCode = 0xFF008080},
         new Color{ColorName = "Thistle", ColorCode = 0xFFD8BFD8},
         new Color{ColorName = "Tomato", ColorCode = 0xFFFF6347},
         new Color{ColorName = "Transparent", ColorCode = 0x00FFFFFF},
         new Color{ColorName = "Turquoise", ColorCode = 0xFF40E0D0},
         new Color{ColorName = "Violet", ColorCode = 0xFFEE82EE},
         new Color{ColorName = "Wheat", ColorCode = 0xFFF5DEB3},
         new Color{ColorName = "White", ColorCode = 0xFFFFFFFF},
         new Color{ColorName = "WhiteSmoke", ColorCode = 0xFFF5F5F5},
         new Color{ColorName = "Yellow", ColorCode = 0xFFFFFF00},
         new Color{ColorName = "YellowGreen", ColorCode = 0xFF9ACD32}
       };
 }
  public List<Color> PredefinedColors { get; set; }
}

 

This gave me a list of all predefined colors. Here is a partial screenshot.

image

 

I thought it would be nice if I could filter colors by name. Surely this will make my life easy. So I added few controls for filtering and refactored my C# code.

 

<StackPanel Orientation="Horizontal" Margin="7">
  <TextBlock
    Margin="7"
    VerticalAlignment="Center"
    Text="Color Name" />
  <TextBox x:Name="txtColorName"
    Margin="7"
    Width="200"
    TextChanged="txtColorName_TextChanged" />
</StackPanel>

<TextBlock x:Name="txtCount"
    Margin="7" />

And here is my refactored C# code.

private AllColorsHelper helper = new AllColorsHelper();

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
  DisplayColors(helper.PredefinedColors);
}

private void txtColorName_TextChanged(object sender, TextChangedEventArgs e)
{
  string filterCriteria = txtColorName.Text.Trim().ToLower();

  if (!string.IsNullOrEmpty(filterCriteria))
  {
    var query = from c in helper.PredefinedColors
       where c.ColorName.ToLower().StartsWith(filterCriteria)
       select c;
    DisplayColors(query);
  }
  else
    DisplayColors(helper.PredefinedColors);
}

private void DisplayColors(IEnumerable<Color> colorCollection)
{
  lstColors.ItemsSource = colorCollection;

  txtCount.Text =
    string.Format("Now displaying {0} colors", colorCollection.Count());
}

I now had filtering available in my application

image

Thus the features set of my application was implemented. But there was something missing. It did not look very Silverlight / XAMAL-ish. And that ground was easily covered by applying styles. Here is my final XAML.

<UserControl x:Class="AllColors.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="UserControl_Loaded">
  <!--Start Main Container-->
  <StackPanel x:Name="LayoutRoot" Background="White">
    <!--Start Resources-->
    <StackPanel.Resources>
      <Style x:Key="TextBlockStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Verdana" />
        <Setter Property="FontSize" Value="18" />
      </Style>

      <DataTemplate x:Key="ColorsTemplate">
        <StackPanel Margin="10" Orientation="Horizontal">
          <TextBlock
            Style="{StaticResource TextBlockStyle}"
            Margin="5"
            Width="200"
            VerticalAlignment="Center"
            Text="{Binding Path=ColorName}" />
            <Rectangle
              Margin="5"
              Width="300"
              VerticalAlignment="Center"
              HorizontalAlignment="Center"
              Height="50"
              Fill="{Binding Path=ColorName}" />
        </StackPanel>
      </DataTemplate>
    </StackPanel.Resources>
    <!--End Resources-->

    <!--Start Filter Area-->
    <StackPanel Orientation="Horizontal" Margin="7">
      <StackPanel.Background>
        <LinearGradientBrush>
          <GradientStop Color="LightSkyBlue" Offset="0.1" />
          <GradientStop Color="LightBlue" Offset="0.5" />
        </LinearGradientBrush>
      </StackPanel.Background>
      <TextBlock
        Style="{StaticResource TextBlockStyle}"
        Margin="7"
        VerticalAlignment="Center"
        Text="Color Name" />
      <TextBox x:Name="txtColorName"
        Margin="7"
        Width="200"
        TextChanged="txtColorName_TextChanged" />
    </StackPanel>
    <!--End Filter Area-->

    <!--Start Results Area-->
    <Border
      Margin="5"
      CornerRadius="20"
      Background="LightGray"
      BorderThickness="2" >
      <StackPanel>
        <TextBlock x:Name="txtCount"
          Style="{StaticResource TextBlockStyle}"
          Margin="20,10,0,0" />
        <ListBox x:Name="lstColors"
          Margin="20"
          Height="400"
          ItemTemplate="{StaticResource ColorsTemplate}"
          ScrollViewer.VerticalScrollBarVisibility="Visible" />
      </StackPanel>
    </Border>
    <!--End Results Area-->

  </StackPanel>
  <!--End Main Container-->
</UserControl>

 

And once again a screenshot of the finished product.

image

So writing a Siverlight application which displays all predefined colors was not hard at all, and I used Silverlight features like Styles, DataTemplate, Resources and Data Binding. So now that I can quickly see what those colors look like, I’m off to learn how to match them properly.

Tagged with:
 

Silverlight Wrap Panel

On June 28, 2009 · Leave a Comment

Wrap panel in Silverlight is missing out of the box, but this need is fulfilled by Silverlight Toolkit which also includes many other controls. In this post we will look at WrapPanel. I will show you how to use it and what it is used for.

To use wrap panel you have to install Silverlight Toolkit. Once installed, you will need to add a reference to Silverlight.Windows.Controls.Toolkit

 Silverlight.Windows.Controls.Toolkit

And you can now use the WrapPanel. In the XAML below you can see that the main container of my user control is a WrapPanel.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <controls:WrapPanel x:Name="LayoutRoot" Background="White">

  </controls:WrapPanel>
</UserControl>

 

WrapPanel as the name says will wrap controls. Any controls which cannot fit on the first line will be wrapped to next line and so forth. Here is a demo.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300" Background="CornflowerBlue">
  <controls:WrapPanel x:Name="LayoutRoot" Background="Honeydew">
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkRed" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkOrchid" />
  </controls:WrapPanel>
</UserControl>

 

 WrapPanel

If I reduce the width of UserControl you can see that WrapPanel automatically wraps controls placed inside the container.

<UserControl
xmlns:controls=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
  x:Class="SilverlightWrapPanelDemo.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="350" Height="300" Background="CornflowerBlue">
  <controls:WrapPanel x:Name="LayoutRoot" Background="Honeydew">
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkRed" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkGoldenrod" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkSeaGreen" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DodgerBlue" />
    <Rectangle Margin="5" Width="70" Height="70" Fill="DarkOrchid" />
  </controls:WrapPanel>
</UserControl>

 WrapPanel

Tagged with:
 

Silverlight Canvas Panel

On June 25, 2009 · Leave a Comment

Panels are basic layout mechanism in both Silverlight and WPF. They act as containers for other controls and each panel provides a different way of laying out controls on the screen. In this post we will look at Canvas Panel in Silverlight. Canvas allows us to put controls based on x and y  coordinates. This gives us precise control over where our UI elements e.g buttons, text boxes etc. are placed.

In this example we can see that different ellipses are placed on the canvas using x and y coordinates. 

<Canvas x:Name="LayoutRoot" Background="LightGoldenrodYellow">
  <Ellipse Height="50" Width="50" Fill="Coral" 
    Canvas.Left="20" Canvas.Top="20" />
  <Ellipse Height="50" Width="50" Fill="Red" 
    Canvas.Left="70" Canvas.Top="70" />
  <Ellipse Height="50" Width="50" Fill="Pink" 
    Canvas.Left="120" Canvas.Top="120" />
  <Ellipse Height="50" Width="50" Fill="Purple" 
    Canvas.Left="170" Canvas.Top="170" />
  <Ellipse Height="50" Width="50" Fill="RoyalBlue" 
    Canvas.Left="220" Canvas.Top="220" />
</Canvas>

 

Canvas Panel

Tagged with:
 

Request Error In ADO.NET Data Services

On June 16, 2009 · Leave a Comment

When creating a new ADO.NET Data Service you may find yourself with this error.

ServiceErrorCapture

Don’t call it quits on ADO.NET Data Services because of this error. It is very easy to fix. Have a close look at the code generated by Visual Studio for you.

image

Here the code calls SetEntitySetAccessRule on “MyEntitySet” but most likely your entity set is not called “MyEntitySet”. Similarly the second line sets operation access rule again on “MyServiceOperation” and you may want to set access rules on your operations. If you want to include all operations and all entity sets in the two method calls you can simply specify “*” as the value for first parameter.

Tagged with: • •
 

Silverlight ebay Sidebar For Internet Explorer 8

On May 29, 2009 · Leave a Comment

Today I visited ebay for I think the 5th time in my life and I found that they have a new sidebar for Internet Explorer 8. What’s cool about this side bar is that it uses Silverlight.. You can view your active auctions and get information on your bids. A cool addin for ebay users.

image

Link to download ebay Sidebar.

Tagged with: • •
 

Find Unused CSS On A Website

On May 28, 2009 · 1 Comment

During the course of a project we often end up adding elements to style sheets which do not get used. This causes css files to bloat which impacts performance. The best thing to do is to keep track of css elements which are not being used and remove them. This can become a strenuous task especially if you have a large website. But there is a tool which can be used to find unused css. The tool is called Dust-Me Selectors and it is an addon for Firefox.  

Running the tool on One .Net Way gives me this result. There are 131 selectors which are not being used at present. This should however be taken as a starting point for clean up. You must always manually check if css is being used in client side scripts or server side code.

image

Download link for Dust-Me Selectors.

Tagged with: • • •