File Dialog Boxes In Expression Blend
Hi guys you would be happy to know that
Expression blend not only provides a platform for creating interactive graphics
and next generation user interfaces but you can also create file handling
applications through this. In this article I would be cover the three main and
most important aspects of file handling i.e. opening a text file, opening a
image file and saving the text file.It is very easy handling files in Expression
Blend too. Just go through this article and you will, for sure, learn the basic
concepts of handling dialog boxes without much effort.
So here we go:
Step 1 : First of all you need to create
a new project of WPF application with C# language using Expression Blend and
name it as Dialog Boxes.
Step 2 : Now you land up into a white
screen called artboard, this is where you have the designing rights. Now First
and foremost thing is to divide the artboard into two rows( upper and lower) and
then divide lower row into two columns such that the left column covers 80%
row and rest the other. For this, move the mouse on the boundaries of the
artboard and you will find straight lines bisecting the artboard these are grid
lines that creates rows and columns. Using these lines divide the artboard as
told above. This artboard now appears as below:
Step 3 : Go-to assets and select Menu
and drag it into the artboard on the upper row. Do this three menus i.e. File
menu, Edit menu and View menu.
Step 4 : Select TextBox from the toolbox
(or assets if its not in toolbox) and drag it onto the lower row first column
and name it as "tb1".
Step 5 : Again visit the toolbox/assets
and add an image control to the next column of the lower row.
Step 6 : Now Right click on the menu and
in the window that pops up select add menuitem name this menu item as "File".
Similarly rename the Edit menu and View menu then to the File menu add three
menuitem namely Open, Open Image and Save Text. It may happen that while
adding these menu items these menuitem may fall out of main menu control for
this hold ALT and drag the item to the parent menu.
Step 7 : Next task is to set area for
the text field. For this select the textbox and go to --> Objects--> Autosize -->
Fill. This fills the entire column with the textbox.
Step 8 : Then select the Textbox and
go to --> Layout property--> Vertical scrollbar visibility--> Set this as auto. This
is done so that the text is completely wrapped into the textfield.
Step 9 : Now you have to build the
project for this go to project and select Build.
Step 10 : Now the main work starts. First
of all we'll use Open file dialogbox for opening and displaying text files into
the textfield. For this select the "Open" menuitem from the object and
timeline window and goto the even palette and on "Click" event
type the name of the click event or click method name. Here I have
named it as openfile. As soon as you press enter you see this screen. It
is here to add OpenDialogBox coding to make the Open menuitem in working
state.
using
System;
using
System.Collections.Generic;
using
System.Text;
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.Shapes;
namespace openfiledialogboxx
{
///
<summary>
///
Interaction logic for MainWindow.xaml
///
</summary>
public
partial
class
MainWindow : Window
{
public
MainWindow()
{
this.InitializeComponent();
// Insert
code required on object creation below this point.
}
private
void
openfile(object
sender, System.Windows.RoutedEventArgs e)
{
// here Add event handler implementation for Open file dialog box.
}
}
}
Step 11 : Now we start coding in the
openfile() method. Type the following lines but before adding
these lines include the folowing namespace
using System.IO; at the top. After this
start writing the following lines:
private
void openfile(object sender, System.Windows.RoutedEventArgs e)
{
// here Add
event handler implementation
for Open file dialog box.
Microsoft.Win32.OpenFileDialog fd =
new
Microsoft.Win32.OpenFileDialog();
fd.InitialDirectory =
"D:\\";
fd.Filter ="All
Files (*.*)|*.*|Text files (*.txt)|*.txt";
fd.RestoreDirectory =
true
;
bool?
result = fd.ShowDialog();
if(result==true)
{
String mypath =
fd.FileName.ToString();
if(File.Exists(mypath))
tb1.Text =
System.IO.File.ReadAllText(mypath);
}
}
Thats all for Open file Dialog box,
this code above fetches the text files into the textfield that we have defined
in the artboard.
Step 12 : Now we have to insert the
image into the image control using file dialogbox. For this select the openimage
menuitem from the Object and timeline and and goto Events --> Click-->
Type here the name you would like to give to your method of importing image file
into the image control. In this project I have named it as imagopen and
we have to code in imagopen() method. Type the following lines below:
private
void imagopen(object sender, System.Windows.RoutedEventArgs e)
{
// Add
image event handler implementation here.
Microsoft.Win32.OpenFileDialog imgfd =
new
Microsoft.Win32.OpenFileDialog();
imgfd.InitialDirectory =
"D:\\";
imgfd.Filter ="All
files (*.*)|*.*|Windows Bitmaps|*.bmp|JPEG files|*.jpg|Tiff Files |*.tif";
imgfd.RestoreDirectory =
true
;
imgfd.FilterIndex
=1;
imgfd.Title =
"My
Image ";
bool?
result = imgfd.ShowDialog();
if(result==true)
{
String mypath2 =
imgfd.FileName.ToString();
if(File.Exists(mypath2))
imgbox.Source =
new
BitmapImage(new
Uri(mypath2) );
}
}
Note : Keep in mind that for this
method to work properly just make it sure you have included the following
namespace :-
using System.Windows.Media.Imaging;
Step 13 : Now finally its time to save
the text file you have opened into your storage memory using Save File Dialog
box, for this also you have to do the same thing i.e. select the save menuitem
from the Object and timeline palette and goto Click event, type the name of the
save method,here I have named it as "saveitem" and in this method write the
following code :
private
void
saveitem(object
sender, System.Windows.RoutedEventArgs e)
{
// Add save event
handler implementation here.
Microsoft.Win32.SaveFileDialog svfd =
new
Microsoft.Win32.SaveFileDialog();
svfd.InitialDirectory =
"D:\\";
svfd.Filter ="All Files
(*.*)|*.*|Text files (*.txt)|*.txt";
svfd.RestoreDirectory =
true
;
bool?
result = svfd.ShowDialog();
if(result==true)
{
String mypath3 = svfd.FileName.ToString();
if(File.Exists(mypath3))
{
System.IO.File.Delete(mypath3);
}
using(
FileStream fs = File.Create(mypath3))
{
//here the text content
is read byte by byte and saved to the file
Byte[] txtcontent = new
UTF8Encoding(true).GetBytes(tb1.Text);
fs.Write(txtcontent,0,txtcontent.Length);
}
}
}
Step 14 : Now press F5 and see the project
opening Text files and image files in the fields defined and also saves the text
file. The final coding becomes like this:
using
System;
using
System.Collections.Generic;
using
System.Text;
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.Shapes;
using
System.IO;
namespace
openfiledialogboxx
{
///
<summary>
/// Interaction logic for
MainWindow.xaml
///
</summary>
public partial
class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
// Insert code
required on object creation below this point.
}
private void
openfile(object sender,
System.Windows.RoutedEventArgs e)
{
// here Add event handler
implementation for Open file dialog box.
Microsoft.Win32.OpenFileDialog fd = new
Microsoft.Win32.OpenFileDialog();
fd.InitialDirectory = "D:\\";
fd.Filter =
"All Files (*.*)|*.*|Text files (*.txt)|*.txt";
fd.RestoreDirectory = true;
bool? result = fd.ShowDialog();
if (result == true)
{
String mypath = fd.FileName.ToString();
if (File.Exists(mypath))
tb1.Text =
System.IO.File.ReadAllText(mypath);
}
}
private void
imagopen(object sender,
System.Windows.RoutedEventArgs e)
{
// Add image event handler
implementation here.
Microsoft.Win32.OpenFileDialog imgfd = new
Microsoft.Win32.OpenFileDialog();
imgfd.InitialDirectory = "D:\\";
imgfd.Filter =
"All files (*.*)|*.*|Windows Bitmaps|*.bmp|JPEG
files|*.jpg|Tiff Files |*.tif";
imgfd.RestoreDirectory = true;
imgfd.FilterIndex
= 1;
imgfd.Title =
"My Image ";
bool? result = imgfd.ShowDialog();
if (result == true)
{
String mypath2 = imgfd.FileName.ToString();
if (File.Exists(mypath2))
imgbox.Source
= new BitmapImage(new
Uri(mypath2));
}
}
private void
saveitem(object sender,
System.Windows.RoutedEventArgs e)
{
// Add save event
handler implementation here.Microsoft.Win32.SaveFileDialog svfd = new
Microsoft.Win32.SaveFileDialog();
svfd.InitialDirectory =
"D:\\";
svfd.Filter =
"All Files (*.*)|*.*|Text files (*.txt)|*.txt";
svfd.RestoreDirectory = true;
bool? result = svfd.ShowDialog();
if (result == true)
{
String mypath3 = svfd.FileName.ToString();
if (File.Exists(mypath3))
{
System.IO.File.Delete(mypath3);
}
using (FileStream
fs = File.Create(mypath3))
{
//here the text content is read byte by
byte and saved to the file
Byte[] txtcontent =
new UTF8Encoding(true).GetBytes(tb1.Text);
fs.Write(txtcontent, 0, txtcontent.Length);
}
}
}
}
}
Step 15 : The final Output looks like this:
The fig below is for Opening a text file using Open menu.
Next fig below is for Opening an image file.
Next fig below is for saving the text file.
Thats all in this article. Hope it was helpful
to you. Do share your views via comments to help us improve and provide you the
best we can.