July 30, 2011

C# - Container Controls 5 - FlowLayoutPanel Control Container

1. Introduction to FlowLayout

"Flow Layout Panel container" arranges the controls in specific pre-defined orders. When the Container holding the control is resized the controls are automatically arranged inside the container to maintain the flow specified.

In this example, we will place some controls inside the flow layout container and see some important properties and methods that control the container content.

2. About the sample

The screen shot of the example is shown below:

In the topside of the form, you can see four text boxes and two radio buttons placed inside the "Flow Container". In the bottom, there are two radio groups. "Flow Break" radio group is nested inside the Control radio group. In the bottom of the form, there are two check boxes.

"Flow Direction," tells in what direction the controls should be arranged. Say for example Top to Bottom radio button option arranges the control to fill the height the container and move to the next column to layout the controls from top to bottom.

Flow Break is useful for overriding the default control flow break. Let us say the direction is Left to Right and you are started placing the control the Flow container. The controls you place is allowed only in the current row. But, you can place anywhere in the current row. When there is no room in the current row based on the size of the flow container, the control goes and sits on the next row. This is what called a break. And this happens when the Wrap Controls check box is in the checked state. So in the sample, an option to break the flow of the control is provided by selecting the control. When the Break Flow By green textbox is selected the next controls in the flow will move to the next row.

Enable Auto Scroll check box provides a scroll bar and allows the existence of only one row or one column of controls by adding a scroll bar. The Wrap control allows control to be arranged in the next row or next column based on the flow direction set to the container.

OK Now let us go to the Sample implementation details.

3. Flow Layout and Placing the Controls

The "FlowLayoutPanel" control is placed in the form and the control is available in the container group of the toolbox. After placing the FlowLayoutPanel four text boxes and two radio buttons are dropped inside it. When placing the control inside this container dot net restricts you place it in the first row of the container. And it will produce one more row when the there is no room in the first row for the control coming new.

This is shown in the video: 01_FlowLayoutAddingControls.avi

4. Dock the Flow Layout to Top

The controls are already placed inside the FlowLayoutPanel container. Now select the Panel and then from the dock property choose the top button. This will dock the Container in the top edge of the form. Now, when you resize the form, the container also gets resized. Since the framework takes care of the layout of the controls inside the container, the resize will automatically arrange the controls.

Setting the top Docking for the flow layout is shown in the video: 02_Dockittotop.avi

5. AutoScroll and WrapContents Properties

The "AutoScroll" and "WrapContents" properties are used to change the way controls are laid out inside the FlowLayoutPanel. When we set AutoScroll property to true, the controls will be arranged in a single row and a scroll bar appears so that you can see all the controls by scrolling the content of the FlowLayoutPanel. When you set WrapContents property to true the controls wrapped into the next line when there is no room in the first line. Also, you can check this by resizing the window.

Note that these two properties in combination may make some confusion. So remember that when AutoScroll is already set to true, WrapContents property has no effect whether it is set to true or not. Similarly, when the WrapContents property is already set to true, setting the autoscroll property to true has no effect. Hence, before setting one property to true, make sure the another one is set to false. In the sample, I intentionally do not keep this validation, so that you can see how these check boxes in combination behave.

The event CheckedChanged for both the checkboxes are handled and the code is shown below:

private void checkBox1_CheckedChanged(object sender, EventArgs e)
    //Flow 01: Wrap Controls. The default is True
    if (checkBox1.CheckState == CheckState.Checked)
        FlowLayoutCC.WrapContents  = true;
        FlowLayoutCC.WrapContents = false;

private void checkBox2_CheckedChanged(object sender, EventArgs e)
    //Flow 02: Enable or Disable the AutoScroll
    if (checkBox2.CheckState == CheckState.Checked )
        FlowLayoutCC.AutoScroll = true;
        FlowLayoutCC.AutoScroll = false;

The above code in effect is shown in the video: 03_WrapAutoScroll.avi

6. Flow Direction

The control flow direction inside the FlowLayoutPanel is controlled by the "FlowDirection Property" of it. At runtime, the FlowDirection enumeration is used to assign the correct flow directions to this property. In this example I shown you only two flow directions. Below is the code for it:

//Flow 03: Set the Flow Direction       
private void radLR_CheckedChanged(object sender, EventArgs e)
    if ( radLR.Checked == true)
        FlowLayoutCC.FlowDirection = FlowDirection.LeftToRight;

private void radTB_CheckedChanged(object sender, EventArgs e)
    if (radTB.Checked == true)
        FlowLayoutCC.FlowDirection = FlowDirection.TopDown;

The above code in effect is shown in the video: 04_FlowDirection.avi

7. Flow Break

When the wrapcontents property is set to true the control placement flow is automatically braked to the next line or next column when there is no space. It actually works like a word processor and how it breaks the word to the next line. With the "SetFlowBreak()" method of the FlowLayoutPanel, you can force the container to do a flow break by specifying the control name and then specifying a Boolean value that says a break is required or not.

