First 3 WPF videos, start your learning

I will give you a WPF videos series. If you watch each then you do start your career with WPF. Through WPF videos, you can design light weight application. Let's start step by step. In first video you learn about basics of WPF projects, let's see

In this video, I will teach you many more things about WPF start like

1. How to start Visual Studio for WPF application.
2. Create new project for WPF, select C# language in left pane, select WPF application in middle pane.
3. First-page name of the default window is MainWindow.xaml. It contains default WPF Grid control.
4. Add a TextBlock with Text property inside WPF grid.
5. Learn, How to run WPF application.

Now, come to next video of WPF videos series. First of all, I will teach you about WPF panels. So, here, I share you a video of stack panel.

Check it, what is inside. Drag WPF stack panel control from ToolBox, drop it in Window. When we add it in Window then XAML automatically update with stack panel code. Here, we have HorizontalAlignment=left, Height="100", width="100", verticalAlignement="Top".  You can resize it by all corners using design window. Now, you can add buttons and other controls inside stack panel. A button control has content property, which is used as a label. By using orientation property, we can set controls alignment either horizontally and vertically. By using this video also, I explain you, how to add image in stack panel. Stack panel contains another stack panel. Now, come to next video of WPF videos series.

Grid panel is also a container. It has two things that are RowDefinition and ColumnDefinition. WPF grid is the most popular control in presentation foundation. By using this, we can add controls in it a specific cell  of Rows and columns. If, your controls are outside from grid then you can place it in WPF Grid, watch this video and learn, how to place control inside WPF Grid.

WPF Listview items with images

WPF ListView is a container of other single controls. I mean to say that you can put other single control in it. Other controls considered as a Listview item. You can put only simple single string or control like TextBlock. Lets to check the demo of this line.

1:     <ListView>  
2:        <ListViewItem>  
3:          <TextBlock Text="Fruits"/>  
4:        </ListViewItem>  
5:        <ListViewItem>  
6:          Vegetables  
7:        </ListViewItem>  
8:      </ListView>  

In this code, we have both string as well control. You can take other containers in it like StackPanel etc. as a ListView Item. In previous example, i taken Gridview control as view of Listview. Now, i will take image with Text in it as a single WPF Listview item.

1:  <ListView>  
2:        <ListViewItem>  
3:          <StackPanel Orientation="Horizontal">  
4:            <Image Source="apple.png"/>  
5:            <TextBlock Text="Apple"/>  
6:          </StackPanel>         
7:        </ListViewItem>  
8:        <ListViewItem>  
9:          <StackPanel Orientation="Horizontal">  
10:            <Image Source="mango.png"/>  
11:            <TextBlock Text="mango"/>  
12:          </StackPanel>  
13:        </ListViewItem>  
14:        <ListViewItem>  
15:          <StackPanel Orientation="Horizontal">  
16:            <Image Source="grapes.png"/>  
17:            <TextBlock Text="grapes"/>  
18:          </StackPanel>  
19:        </ListViewItem>  
20:      </ListView>  

Copy this code and paste into your WPF window, before doing this, please add three image into your project,. These three images names are apple.png, mango.png and grapes.png.

ASP.NET FILEUPLOAD CONTROL CHANGE BACKGROUND COLOR USING CODE

Each control in ASP.NET ToolBox of visual studio, treat as a class. Property window shows the behavior of their controls also contains some common property, such as back-color, border color etc. Now in this article, we will take a simple example to change the background color of ASP.NET file upload control.

Description
I explained, ASP.NET FILEUPLOAD CONTROL change border color, File upload control enable/disable. 

