Sunday, 6 June 2010
Thursday, 13 May 2010
Simple Preferred time control using Silverlight.
Here I am going to show you a simple preferred time control, where you can select the day of the week and the time of the day. This can be used in lots of place where you may need to display the users preferred times. Sample screenshot is attached below.
This control is developed using Silverlight 3 and VS2008, I am also attaching the source code with this post. This is a very basic example. You can download and customize if further for your requirement if you want.
I am trying to explain in few words how this control works and what are the different ways in which you can customize it further.
File: PreferredTimeControl.xaml, in this file I have just hardcoded the controls and their positions which you can see in the screenshot above. In this example, to change the start day of the week and time, you will have to go and change the design in XAML file, its not controlled by your properties or implementation classes. You can also customize it to change the start day of the week, Language, Display format, styles, etc, etc.
File: PreferredTimeControl.xaml.cs, In this control using the code below, first I am taking all the checkbox from my form and store it in the Global Variable, which I can use across my page.
List<CheckBox> checkBoxList;
#region Constructor
public PreferredTimeControl()
{
InitializeComponent();
GetCheckboxes();//Keep all the checkbox in List in the Load itself
}
#endregion
#region Helper Methods
private List<CheckBox> GetCheckboxes()
{
//Get all the CheckBoxes in the Form
checkBoxList = new List<CheckBox>();
foreach (UIElement element in LayoutRoot.Children)
{
if (element.GetType().ToString() == "System.Windows.Controls.CheckBox")
{
checkBoxList.Add(element as CheckBox);
}
}
return checkBoxList;
}
Then I am exposing the two methods which you can use in the container form to get and set the values in this controls.
/// <summary>
/// Set the Availability on the Form, with the Provided Timings
/// </summary>
/// <param name="selectedTimings">Provided timings comes from the DB in the form 11,12,13....37
/// Where 11 refers to Monday Morning, 12 Tuesday Morning, etc
/// Here 1, 2, 3 is for Morning, Afternoon and Evening respectively, and for weekdays
/// 1,2,3,4,5,6,7 where 1 is for Monday, Tuesday, Wednesday, Thrusday, Friday, Saturday and Sunday respectively
/// So if we want Monday Morning, we can can denote it as 11, similarly for Saturday Evening we can write 36, etc
/// </param>
public void SetAvailibility(string selectedTimings)
{
foreach (CheckBox chk in checkBoxList)
{
chk.IsChecked = false;
}
if (!String.IsNullOrEmpty(selectedTimings))
{
string[] selectedString = selectedTimings.Split(',');
foreach (string selected in selectedString)
{
foreach (CheckBox chk in checkBoxList)
{
if (chk.Tag.ToString() == selected)
{
chk.IsChecked = true;
}
}
}
}
}
/// <summary>
/// Gets the Availibility from the selected checkboxes
/// </summary>
/// <returns>String in the format of 11,12,13...41,42...31,32...37</returns>
public string GetAvailibility()
{
string selectedText = string.Empty;
foreach (CheckBox chk in GetCheckboxes())
{
if (chk.IsChecked == true)
{
selectedText = chk.Tag.ToString() + "," + selectedText;
}
}
return selectedText;
}
In my example I am using the matrix format for Day and Time, for example Monday=1, Tuesday=2, Wednesday=3, Thursday = 4, Friday = 5, Saturday = 6, Sunday=7. And Morning = 1, Afternoon =2, Evening = 3. So if I want to represent Morning-Monday I will have to represent it as 11, Afternoon-Tuesday as 22, Morning-Wednesday as 13, etc. And in the other way to set the values in the control I am passing the values in the control in the same format as
preferredTimeControl.SetAvailibility("11,12,13,16,23,22"); So this will set the checkbox value for Morning-Monday, Morning-Tuesday, Morning-Wednesday, Morning-Saturday, Afternoon of Tuesday and Afternoon of Wednesday.
To implement this control, first I have to import this control in xmlns namespace as
xmlns:controls="clr-namespace:PreferredTimeControlApp"
and finally put in your page wherever you want,
<Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
<Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}">
<controls:PreferredTimeControl x:Name="preferredTimeControl"></controls:PreferredTimeControl>
</Border>
</Grid>
And in the code behind you can just include this code:
private void InitializeControl()
{
preferredTimeControl.SetAvailibility("11,12,13,16,23,22");
}
And you are ready to go. For more details you can refer to my code attached.
I know there can be even simpler and better way to do this. Let me know if any other ideas.
Sorry, Guys Still I have used Silverlight 3 and VS2008, as from the system I am uploading this is still not upgraded, but still you can use the same code with Silverlight 4 and VS2010 without any changes. May be just it will ask you to upgrade your project which will take care of rest. You can also refer to a better formatted version of this post here.
Thanks
~Brij
Wednesday, 31 March 2010
List of Software and Tips, to Prepare your new System (Only for MS Silverlight Dev)
I was planning to format my system and upgrade to latest OS and Software’s. I am left out with only 15GB HDD Space, don’t know where other 135 GB Vanished. It usually happens in long term with registry size and other unwanted files we keep accumulating.
Particularly I was not searching for anything in Internet as I know what exactly I need from my new setups, but accidently I got a nice link which gave me an extensive links and lists of very good software’s which I can install in my latest setups. I thought to save this list in my bookmarks as well as share with you guys too.
Interesting thing is I was never expecting like in this blog I can also get something related to hardware related stuffs, Specially this is one of my favorite blog where I usually look out for my Silverlight Codes and other programming related stuffs.
Hope this helps !!!
Saturday, 1 August 2009
Silverlight 3 DataGrid Columns Grouping using PagedCollectionView
In this post I am showing how to implement Column Grouping in SIlverlight 3 DataGrid,
Before starting make sure you have SIlverlight3_Tools installed in your system, not SIlverlight 3 Beta, as there are lost of changes in Grouping of Columns from SIlverlight 3 Beta to Silverlight 3 RTW.
You can follow the few simple steps below to get the Grouping for your Silverlight 3 DataGrid.
Else you can also download the code demonstrated from here.
1. Create an Silverlight Application using you Visual Studio 2008 IDE, and add a hosting web application in the project.
2. Once you have done with this, you will get an two projects in your Solution, you need to code only in your silverlight project.
3. Now add a C# class file called Person.cs in your Silverlight Project. This class is used to provide some sample data to Silverlight DataGrid, you can change this to your other datasources like SQL, XML, etc.
I have added the following lines of code in Person.cs
1: public class Person
2: {3: public string FirstName { get; set; }
4: public string LastName { get; set; }
5: public string City { get; set; }
6: public string Country { get; set; }
7: public int Age { get; set; }
8: 9: public List<Person> GetPersons()
10: {11: List<Person> persons = new List<Person>
12: {13: new Person
14: { 15: Age=32, 16: City="Bangalore",
17: Country="India",
18: FirstName="Brij",
19: LastName="Mohan"
20: },21: new Person
22: { 23: Age=32, 24: City="Bangalore",
25: Country="India",
26: FirstName="Arun",
27: LastName="Dayal"
28: },29: new Person
30: { 31: Age=38, 32: City="Bangalore",
33: Country="India",
34: FirstName="Dave",
35: LastName="Marchant"
36: },37: new Person
38: { 39: Age=38,40: City="Northampton",
41: Country="United Kingdom",
42: FirstName="Henryk",
43: LastName="S"
44: },45: new Person
46: { 47: Age=40, 48: City="Northampton",
49: Country="United Kingdom",
50: FirstName="Alton",
51: LastName="B"
52: },53: new Person
54: { 55: Age=28, 56: City="Birmingham",
57: Country="United Kingdom",
58: FirstName="Anup",
59: LastName="J"
60: },61: new Person
62: { 63: Age=27,64: City="Jamshedpur",
65: Country="India",
66: FirstName="Sunita",
67: LastName="Mohan"
68: },69: new Person
70: { 71: Age=2, 72: City="Bangalore",
73: Country="India",
74: FirstName="Shristi",
75: LastName="Dayal"
76: } 77: }; 78: 79: return persons;
80: } 81: }
4. Now since my data is ready, I will add the DataGrid control in my XAML page, to make the presentation more attractive, I have added few more lines of code.
5. I have also added a ComboBox Control to Select the Grouping Columns name.
My XAML code will look something like this below.
1: <UserControl
2: xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
3: x:Class="Silverlight3DataGrid.MainPage"
4: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8: mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9: <Grid x:Name="LayoutRoot">
10: <Grid.RowDefinitions>
11: <RowDefinition Height="0.154*"/>
12: <RowDefinition Height="0.483*"/>
13: <RowDefinition Height="0.362*"/>
14: </Grid.RowDefinitions>
15: 16: <StackPanel Orientation="Horizontal">
17: <TextBlock Text="Select Sort Criteria"
18: VerticalAlignment="Center" />
19: 20: <TextBlock Text=" " />
21: 22: <ComboBox Grid.Row="0"
23: HorizontalAlignment="Left"
24: Width="200"
25: Height="30" x:Name="SortCombo"
26: SelectionChanged="SortCombo_SelectionChanged">
27: 28: <ComboBoxItem Content="Country" ></ComboBoxItem>
29: <ComboBoxItem Content="City" ></ComboBoxItem>
30: <ComboBoxItem Content="Age" ></ComboBoxItem>
31: </ComboBox>
32: </StackPanel>
33: 34: <data:DataGrid x:Name="PersonGrid" Grid.Row="1"></data:DataGrid>
35: 36: </Grid>
37: </UserControl>
6. Now as my Data and Presentation is ready, its time for me to write some lines of code to Retrieve my sample data, group them into columns and then Bind it to the Grid.
Please find below the rest of the Code which demonstrates how I have Grouped the Columns using PagedCollectionView and PropertyGroupDescription.
1: public partial class MainPage : UserControl
2: { 3: PagedCollectionView collection; 4: 5: public MainPage()
6: { 7: InitializeComponent(); 8: BindGrid(); 9: } 10: 11: private void BindGrid()
12: {13: Person person = new Person();
14: PersonGrid.ItemsSource = null;
15: List<Person> persons = person.GetPersons();16: collection = new PagedCollectionView(persons);
17: collection.GroupDescriptions.Add(new
18: PropertyGroupDescription("Country"));
19: 20: PersonGrid.ItemsSource = collection; 21: } 22: 23: private void SortCombo_SelectionChanged(object sender,
24: SelectionChangedEventArgs e) 25: {26: ComboBoxItem person = SortCombo.SelectedItem as ComboBoxItem;
27: collection.GroupDescriptions.Clear();28: collection.GroupDescriptions.Add(new
29: PropertyGroupDescription(person.Content.ToString())); 30: 31: PersonGrid.ItemsSource = null;
32: PersonGrid.ItemsSource = collection; 33: } 34: }
Yes its that simple, and its done. I know I have not given much description here, because nothing much to explain here. In the code above I am loading the Grid with my sample data coming from my Person class and default grouping the Person with Country.
Later on SortCombo_SelectionChanged, I am dynamically fetching the Selected column names from the ComboBox and Sorting on that.
Once you will run this application the screen will look something like this as given below.
Grouped by Country
Grouped by City
Grouped by Age
You can group according to your requirement, like Grouping Active and Deleted items, etc.
You can also download the sample code from here.
I know the code here is not very well formatted, you can also refer the following location for the more better formatted version.
Silverlight 3 DataGrid Columns Grouping using PagedCollectionView
Cheers
~Brij