Below is the code to explain the flow break. The code is a handler for the Checked Changed event of the radio button that corresponds to the Flow break.

//Flow 04: Set Flow Break (Like Page break)
private void radGreenText_CheckedChanged(object sender, EventArgs e)
    if (radGreenText.Checked == true)
        FlowLayoutCC.SetFlowBreak(GreenText, true);
        FlowLayoutCC.SetFlowBreak(GreenText, false);

private void radBreakRad_CheckedChanged(object sender, EventArgs e)
    if (radBreakRad.Checked == true)
        FlowLayoutCC.SetFlowBreak(radWrap, true);
        FlowLayoutCC.SetFlowBreak(radWrap, false);

The above code in effect is shown in the video: 05_FlowBreak.avi

Source Code & Video Demos: Download

Note: The Attached Sample is in VS2005 format. Use 7zip to extract all the videos. 7zip is free and you can download it taking help from google.

July 19, 2011

ASP.Net - AdRotator Control, AdvertisementFile and AdType Filter

1. Introduction

AdRotator control is useful for displaying the advertisements. This control acts as a placeholder for the image and the image is actually a link to the advertised website. So when an image displayed by the AdRotator control is clicked, the user will navigate to the link that corresponds to that advertised image.

To use AdRotator images to the external sites to be created. Then an XML file tells the AdRotator which site should be navigated when the image is clicked.

2. About the Sample

The sample two pages. The main page has a link to the Content page and content page has a Go Back link to the main page. The content page is a copy paste about Mahatma Gandhi taken from the wiki page. This page has two AdRotator controls. Have a look at the below illustration:

Ad Banner and Advertisement Info XML file

The main page navigates to the content page and the content back page navigates back to the main page through a link provided in the pages. The content page displays the advertisement using the AdRotator control. The AdvertisementFile property of the Adrotator control looks for the XML file, which educates the control about the advertisement details.

The below screen shot shows the main page:

Clicking the “Here” hyperlink will navigate you through the content page. The screen shot of the content page is below:

This page has the Go Back link and the link will bring you to the Main page. The page has information about the Gandhi and it displays two advertisements above and below the Gandhi’s pictures.  The XML file set to the AdvertisementFile property displays the advertisements selectively. Each time you come to the page same or different advertisement is displayed in the advertisement control.

3. Images for the Ads

First, the banners are created for this sample by visiting the site and taking a screen shot. These images are used as ad banners and placed in the folder (Created) AdImages. Then all the images are added to the ASP.net project using the Add item content menu.

4. The XML file

The XML file supplies the advertisement banner, the link to navigate and the probability of displaying the Ads. Each time the page that contains the AdRotator control loads a new advertisement (Or the same based on Ad weight). Below is the XML file and each Ad tag give information about the single Advertisement:

5. Filtering Specific Ads

Keyword tag in the above XML file is useful to filter the specific type of the advertisement. The above image shows Single advertisement and belongs to the keyword (Ad Type. You can take that) Beauty. The file has 4 more Advertisement in it. And there are two groups. One is Beauty and another one is Educational. We have two Adrotator control in the content page, one at the top and another one at the bottom of the GandhiJi’s Image. The top one does not do any filtering for the advertisement. Bottom one displays only the Educational Advertisement.

The page load event is handled for the Content page and an advertisement type filter is set to the second AdRotator control in it. The code is simple as it just setting the Keyword filter property for the AdRotator2 control. Below is the code for it:

//AdRotator 01: Filter only Education ads, for Second AdRotator
protected void Page_Load(object sender, EventArgs e)
    AdRotator2.KeywordFilter = "Educational";

6. How Do I open the Attached Project?

1) Download the attached zip file
2) Extract it to a folder
3) Open visual studio 2005
4) Click the menu item File|Open|Web site
5) Select the Extracted Folder

Source Code : Download

Note: The Attached solution is created in visual studio 2005. If you have the latest version say yes to the conversion wizard

July 4, 2011

C# - Container Controls 4 - Tab Control

1. Introduction to TabControls

"TabControl" is a collection of Tab pages. Each tab page can act as a separate container. And we all know that a container can hold controls in it. The simple explanation for Tab Container is, a container, which can hold N number of containers in the form of book pages. The tab control is useful to group the controls based on the information they give or receive. Say for example, in the credit card transaction screen, the personal information can be kept in one tab page, and the actual card details and the amount of transaction can be kept on another page. In most cases, people usually go for the tab control when the form is not enough to fit all the controls.

Here we will see how do we use the tab container, then we will add some tab pages dynamically. Finally, we will explore some important property for this control.

2. Place the Tab Container