Source code

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="fileupload_backcolor.aspx.cs" Inherits="fileupload_backcolor" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <title></title>  
 </head>  
 <body>  
   <form id="form1" runat="server">  
   <div>  
     Enter Alpha color :  
     <asp:TextBox ID="TextBox1" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Red Color :  
     <asp:TextBox ID="TextBox2" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Green Color:  
     <asp:TextBox ID="TextBox3" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Blue Color&nbsp;&nbsp; :  
     <asp:TextBox ID="TextBox4" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     <br />  
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Change Fileupload background color" Width="260px" />  
     <br />  
     <br />  
   </div>  
     <asp:FileUpload ID="FileUpload1" runat="server" Height="51px" Width="311px" />  
   </form>  
 </body>  
 </html>  

Code Behind Code

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 public partial class fileupload_backcolor : System.Web.UI.Page  
 {  
   protected void Page_Load(object sender, EventArgs e)  
   {  
   }  
   protected void Button1_Click(object sender, EventArgs e)  
   {  
     int alpha = int.Parse(TextBox1 .Text);  
     int red = int.Parse(TextBox2.Text);  
     int green = int.Parse(TextBox3.Text);  
     int blue = int.Parse(TextBox4.Text);  
     FileUpload1.BackColor = System.Drawing.Color.FromArgb(alpha, red, green, blue);  
   }  
 }  

Code Generate the following output

In this example, we are taking four textboxes, one button, one file upload control. Using text box we can input the color code value and pass these values into the FromArgb ( ) method. This example is basically designed for users, who want to change the color of file upload control at run time.

WPF Listview binding with Gridview cell template using EDMX file

Good evening, welcome to WPF programming. I already explained, how to bind WPF listview from string type list also explained binding it with database table using EDMX file. In this article, I will give you an example of cell template of Gridview, which is inside in WPF Listview. You can say, I will update previous WPF listview article. If you want to customize your Gridview cell in WPF Listview control then use cell template.

Note: Before doing this task, read previous

You need to change only XAML file without any changes in code behind code. The previous XAML code is:

<Grid>   

    <ListView Name="listgrid">   
<ListView.View>  

<GridView>  

       <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}"/>  

       <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Emp_Name}"/>   
</GridView>       
     </ListView.View>     
    </ListView>   

   </Grid>   

Now, replace it with below-mentioned code

<Grid>  

     <ListView Name="listgrid">  
<ListView.View>

 <GridView> 

           <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}"/>   

             <GridViewColumn Header="Name">  

<GridViewColumn.CellTemplate> 

                 <DataTemplate>  

<TextBlock Text="{Binding Emp_Name}" FontWeight="Bold"/>  
</DataTemplate> 

</GridViewColumn.CellTemplate> 

           </GridViewColumn>    
</GridView>          
       </ListView.View>     

   </Grid>  

     </ListView>  

Now, codes generate the following output:

ASP.NET fileupload control change border color Programmatically

Each control in tools of visual studio, treat as a class. Property window shows the behavior of their controls also contains some common property, such as back-color, border color etc. Now in this article, we will take a simple example to change the border color with border style of ASP.NET FILEUPLOAD control. I explained, How to use file upload, enable/disable file upload and many more properties.

Source code

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="fileupload_backcolor.aspx.cs" Inherits="fileupload_backcolor" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <title></title>  
 </head>  
 <body>  
   <form id="form1" runat="server">  
   <div>  
     Enter Alpha color :  
     <asp:TextBox ID="TextBox1" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Red Color :&nbsp;&nbsp;  
     <asp:TextBox ID="TextBox2" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Green Color:  
     <asp:TextBox ID="TextBox3" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     Enter Blue Color&nbsp;&nbsp; :  
     <asp:TextBox ID="TextBox4" runat="server" Width="202px"></asp:TextBox>  
     <br />  
     <br />  
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Change Fileupload background color" Width="260px" />  
     <br />  
     <br />  
   </div>  
     <asp:FileUpload ID="FileUpload1" runat="server" Height="51px" Width="311px" />  
   </form>  
 </body>  
 </html>  

