How to Bind Grid to a DataSource in Windows Phone using C#

How to Data Bind an Object to ListBox Control using C#.NET / Data Templates in C# Windows Phone Application

My director friend Kee Ran was pestering for an App that provides a list of Girivalam (a circumambulation) dates for his assistance. Attempted the same using Silverlight Data Template (Listbox) . The original grid as shown below:

 

 

 



It's been quite sometime since we had used a databinding (How to Bind an Object to TextBox)  First things first, let us create a class that will hold this data

public class GirivalamDates

{

public string GirivalamMonth { get; set; }

public string GirivalamStartDt { get; set; }

public string GirivalamStartTime { get; set; }

public string GirivalamStartDay { get; set; }

public string GirivalamEndDt { get; set; }

public string GirivalamEndTime { get; set; }

public string GirivalamEndDay { get; set; }



}

}

Once the class is created, create some objects of this type and it to a List.

    gDates = new List();
            gDates.Add(new GirivalamDates
            {
                GirivalamMonth = "Mon",
                GirivalamStartDt = "Start",
                GirivalamStartTime = "Date",
                GirivalamStartDay = "   ",
                GirivalamEndDt = "End  ",
                GirivalamEndTime = "Date",
                GirivalamEndDay = "   "
            }); 

Add more to the List and then, create the XAML for the same




 


<StackPanel x:Name="ContentPanel" Margin="12,0" Grid.Row="1">



<ScrollViewer HorizontalScrollBarVisibility="Visible">



<ListBox

Name

="myItemsControl" VerticalAlignment="Top">



<ItemsControl.ItemTemplate>



<DataTemplate>



<Grid>



<Grid.ColumnDefinitions>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



<ColumnDefinition Width="100"/>



</Grid.ColumnDefinitions>









<TextBlock


Grid.Column="0" Text="{Binding GirivalamMonth}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="1" Text="{Binding GirivalamStartDt}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="2" Text="{Binding GirivalamStartTime}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="3" Text="{Binding GirivalamStartDay}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="4" Text="{Binding GirivalamEndDt}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="5" Text="{Binding GirivalamEndTime}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



<TextBlock


Grid.Column="6" Text="{Binding GirivalamEndDay}"


FontSize="{StaticResource PhoneFontSizeMedium}"


/>



</Grid>



</DataTemplate>



</ItemsControl.ItemTemplate>



</ListBox>

</

ScrollViewer>



</StackPanel>

The TextBlock's Text attribute is bound to the appropriate property of the GirivalamDates class.

Finally bind the ListBox control to the gDates object.

myItemsControl.ItemsSource = gDates;

How to Load Image On The Fly using C#.NET on Windows Phone Content Control

How to Load Image (PNG/JPG/BitMap) On The Fly using C#.NET on Windows Phone Content Control
How to add Controls to Phone Page in RunTime



There are many times you want to load the Image through code instead of the design time. The following snippet allows you to assign an Image available in the Project to the content control.

public void LoadImage()
        {
            string sFilePath = "/Images/Thiruvanamalai BackGround.png";

            Uri uriImage = new Uri(sFilePath,UriKind.Relative );
            Image  imgBackGrnd = new Image();
            imgBackGrnd.Source = new BitmapImage(uriImage);
            
            imgBackGrnd.Height = 200; //Set the Height and Width of the Image
            imgBackGrnd.Width = 200;
            imgBackGrnd.Stretch = Stretch.Fill; 
            ContentPanel.Children.Add(imgBackGrnd);

        }

Assigning Relative Path of URL

The code below assigns the Path of the Image, UriKind implies if it is relative / absolute

Uri uriImage = new Uri(sFilePath,UriKind.Relative );


The assigned image is shown below:

 

 

See also:

 

Visual Studio 2008 Image Library

 

How to Add Images to Project Resources in C#/.NET / How to Add Resources to C# Windows Application

 

Create HTML Message with Embedded Images in VB.NET / Embed images in HTML mail message using VB.NET

 

How to Add App, BackGround and SplashScreen Images to Windows Phone

 

Get Stored Images from Clipboard using VB.NET

 

 

How to Add App, BackGround and SplashScreen Images to Windows Phone

C# - Add Title and Tile images to Windows Phone


Windows Phone primary contains the following Application images

Application - This image is shown as Icon for Application
BackGround - This will be used in Tile
SplashScreen - This image will be shown during loading of the application

The images for Application and Background can be set from Properties Dialog:

The Size of the images are

Application - 62    X  62
Background - 173 X  173
SplashScreen - 480 X 800 (should be JPG)

The default Star Icon will be added to the project automatically from Visual Studio