From the toolbox under the container groups, Tab control is available. Drag and Drop the tab control to the Form. Once the control is placed on the form, you will see some default tab pages. To control the property of the tab pages, first select the required tab page by switching the tabs and then click inside page area to select the page. Once a page is selected, you can set the properties for the page. Note, as already told a page is a container so the property you set (say for example the Font) the page is inherited by all the controls placed on that page. Have a look at the Group Box example, which is a basic article on the containers.

Video: 01_PlaceTab.avi: Shows placing a tab control on the form and moving a positioning the control to the required location.

3. Adding tab pages

Once the TabControl is placed in the form, in top right corner, click on the arrow that is pointing right side. Clicking that small arrow will bring a pull-down menu and from there you can choose an add tab link to add tab pages to the control. The add page acts like dialog, so you can place the control in side the tab pages. When you switch between the tabs, you can see the controls that belong to the tab pages.

You can also add or remove the tab pages using the "TabPages property" of the TabControl. Clicking on the ellipsis button on the value side of this property will bring up a new dialog and you can add remove property from that dialog itself.

Video: 02_AddPages.avi: Shows ways to adding tab pages to the TabControl

Video: 03_PlaceControls.avi: Shows placing the controls in the pages

4. About the Sample

Have a look at the below screen shot:

The form initially has four tabs in it. And each tab is accommodating one control in it. Keep Tab Left checkbox will move the tabs to the left when it is checked. The radio buttons adjust the style of the tabs. Multiline Tabs checkbox keeps the tabs in multiple rows. In the above screen, you see only four tabs, imagine that you have 20 tabs like it. Now, when we check the Multiline tabs, all 20 tabs arranged in multiple rows. When we uncheck, an arrow will appear on the top so that you can scroll the tabs horizontally. The Add Tab Button will add a tab with the name given in the text box.

5. Programming Tab Control

1) The add tab button click event first creates a text box. Then the text property of the text box is set after deciding the location and the size of it. Then a tab page is created using the "TabPage class". The name for the tab page is passed to the constructor by reading the text entered by the user in the text field. Finally, the tab page is added to the "Tab Control" using the add method of the "TabPages Collection". Below is the code for it:

private void btnTabAdd_Click(object sender, EventArgs e)
    //Tab 001 : Create a Text box to place it in the Tab Page
    TextBox txt = new TextBox();
    txt.Size = new Size(250, 30);
    txt.Location = new Point(20, 20);
    txt.Text = "Added to Page";

    //Tab 002 : Create a Tab Page and Add the text box to the Page
    if (txtTabName.Text == "")
        txtTabName.Text = "Empty";
    TabPage page = new TabPage(txtTabName.Text);

    //Tab 003: Now add the Tab page with text box to tab control

2) The "Alignment Property" of the tab control is useful to keep the tab on any possible four edges of the tab control. Here, when you place a check mark on the Keep Tab Left, I am using the alignment property to set the tab pages on the left side of the tab control. At runtime, "TabAlignment Enumeration" is used to set the required alignment constant to the alignment property. Below is the code:

private void chkLeftTab_CheckedChanged(object sender, EventArgs e)
    //Tab 004: Change the Tab alignment based on the Checkbox state
    if (chkLeftTab.Checked == true)
        tabControl1.Alignment = TabAlignment.Left;
        radNormal.Enabled = false;
        radButton.Enabled = false;
        radFlat.Enabled = false;
        tabControl1.Alignment = TabAlignment.Top;
        radNormal.Enabled = true;
        radButton.Enabled = true;
        radFlat.Enabled = true;

3) The "Appearance Property" is useful to set the button style of the tabs. The "TabAppearance Enumeration" defines the constants required for this property. Try with the sample with three tab button styles in combination with Multiline and Left side tab option.

//Tab 005: Set the Tab look and Feel
private void radNormal_CheckedChanged(object sender, EventArgs e)
    if (radNormal.Checked == true)
        tabControl1.Appearance = TabAppearance.Normal;
private void radButton_CheckedChanged(object sender, EventArgs e)
    if (radButton.Checked == true)
        tabControl1.Appearance = TabAppearance.Buttons;
private void radFlat_CheckedChanged(object sender, EventArgs e)
    if (radFlat.Checked == true)
        tabControl1.Appearance = TabAppearance.FlatButtons;

4) Finally, "Multiline Property" is set when the corresponding checkbox is checked. As already told this property allows the tab pages goes into multiple pages instead of providing the arrows at the right end of the control. Below is the code for it:

private void chkTabMulti_CheckedChanged(object sender, EventArgs e)
    //Tab 006: Allow to display the tabs in Multiple rows
    if (chkTabMulti.Checked == true)
        tabControl1.Multiline = true;
        tabControl1.Multiline = false;

Source Code & Video : Download

Note : The sample is created using the VS2005 IDE. Attached Zip file has the Sample and the videos specified in the Articles. 

Like this site? Tell it to your Friend :)