code behind

 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.UI;  
 using System.Web.UI.WebControls;  
 public partial class fileupload_backcolor : System.Web.UI.Page  
 {  
   protected void Page_Load(object sender, EventArgs e)  
   {  
   }  
   protected void Button1_Click(object sender, EventArgs e)  
   {  
     int alpha = int.Parse(TextBox1 .Text);  
     int red = int.Parse(TextBox2.Text);  
     int green = int.Parse(TextBox3.Text);  
     int blue = int.Parse(TextBox4.Text);  
     FileUpload1.BorderColor = System.Drawing.Color.FromArgb(alpha, red, green, blue);  
     FileUpload1.BorderStyle = BorderStyle.Solid;  
     FileUpload1.BorderWidth = 2;  
   }  
 }  

Code Generates the following output

In this example, we are taking four textboxes, one button, one file upload control. Using text box we can input the color code value, pass these values in the FromArgb ( ) method as an argument. This example is basically designed for users, who want to change the border color of ASP.NET FILEUPLOAD control at run time.

ASP.NET Fileupload control enable/disable programmatically

Enable property defines the working mode of asp.net file upload control. It has two boolean value first one is true and second one is false. If you set true for this then control work properly otherwise control doesn't work, I mean to say that fileupload appear on screen but will not work as input control. If you want to set this property during compile time, must add attribute inside the tag. Like

Read Also: ASP.NET FILEUPLOAD CONTROL INSERT IMAGE IN DATABASE

  <asp:FileUpload ID="FileUpload1" runat="server" Enabled="False" />  

    true is the default value for this. Now take a simple example to change the value at run time.

Source code

 <form id="form1" runat="server">  
  <div>  
     <asp:FileUpload ID="FileUpload1" runat="server" Enabled="False" />  
     <br />  
     <br />  
     <asp:Button ID="Button1" runat="server" Text="Enable/Disable" OnClick="Button1_Click" />  
     <br />  
     <br />  
     <asp:Label ID="Label1" runat="server" Text=""></asp:Label>  
   </div>  
   </form>  

Code Behind 

 <script runat="server">  
   protected void Button1_Click(object sender, EventArgs e)  
   {  
     if (FileUpload1.Enabled == true)  
     {  

Label1.Text = "file upload control is enabled "; 

     
       FileUpload1.Enabled =  false;  
     }  
     else  
     {  
            Label1.Text = "file upload control is disabled ";

       FileUpload1.Enabled = true;  
     }  
   }  
 </script>  

Code Generate the following output

When we press the browse button then we know that it is working or not. Above mentioned snap define this. In first, snap you can see that open file dialog doesn't appear but in second snap its appear, so in second, snap it is working.

Default Listing with Insert and Update in MVC 4

MVC 4 provides simple listing procedure through which developer can create CRUD actions for a database table. Awesome thing is developer don’t need to write a single line of code and will complete the task.

We have added new table Category and updated edmx file in earlier article. Now we will create CRUD actions and their views with default MVC 4 structure. We have created empty controller without using any default action but now we will add a controller with all the default actions.

Follow the procedure for creating a controller and in “Add Controller” window name the controller as CategoryController and select the options as selected in the following screenshot and click on Add button:

This window is prompting for your context class (inherited from DbContext or may be your edmx entities name) file and the model name for which these actions will be created.

After clicking on Add button, it will add a controller with following 5 actions and corresponding views. Those views are not created on the root, but MVC 4 will create those views under new folder with the same name as controller.

• Create
• Delete
• Detail
• Edit
• Index

Run your project and go to specified controller/Index page, it will load all the categories your database have. Have a look on the below screenshot, with three records each having three action-link i.e. Edit, Details and Delete. Beside these individual action links this table structure also have Create New action on the top through which it will redirect to another view.

So we have saved lot of time that may waste to write the code for all these actions and also for creating their views. This MVC 4 feature is very simple to use and we can create more control for each table. Developer can customize these actions or their views as per their requirements.

Some developer don’t need all these views or maybe they want to enable all these actions on the single page. In next article we will create listing page for our own and write some line of code for table structure.