Learning WPF, CSharp(C#) with me | Part #2

December 6, 2017

Part #2

Subject: Why each trainer stick to console based development when my intention is to learn how to make “real” applications?

Hi guys,

Have you taken a training for development recently? If you are an established developer in any technology stack, the most frustrating thing could be the “basics”, you would groan and stir loads in the seat when a junior trainer goes through the concepts, basic commands set etc & would try to make the logic behind the approach

For example, if you want to learn C#, that you could use Web applications or desktop applications, you have a preset mind that wants to develop the applications those a user could interact with visibly. Not something that open a console and shows you few outputs and closes down.

I have asked the same question to many junior trainers during the courses and none was ever able to give me satisfactory answer. During my last attempt to refresh my C# skills I came to a conclusion towards this irritating question and it is simple like this

A console application when you want to print something on the screen, you just write a code snippet like this

static void Main(){

Console.WriteLine(“Hello World”);

}

And if you want to do the same with a Desktop application, the efforts are like this

You design a form (I will not use the real technical terms here, not at this stage)

You will add textboxes or labels to show “Hello World” (and you don’t really know how to make them at the first level)

Then you will develop the code part that should show the “Hello World” finally when the application starts

So for a trainer it becomes easy to deal with code part, which is the most important element of an application, rather than trying to teach a student the GUI development.

I will try to explain what I have assumed using real examples

Hellow World console application

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace HellowWorldConsole

{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hellow World");
}
}

}

Running the application will open a console window and show you the following

image

Now let us develop the same Hello World application using WPF

My GUI part has the following XAML Code

<Window x:Class="HelloWorldWPF.MainWindow"
xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml"">http://schemas.microsoft.com/winfx/2006/xaml"</a>
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<TextBox x:Name="HWorld" Margin="95,150,117,124"/>
</Grid>

</Window>

and the code behind is


using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace HelloWorldWPF

{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
this.HWorld.Text = "Hello World";
}
}

}

and the output of both portion is seen as below

image

Now, it’s a common tendency of a seasoned programmer to perfect the GUI, because it creates the initial appeal. As you could see my textbox and the text appearing is not in sync, the height of the textbox is much bigger than the text that it looks somewhat mismatch…the time spent to perfect the GUI could become a real hurdle to progress with the training which must be limited certain hours per course!

Instead the trainers would approach the course, trying to teach the student the maximum coding part, then once the students are familiar with the technology, letting them explore the GUI development (Unless the course has the GUI development exclusively listed under the curriculum)

Once the above idea settled within me comfortably, I managed to sit patiently and learn the “basics” better than ever & was able to map what I learned to GUI much easily. Interested? However, my approach with this series will be developing GUI elements along with the basic coding. Do you have a different approach? do let me know through comments.

with the 1st part of this series I have posted a complete WPF solution to demonstrate what C# with WPF could do. That solution has many issues, like I am not handling folder/file access permissions or threading which is a must requirement when a program is going to run for unprecedented periods.

Be with me and we will be looking at much of them in coming parts.

regards,

rajesh

Advertisements

Learning WPF, CSharp(C#) with me | Part #1

December 4, 2017

Part #1

Subject: A Simple File Listing Utility using WPF & CSharp (C#)

Okay guys

Here I am once again! This time trying to learn WPF with C# to build my own small utilities to make my “Admin work” a lot easier. Further, I use my own blog as a reference guide most of them time! So, you are most welcome to use my “notes”

A WPF project always has two parts, XAML and the code behind. While XAML maintains the GUI part of it, Code part is where you write supporting code.

<Window x:Class="WpflisttoGrid.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="513" Width="877" Loaded="Window_Loaded">
    <DockPanel>
<Menu DockPanel.Dock="Top" Height="24"></Menu>

        <StatusBar DockPanel.Dock="Bottom" Height="24">
            <StatusBarItem x:Name="StatusItem" Content="Ready" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="top"></StatusBarItem>
        </StatusBar>

        <Grid>
            <GroupBox x:Name="MyParameters">
                <Grid x:Name="MyParameters_Grid">
                    <Label x:Name="lblPath" Content="Folder" HorizontalAlignment="Left" Margin="6,19,0,0" VerticalAlignment="Top"/>
                    <Label x:Name="lblFileType" Content="File Type" HorizontalAlignment="Left" Margin="6,47,0,0" VerticalAlignment="Top"/>
                    <TextBox x:Name="txtPath" HorizontalAlignment="Left" Height="23" Margin="83,22,0,0" TextWrapping="NoWrap" VerticalAlignment="Top" Width="258"/>
                    <TextBox x:Name="txtType" HorizontalAlignment="Left" Height="23" Margin="83,49,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
                    <Button x:Name="buttonFldrOpen" HorizontalAlignment="Left" Margin="346,22,0,0" VerticalAlignment="Top" Height="23" Click="buttonFldrOpen_Click" >
                        <StackPanel Orientation="Horizontal">
                            <Image Source="/Resources/folder_Open_32xMD.png" Stretch="Uniform" Height="18" Width="22"/>
                        </StackPanel>
                    </Button>
                    <Button Content="Process" HorizontalAlignment="Left" Margin="83,84,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
                </Grid>
            </GroupBox>

            <DataGrid x:Name="Grid1" Margin="68,159,89,40" IsReadOnly="True" SelectionChanged="Grid1_SelectionChanged" MouseDoubleClick="Grid1_MouseDoubleClick" SelectionUnit="Cell"/>

        </Grid>

    </DockPanel>

</Window>

and the CSharp code portion as below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
using System.Data;
//Required for folder browswer & so
using System.Windows.Forms;

namespace WpflisttoGrid
{
    ///
<summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //Setup the gridview to generate columns automatically against the file lists
            this.Grid1.AutoGenerateColumns = true;
            //We will store the text box values into local variables for easy understanding
            //You may refer them straight away as defined columns
            string filepath = this.txtPath.Text;
            string filetype = this.txtType.Text;
            //We will build a LIST of class myFiles
            //Which will have chosen columns from the directory info file info results
            List<myFiles> newList = new List<myFiles>();
            try
            {
                foreach (FileInfo myfile in (new DirectoryInfo(@filepath).GetFiles(filetype, SearchOption.AllDirectories)))
                //SearchOption.TopDirectoryOnly lists files from the top folder, ie, if a folder has sub-folders within
                //SearchOption.TopDirectoryOnly will isolate the top folder & list all files from it
                //SearchOption.AllDirectories will recursively pick all files from all folders those match type of files PDF
                //As a developer who is learning
                //I will leave enhancements to your logic
                //This application could have
                //Files those matching certain "contents"
                //You can change the SearchOption.AllDirectories to SearchOption.TopDirectoryOnly programmatically...etc
                {
                   //Calculate the time difference between the file creation and as on this moment
                    double _fileAge = Math.Round((DateTime.Now - myfile.CreationTime).TotalDays, 0);
                    //Add rows to the new list using new instance of the "Constructor" myFiles by passing the file details
                   newList.Add(new myFiles(myfile.FullName.ToString(), myfile.CreationTime, _fileAge));
                }
                //The following you could use for showing additional details
                //this.StatusItem.Content = myfileList.Count().ToString();
                //this.Grid1.ItemsSource = myfileList;
                //System.Diagnostics.Debug.WriteLine(myfileList.Count());
                this.Grid1.ItemsSource = newList;
                this.Grid1.Columns[0].Header = "File Name";
                this.Grid1.Columns[1].Header = "Creation Time";
                this.Grid1.Columns[2].Header = "File Age(Days)";
            }
            catch (Exception ex)
            {
                System.Windows.MessageBox.Show(ex.Message + ex.Source);
            }
        }

        private void Grid1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {

        }
        private void Grid1_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            // System.Windows.MessageBox.Show()
            //https://stackoverflow.com/questions/47309073/c-sharp-wpf-gridview-will-not-show-data-unless-clicked
            try
            {
                var cellInfo = Grid1.SelectedCells[0];
                var content = (cellInfo.Column.GetCellContent(cellInfo.Item) as TextBlock).Text;
                //System.Windows.MessageBox.Show(content);
                System.Diagnostics.Process.Start(@content);
            }
            catch (Exception ex)
            {
                System.Windows.MessageBox.Show(ex.Message + ex.Source);
            }
        }

        private void buttonFldrOpen_Click(object sender, RoutedEventArgs e)
        {
            FolderBrowserDialog folderDlg = new FolderBrowserDialog();
            folderDlg.ShowNewFolderButton = false; //Don't allow users to create new folders from this dialogue
            folderDlg.RootFolder = Environment.SpecialFolder.MyComputer;
            // Show the FolderBrowserDialog.
            DialogResult result = folderDlg.ShowDialog();
            if (result == System.Windows.Forms.DialogResult.OK)
            {
                this.txtPath.Text = folderDlg.SelectedPath;
                Environment.SpecialFolder root = folderDlg.RootFolder;
            }
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.txtType.Text = "*.*";
        }
    }

    public class myFiles
    {
        public string fName { get; set; }
        public DateTime fCreationDate { get; set; }
        public double fAge { get; set; }

        public myFiles(string fname, DateTime fcdate, double fage)
        {
            fName = fname;
            fCreationDate = fcdate;
            fAge = fage;

        }

    }
}

This project should be used as a pilot to learn both WPF & CSharp (C#) rather than a commercial product as I am not using threading or channeling the background works. So once the Process button clicked, the GUI become irresponsive until the file lists populated, and could make a user feel the system is stuck.

Once the file list is populated in the GridView, one can double click the file name to start a fresh instance of associated program. So be careful, you may be running an executable that could cause unexpected problems.

Optionally you may download the Visual Studio Solution from here

regards,

rajesh