Build your own PDF Converter with Csharp WPF and Syncfusion for PC from scratch

what's up youtube this is dennis panita for tutorials.eu in this video i have something special for you and that is going to be a pdf converter that we're going to build from scratch using wpf c-sharp and sync fusion so we're going to look into what syncfusion is in a second because they are the sponsor of this video so let's look at what we're going to build first and that is this little super pdf converter where you can select a file and then convert that file into a pdf for example so from png to pdf from dock to pdf from pdf to doc all of those ways is what we're going to implement in this video but you can of course extend that because the tool that we're going to use for that that is built by syncfusion allows you to convert in all kinds of different ways so let's convert that png into a pdf convert it and then we will see our doggo pdf which is this beautiful image as a pdf file so now a big thanks to our sponsor who is syncfusion they made this video possible and i hope you enjoy this video so they are the world's best ui component suite for building powerful web desktop and mobile apps and they have so many different components it's incredible so 1600 different components and frameworks for winforms wpf asp.net uwp and so forth so all kinds of things app development pc development and so forth so all kind of stuff is included so here demos and training whenever you need to learn something they have amazing tutorials the company has been around for 20 years so they really had time to fine-tune and really optimize their code then it's really easy to use and they're frequently updating their tools as well so there are a bunch of really popular components so you see if you ever want a data grid you can see that you can get this kind of data grid very quickly using syncfusion so you wouldn't have to develop everything from scratch and it's also difficult to make it look that nice so that's something where syncfusion really comes in and helps and saves the day and the cool thing is it's supported for many different platforms so you see here for example web platforms such as javascript angular react asp.net mvc and core even web forms but then if you want to work on the pc and want to build for the pc wind forms wpf win ui and so forth so it's really amazing for app development xamarin flutter uwp you name it so they have it alright so thanks again to syncfusion for sponsoring this video and now let's get over to the content so if you feel like it's a great idea to use zoom fusion which i think you should then definitely check out sigfusion.com with our url it really helps us out this show sync fusion that you are coming from our video and this allows them to well see that we did a good job and this helps us in the future to create even more of this kind of content with syncfusion which i would really appreciate so use our url you can find it in the description as well as in the pinned comment and then just go ahead and get your free trial just register you see it's for free you can decide which tool you want to use and you will find wpf for desktop here at the very bottom you can see they are even starting with dotnet maui so just register here with your account details and then you are good to go so it's a 30-day free trial and the cool thing is you can then export your applications to actually work with their licensing otherwise your applications that you built with their tool would be non-licensed so definitely register once you're registered you will see this screen where you can download the web installer or the offline installer or you can just install the assemblies from nuget package which we are going to do in visual studio and once you're on this page you can also scroll down to find the documentation a bunch of tutorial videos if you want to learn how to use syncfusion and if you want to know more about what's new and updates and what they're going to build in the future you can go over here so now let's go over to visual studio and start building our application all right so let's get started building this little application that you see here so you see we have a button on the left hand side button at the bottom then an edit text with an image here and a text as well as a selective field here where we can select options okay so let's build this in wpf first and then after that implement the actual functionality and we're going to focus on first of all installing all of the nuget packages that we're going to need because we are using a bunch of syncfusion nuget packages so let's get started therefore i'm going to create a new project and this will be a wpf project i'm going to use this version here the c-sharp version and then let's call this one pdf converter sync fusion i'm going to use net 6 for this the long-term supported one which just came out recently and once the project is ready let's go ahead and install all of the different nuget packages that we're going to need all right so manage nuget packages and we're going to install a bunch of them because we will need a lot of different functionality because we want to convert from pdf to dock from dock to pdf from png to pdf so for all of those we are going to need a couple of packages so here from install go over to browse and then you can search for the sync fusion dock to pdf converter wpf package and install this version here so this will just allow you to convert virtual pdf and give you some control over it and more so that's the first package then we will need the pdf wpf package as well so once the installation is done we can search for syncfusion.pdf.wpf and it will be this package right here so let's install that and then the syncfusion shared wpf which we're going to use to have the basic sync fusion ui elements like buttons and so forth so it's going to be this one here this package provides the functionality to utilize the features of sim fusion wpf busy indicator button split button calendar and so forth so a bunch of wpf objects that are just going to look a lot better than default ones alright so let's install that as well then we are going to use the skin manager to manage our themes because we're going to use a theme here so this sf skin manager will help us with the wpf themes of syncfusion which is pretty cool all right so let's install that then i want to use a particular theme which is going to be the fluent light theme and this allows me to make my application responsive so fluent means responsive which means that it will scale based on the size of your window which is really useful because otherwise you get so all kinds of weird behavior with your application it's just going to look awful and then we will need to make sure that we have the drawing.common package as well so that we can use images okay so use this provide access gdi graphics functionality which is not from syncfusion but is of the dot net and we're going to require this so let's install that okay so now that we have that let's do some boring stuff first i'm sorry about that and that is going to be to set up all of the namespaces that we're going to require so first of all we're going to use the win32 namespace which is this one here then in order to work with word documents we're going to use the syncfusion.io namespace the o dociodls and the doctor pdf converter then to read convert and work with pdf files we will need those namespaces here so sync fusion pdf sync fusion pdf graphics and sim fusion pdf parsing then to work with the theme so for our beautiful sf skin theme and fluent light theme so that our application is going to look nicer we're going to use those two name spaces here so as of skin manager and themes fluent light wpf then to start a process we need to use diagnostics because we're working with processes in this application then to work with images we're going to use system drawing which was the namespace that we just added and then to save and read files we need to use system.io as well as system.windows okay so io stands for input output so we input a file into our application to then convert it and we output put it as the converted file okay so now that we have all of those we can finally start with our user interface and i'm going to rush this a little bit because this is not supposed to be an introduction to wpf okay so if you don't know how to use wpf and you're overwhelmed with what's going on here definitely check out my wpf master class so if you don't understand example at all i would really recommend to check out those videos before getting started with anything that has to do with wpf we will need to use files so i'm going to create a new folder here new folder i'm going to call this one images and that's where i want to put all of my images so i've prepared a couple of images you can just go ahead and get them from our project as well you can just download it and you find the link in the description down below so we're going to use these images that you see here the convert button icon the fav icon then the logo for t-shirt which is the nicer logo with a better resolution and then we have this folder icon so select file icon which we're going to use as well and then with those images we need to change a couple of the settings for them so here click on this properties tool icon if you don't see this properties screen here at the bottom because for those images once you have selected them we need to make sure that the build action is going to be that those images are going to be treated as resources and copy to output directory we are going to use copy if newer okay so that's really important otherwise the images won't work properly and will not appear properly in your application so now let me change the name of the window because currently the name is main window as you see up here so i'm going to call this one super pdf converter all right and the size for now i'm just going to set it to 300 times 500 and we're going to set it up later on so now we need to add a new namespace because we have a bunch of default namespaces here you see the presentation the example the blend as well as the markup compatibility but we need to set up our own namespace or add an own namespace from sync fusion now you could go ahead and manually enter all of that but the cool thing is you can also just go to your toolbox and then go to the sync fusion wpf control so you have the all wpf controls the common ones and the syncfusion ones which we just added via our nuget package so you can just drag any item in here like the button for example and run the application by the way just to see how this is gonna look so there we are we get the license notification and then this is how a button looks like so we haven't added it at all but you see there is a little icon and a text that you can do very quickly and that's what this syncfusion button does for us so when we want to use syncfusion items we need to add this namespace right here so it was automatically added for us which is amazing so that's exactly what we needed i didn't need to type it in manually so now i'm going to give my main window a name and i need that in order to then access it later on using data binding okay so i want to bind the scale of our screen to the main window so whenever the main window size changes i want to make sure that all of the items inside of the main window are also changing so if you look at our example project here if we change the size you see that the icons are changing in size and so forth of the buttons and the text and so forth everything is changing in size and that only happens through this binding because we're binding so to speak we're connecting the size of the window to the individual items inside of our grid and the grid is going to be the parent layout so to speak so the layout container in which we're going to put everything and i want to design this grid and therefore we can now use a scale transform for example because i want to scale what i have there so the name will be application scale transform so i'm going to call it and let's close the scale transform so that the error disappears now what i want to hear i have here is the center x should be zero the center y should be zero and the well i'm going to have scale x and scale y properties set up so let me just paste them in here i'm going to paste a lot of code right well next because otherwise this video would take too long for me to type everything in i think it's also boring for you so what we have here is we're going to bind the scale x of our grid so the width so to speak we're going to scale it based on the binding element my main window which is this main window that's why we gave it a name so that we can now connect to it we're binding our scale value to it so what is scale value well currently this doesn't exist but this is just going to be a variable that we're going to then use in order to know how we need to multiply our widths and sizes and so forth of all of the items so that they are going to be adjusted accordingly to the size of the main window so that's what we are doing here basically okay now let's go ahead and add items to our grid transformer by the way if we get rid of those two lines we can start our application it should work already we see that we have our super pdf converter let me paste that in back in here because we will need it later on and by the way while we're at it let's change the icon here so let's change the icon that we see at the very top so if you run the application you see at the very top this little image that i don't like so we're going to replace it with an image that we have inside of our images folder and i call it fav icon and i think without a capital i so if you go to view solution explorer you will find this fair icon png file and if you hover over it you will see that this is the icon that i want to use and obviously i need to add the png name or the extension here as well so if we cut out these two lines that currently are causing errors we will see that now we have this little icon here at the top okay this looks a lot nicer i think than the default icon so that's how you can do that okay so you see there's a bunch of stuff going on now let's take care of adding images and text in here so at the top i want to have an image so let's add the image and actually let me paste the image in here and go over what i'm doing there and this image that i have here will use the images logo png it will stretch so that it fills the size the horizontal alignment will be centered vertical align will also be centered and the height will be 68 and with 155 so we will need to reposition it you can drag it a little bit so then it will reposition its margin here for example so i want it to be pretty close to the top so we can just do a margin of 10 and you can play around with the size until it is a good resolution here i think that's roughly so 70 to 180 or so that was roughly the size of the image even though you should not crop it just take the original ratio that the image has okay so that's our image now let's add a label as well so i'm going to put the label in here as you see here the content of the label will be super pdf converter which you can see up here which is this converter here it will be centered horizontally and vertically we'll have a font weight of bold so it will be fat and bold font size of 16 then the foreground which is the color is this pinkish color that you see here the height is auto the width is auto so it will adjust accordingly then i have a margin of 0 minus 70 0. so this creates this effect that i have here so that's how my application currently looks like let's see if we can run our application even though it doesn't find scale value it seems like that works so it's not going to scale at this point properly you see like we can create this effect you see here that was what i was talking about that we want to avoid where the super pdf converter text is just going on top of the image and we can scale to all kinds of sizes you can fix the sizes that you can scale an image to but for now we're just going to skip that okay now let's add the buttons to our application because we have our image we have our label now let's go ahead all right now at this point let's actually take care of the grid row definitions and grid column definition so i want to have multiple rows and multiple columns so one two three columns and four rows okay so we need to set those up so let's set up three columns by having three column definitions and then four rows by having four row definitions okay so this is how our application is then going to fare you see currently everything is at the top left side because by default it's at zero zero so now i want my image to be here at the top then the super pdf converter text right here and then yeah we can go from there okay so let's change the images position to have the grid column of one and the grid row of zero and the label grid column of one as well and grid row of one so it will be underneath now and at this point you can see we can get rid of this margin or we can just set it to zero zero and see how this is going to look like and now it will be positioned in the center of our grid here now the image you see suddenly doesn't fit very well into this column anymore and we can very easily fix that by setting the width to auto so now we'll automatically take the width that it requires and the same goes for the height so he for our row height to auto like so and now it will take the height that it requires for our image to fit in there even though the image has a little bit of margin towards the top as you see here maybe we should also add a margin towards the bottom so that it's not going to be as cramped and maybe actually towards all directions because it's going to look a little nicer than okay so now with our super pdf converter we can actually do the same thing there our roll doesn't need to be higher than it requires so let's set that up to be height auto as well now let's go ahead and add the extra elements that we wanted to have and that will be the sync fusion items that we want to add so we can go over to our toolbox and drag them in here if we want to that's one way for example as we saw in the default application we needed the button at the left hand side so let's drag that in here and design it a little bit so first of all it is going to be this sync fusion button advanced content that says button advanced right now but let's change that to say something like select file then we will have the small icon to be a different one as well well so there's a small icon property that we can now directly take from our images here so we have this it should be the select file icon this one here so images slash select and let me actually just copy this file name from here like so and put it in here select file icon png and there we have our image already you see that's what it says actually the content says select file but i don't care much of the about the content more about the label so there's this label property and if we change that to select file let me see if i have the label twice yes i do so let me cut that out here select file and change the label to select file okay so now this looks a lot nicer i'd say let's put it into multiple lines so that we don't have to side scroll side scrolling is always a pain so let's look at this so we have our content that says select file this is good for impaired readers so visually impaired people who can't read then the tool could read for them this button says select file and they could say please click select file and then it would open up that so then we have the icon we want to align it towards the left i'm going to have a height here of 35 which is fine it has a width of 75 well let's make it a little bigger i think something like 115 should be good you see there then we have a big margin so let's set that to zero at first look at how this is going to be and i think something like 10 pixels towards the side is always a good idea but then let's also make sure that this is going to auto with so this column the first column is going to have a width of auto as well so now you see it will create this effect i think 10 pixels towards all direction for the margin for this button should be good so let's do that in here and also alter the height as well while we're at it so height four disk column or this row actually when row three should be auto so now it's just going to be as high as it requires to be which is a lot better it's in the second row which is where we want it to be the column isn't even set but it doesn't need to be because by default it's going to be at column 0. now i'm going to change the appearance up a little bit because currently it has the default appearance of what a button would look like in syncfusion but i wanted it to have this background color and as the text color i want to use white so now we will have this little icon here and i think this looks a lot nicer or this little button okay now we are going to need a text box in the center so i'm just going to use a default text box here like so where we can enter text to it should be in the column of one so in the second column and in the third row as well so grid roll c2 so that's where it should be in here now i'm going to make sure that the text box does exist so you see it's in there it's automatically sized so now let's change a couple of settings here so there's this property that we have for a text box and that is called text wrapping and i want to make sure that it's not going to wrap the text so it's not going to jump into the next line with the text because i want it to be one big line or one long line so does it accept return buttons well if you enter return i don't want that to happen i'm going to set it false i'm going to give it a name actually let's put the name at the very beginning i always like to have that at the very beginning so it's a lot easier to find so x name will be the path text box so that's where we get the path from or we will see the path so to speak i would like to give it a little bit of margin as well because i'm not very happy how cramped it otherwise looks at least in here so i think 10 towards all directions should be good even though you could say we don't need these 10 density pixels or pixels to the left and right hand side but either way is fine so however you prefer is good okay now let's take care of the combo box and therefore i'm going to use a sync fusion combo box and i'm going to paste it in here and go over what i have decided to use here all right so what i have here is now a syncfusion combo box and this combo box needs a name so that it can access its values in the code behind later on i'm going to position it in column two which is the third column in row two which is the third row as well so right here i'm going to not allow multi-select so i'm going to set that value to false because otherwise we could select multiple items but i don't want that the default text will be select so this is what you can see here it says select then the foreground will be white so the text will be white the background will be the same color that we used before which is this reddish pinkish color i'm going to use the same width as i had for this button of 115 and a margin of 10 towards all directions as well let's make sure that this column is also adjusting automatically to the width and by the way let's do the same thing for the height for the last row as well because we're going to make sure that our last row is going to have another button in it so what we can do is we can really just to simplify it and copy the other button that we used before so this button here and put it here where we position it in a different row so it will be in the row three and in column so here grid column of one so it will be underneath i want to center it so let's center the button as well and now we should be better or it should be better and then let's change the text here a little bit so the label should not say select file but convert the margin in towards all directions is still fine the color is fine i would like to use a different image so in this case i would like to use this other image let me see how we call it so i think it was this convert button icon okay so this this icon so let me rename it and cut this out or copy this and now use this as the image directory or directory so the small icon will now be this little flash icon now you can change the content to convert as well so visually impaired people can also understand what this button should do okay and that should pretty much do it for our user interface now this button will need to have an click event so once we click on it we will need to do something right so we want to run an event the same will go for the other button so let's take care of that step by step now therefore i'm going to give it a on click event so here click this event create the new event handler and it is automatically called button advance click which also creates this new method for us i'm going to rename this and i'm going to call this one convert button click okay and let's rename this and actually add the underscore because it really likes this underscore so let's add this underscore here as well so convert button click that's going to be the method and this will be the code that will be executed once we click on this convert button here at the bottom now i just realized that i didn't talk specifically about the combo box items so i will have three items in here so the dock to pdf item the pdf to dock item and the png to pdf items so these are going to be the three options that we have once we are clicking on to this button and you see that we have those three options now at this point you see that the coloring is a little off because we haven't applied any theme to it yet but we're going to apply a theme later and then once we have selected something you see the text is populated and it looks a lot better but we're going to take care of the theme a little later but now let's take care of the actual functionality in the code behind so in the example.cs file therefore i need a click event for this button so currently it doesn't have a click event so let's add one so just add a new event handler and i'm going to rename this i'm going to call this something like select file click ok so select file click and underscore click so that we follow the standard let me copy this because i want to use this for this event here so select file click so that should be executed once we click on that button and what should happen well i want to open a file dialog so let's go ahead and create a open file dialog object like so and i love the new visual studio you see it really does a lot of the work for us then we will need to show the dialogue to the user so i'm just going to use a boolean here and it will work as follows so it's just going to give give me the result so if that worked out it didn't work out so i can just use this open file dialog that i just set up to show the dialog and then i can check the result so if the result has a value and the result value exists then so this result value is true or false as you see it's a boolean so if that is true and we get a value then i want to do something and what i want to do is i want to open the path box so i'm going to use pathbox.txt to get the open file dialogues file name so this will give me the file name that was selected so the entire directory of the file so to speak so in case you were wondering what this path text box is it's this text box here this one in the center i called it path text box that's the name of it that's why we could directly access it in the code behind so we're just setting the text so the content of the path text box to be whatever file name we got and that will be the entire location so now we need to open the folder of that file so let's go ahead and create a new method for just that so private void open folder and it will need the folder path so it will need to know the directory so where the file is so therefore i'm going to start a new process so process start info i'm going to create a new process start info object so this is going to allow me to start the explorer.exe which will open the file explorer in windows so here i actually don't close this but i want to access something or execute something here so i'm going to get the arguments which i get from the folder path dot substring and here at the position 0 so from the position 0 to the last index so folder path dot last index off and here i'm using double backslash so we were basically saying here we want to fold the path only without the file name so we take the substring starting from 0 until the last index of the last backslash so we have this entire file name or file path and the file name is just this part here right and what we're saying is take everything except for this last part where we had the last backslash so cut off all of this part here but take everything else so take the entire folder so the location where this particular file is at so that's what this argument is going to be and the file name itself will be called exploraxa and now let's actually run this task so process start with start info and we need to add a comma here for our file name otherwise we get an error okay so that's how we open a folder so now what we want to do is to manage what should happen once we click on the convert button okay so let's take care of that and that is our convert button click so here we're checking if the path box path textbox.text to be precise is not empty or is empty so let's say it is empty what do we want to do if it is empty well if it's empty we're just going to display to the user hey there's nothing to show here do something else so dot show and here we say please select a file and then just return but then otherwise we're going to use a switch here so we're going to use a conversion drop down selected index switch so what is this conversion drop down so it's this conversion drop down that we have here so this little item if you run it let's see if our application still works or if it crashes now it's the works so this thing here this is our conversion drop down and now we want to get whatever was selected so based on what was selected we want to do something so this is what the switch statement is going to be useful for so for the case of 0 we want to convert a png to pdf so what should happen here once we are in this case 0 well i want to convert doc to pdf okay so let's create a method that we want to call once we want to convert a document to pdf so i'm going to create a method private avoid convert dock to pdf and it will need to know the dock path so it will need to know where the document is and this method should be called in that case so here in this case called the convert to dockpit.pdf and then break out of it and also let's have the default case here while we're at it so default and then show a message box that says please select an option and return now this convert doctor pdf will need to have the file name that we need to pass so we get that from the path textbox dot text okay so this will be the string of the doc path so wherever the document is so here we first of all get the word document so here word document which will just be a word document or i'm going to call word document and this will be a new word document where i'm going to pass in the doc path so wherever the document is and the format type so the format type i'm going to use automatic so it should automatically figure out what the format of that document is then i'm going to create an instance of the doc2pdf converter so doc2pdf converter is something that we get from syncfusion very conveniently okay so thanks a lot for that syncfusion so here we're creating a new dr pdf converter object and now we need to create a pdf document object as well so let's create a pdf document now this pdf document is actually not going to be a new pdf document but it will be gotten from convert converter which is our converter that we just created and then we're going to convert to pdf with our word document so now we have converted it and we have the pdf document in here in this object but we need to save it so let's create a new pdf path which will be our dock path dot and we're going to split it at the dot separator and we're going to take the first part of it so basically we want to have the name plus and then we're going to use dot pdf so basically we're saying whatever the file name was we're going to take only the file name without the extension and then we're going to add dot pdf so that's what the split does it splits the string into two at the dot so if the file name was something like file name dot png for example then it will only take this part here we'll cut this tile part off and then it will add pdf so that's what this line does here okay so now we have the new pdf path and we can now use the pdf document to save our new pdf path so that's where we're going to save the document and now whenever you are using something like input output stuff where you're saving things let's make sure that we're also closing the stream here so pdf document close true and the word document we should also close all right so that's how we convert a document to a pdf so let's now actually call this once we have selected zero and we just check if that's actually going to be dr pdf yes it is so our first option is going to be dr pdf that's the zero version or the zero option of our conversion drop down select index so this point let's test our application and let's see if it can convert a document into a pdf therefore let's go ahead and create a new document and a new rich text document should be fine i'm going to call it test1 and write something like this is test1 let's save it let's close this file and now before we can test that let's actually make sure that our open folder is going to be called once we click on the convert button click so here open folder and what should it use it should use the path text box text as the string so this is going to return a string the text box text is of type string and it's going to call this open folder which will then open the folder with the file name explorer exit so now let's run the application make sure that we select the dock to pdf let's select the file let's say we select our test one rtf let's convert that and it opens up the explorer axle let's look at test one pdf and we see this is test one created with the trial version of syncfusion essential pdf perfect so now we have the first part of our application we can now convert a document to a pdf file even if it's an rtf document so it's not a docx file or a doc file or something like that it's an rtf file you could try that with a txt file it should work the same so you see now we have the text here of the the location so to speak of where our file is and it's under pictures test one rtf okay so that was part one now we know how to convert a document to a pdf now let's convert a png to a pdf okay so therefore let's go ahead and create a new method here private void convert png to pdf and it should be one name and here we are going to use the png path so the path of the file so first of all we're going to need a pdf document object here which i'm going to call pdf doc conveniently which will be a new pdf document then we will need the pdf image so pdf image object which will be a new pdf image but we're going to get that from pdf image dot from stream and we're going to use a file stream here so from stream needs to have a stream as a parameter so we're going to use a new file stream object file stream where we pass in the path so it's going to be our png path and we need to pass in the file mode so how we want to handle the file and we're going to open the file like so okay so this will give us the pdf image now we need to have the pdf page which will be a new pdf page object we need the pdf section which will conveniently be called pdf section which will take our pdf doc sections and add one to it okay so take this pdf doc and add a section to it and then we take the pdf section and we insert the pages so here pages dot insert at position 0 we're going to insert our pdf page and now we can use that pdf page to draw the images so this is where we're going to need and this should be our pdf page object and not the pdf page class so here we can use the graphics draw image with our pdf image so this is not going to be image actually i call it image let me rename it to pdf image i want to rather have a proper name here so we're going to use our image and we're going to position it at zero zero so draw image you see it start well it says zero zero so using the original physical size at the location specified by the coordinate pair so we're going to say it should start at the top left side with the drawing with not starting anywhere else and then we can get the new png path and that's that's just brilliant what this new visual studio can do for us so new pdf path just knows what i want to type even without me typing it i love it and here we're going to do the same split as we've done before with this here where we're going to store it as a pdf after all right so that's going to be our new pdf path now we need to store this pdf document and save it using our new png path and then we need to make sure that we close our pdf dock that's how we can convert a png to a pdf so let's take care of that in our other cases so here case one so what do we want to do here we want to convert to pdf and then we want to break now obviously we need to pass in a path and we're going to use the path text box dot text here for our convert p and g to pdf so now let's see if this is going to work let's actually select the png so select file let's select this doggo let's convert it oh actually here png png2 pdf oh i think that's case two then so let's add case two here instead of case one let me refresh i'm not sure whether hot reload would be fine for this particular application so let's use double let's convert a png to pdf let's convert it and it opens double pdf even though i think double pdf existed already so probably overwrote it let's try again and it seems like i have an error so the process cannot access the file c png because it's being used aha so i should probably not use it so let me close the application real quick make sure i'm not using it anywhere i have just too many things open at the same time let's try again okay so select the doggo select png to pdf convert and now we have the docker pdf beautiful i love it let's rename this real quick to toggle1 png just to make sure well it's not going to be possible because we are currently using it with our beautiful literal super pdf converter powered by syncfusion okay so now let's take care of the last step and that was to take care of case one so as you see i've beautifully started with case two instead of case one let's break here and let's add the to do to do convert what was it i think pdf to dock pde f to dock so let's put that in there and actually let's actually create a new method for that so this one will be private void convert pdf to dock with the pdf path all right so let's get started so what we're going to require here is going to be a word document i'm going to call this word doc humant which will be a new word document then we will need the new section so we are going to use called something called iw section which will add a new section to the document i'm going to call this one section and this will be a word document dot add section so then we can use that section to set up the page with margins all being zero so i'm going to set all margins to zero then i will need to set up the i paragraph where i'm going to create my first paragraph here which will just be add paragraph here and then we need to create a new size f struct to store the value of the path with and its size so size f will be a default page size which will be a new size f and here i need to pass in the word document dot last section and particularly its page setup dot page size dot width so we're going to say how wide it is and now i'm going to do the same thing with the height so we also take the word document here again but this time we're going to use its height because we just need to pass that for the default page size it needs to know how tall a individual page is so that's the size and now we can load the document the pdf document to be precise from the given file path so using pdf loaded document which will be a loaded document which i'm going to call loaded document which will be a new pdf loaded document with the pdf path so this is just a pdf document that we loaded a relative path that we are passing to it and now we can do the magic so this is a little more complicated you see the others were quite simple i'd say but converting a pdf to a document is a little more complicated here because now we need to go through every loaded page in our document so i equals zero and then actually let me see come on give me something ide i loved what you had to offer there so i zero now it doesn't want it anymore okay so i need to check the loaded documents pages that count so how many pages do we have and i want to go through all of them okay so that's what we're going to do with this for loop and then i'm going to use an image which will be loaded from my documents export as page or as image at this page and here default page size false so we're saying keep the aspect ratio we're going to set that to false the page index will be i and the size of the image will be our custom size that we have set up before which was this default page size so this is the size f object that we created we need this specifically to load the document and export it as an image okay so then we can go ahead and again run some beautiful eye picture code so here we are going to load the first paragraph dot append picture image and then we're going to define the picture with to be the width of the image as well as the picture height the height of the image so let me see what it was unhappy no that's fine all right so this is our using code we need to finish it with a semicolon here and then we can go ahead and create a new pdf path where we're going to use the pdf path split it at the dot and now add a docx to it so dot dot x because that's how it's going to be stored okay and now we can save that document so word document save new pdf path and close the word document as well so actually dispose of it okay and this should take care of converting pdf to doc let me see let me put that in here we need to call it with our path text box text okay so we need to pass in the text so now what we want to do is we want to convert a pdf into a doc so let's run this application let's see if it crashes seems to be all right let's select a pdf this time the the test pdf let's convert that into a doc file convert well actually i need to select obviously so let me select i think it's pdf2doc yes convert because i don't have microsoft word installed here i need to drag it over to google drive and i think it was the test1.x and then once it's uploaded we can open it up from here grammarly wants to correct the grammar and we can see created with trial version of syncfusion essential doc io and there we have our pdf file test one or two this is test one okay perfect so you see that's pretty much our application it works flawlessly even though there are a couple of things that i would still like to improve and i'm going to first of all take care of the theme which is still quite an important aspect and then i'm going to take care of the resizing problem okay so let's take care of the theme first therefore i'm going to go over to my main window method that will be called directly when the application is started right so while the components are initialized and i'm going to set up a couple of things here so i'm going to use the fluent theme which is part of our syncfusion sf skin manager namespace that we added earlier creating a new fluent theme object like so and this object well once it's created will run some beautiful extra code so here i'm gonna set the theme name to be fluent light then the hover effect mode will be set to none so i don't want to ever have a hover effect the pressed effect modes i'm going to set that to glow so you see there are different effects that you can define like glow reveal none okay and then show acrylic backgrounds i'm gonna set that to false because i don't like it too much okay so it really depends on your preference and now we need to close this line so this is our fluent theme that we created and now i can set up a fluent theme settings object so this will be the theme settings which will be a new fluent new fluent light theme settings object that i can now set up so i can set the theme settings that i want to have for example i can just say okay the body font size should be 16 then the font family should be something like barlow so here new system dot windows dot media dot font family should be and here there is this barlow option all right and then i'm going to set my sf skin manager dot and i'm going to register my theme settings which i'm going to call fluentlight which is the theme name that we had up there with my theme settings that i've just set up okay and now i just need to set it so i've registered it and now i need to set the theme so i'm gonna say i want to use the fluent theme for this page and that should change the theme so now you can very easily change your theme directly so you see now i don't have this glowing effect anymore we fixed the bug where those items didn't look correctly now we have this grayish effect for our buttons and png to pdf and so forth so it looks a lot better and works flawlessly so now let's fix the resizing bug okay and if you want to be able to resize your application there are multiple different solutions there is one where you would do it via dependency properties but i'm going to simplify it because even though i said at the beginning even though i said at the beginning that i wanted to use this layout transform this one here and it was actually at this level layout transform with the binding and the scale value i have decided to not do it because it's just too much we would have to set up four or five different methods and would use dependency properties and so forth while this would be best practice it's just too much effort for one little application where we can have a significantly faster solution okay so i'm going to show you a very easy solution how you can make your windows resize and i'm gonna paste the code in here and go over it because this is not the focus of this application and not the focus of this youtube video but i'm going to create a new method here which i'm going to call my main window size changed and this will be an event method so this should be called when we are changing the main window so there is this size changed let me call a new event handler and let's call it my main windows size changed and let's see did it create a new event handler for me yeah it did so it doesn't seem to be happy with mine ah that's because i i put it outside so let me just cut this part out and go over it with you real quick and then we can delete this okay so what's going on here when we are changing the size of our window well the thing is what i'm doing is i'm getting the main windows width and i'm getting it from this event and i'm setting it at the same time so whatever this set size changed event args e is going to give me as the new sizes width and height i'm going to set that for my win window then i'm going to set the exchange and y change to be 1 by default and we're going to overwrite them so if the previous width was not 0 then set the exchange to be the new size width divided by the previous size width and the same goes for the y change so it just says okay whatever is this percentage in change please store that in y change and then for every single framework element so for every single ui element called fe inside of my grid children so i gave my grid a name let's go over here and make sure that my grid here has a name i called it my grid so for every single item inside of the grid check if the grid is equal to false so fe in grid is equal to false if that's the case then set the height of that framework element to be the actual height of that framework element at the moment of executing this code multiplied with whatever the ratio for y change is and the actual width whatever the value for x changes and then modify framework element so the fe okay so this just resizes the elements inside of our grid now there's one more thing that i want to do i want to make sure that there is a min width and min height for my window so min height of 300 and min width of 500 because otherwise we can make it too small so let me rerun this and now you see we cannot make it smaller but we can resize it make it bigger now you could of course say i want to also make sure that the super pdf converter text is changing in size and stuff so that would be a little too much effort for this video but you can just go ahead and adjust the font size based on whatever so multiply the font size of the framework element with whatever y change or exchange is but that basically concludes this project so now we do have this beautiful little project that we can now resize we can convert all kinds of stuff we can convert a document to a pdf a pdf to a document png to your pdf and yeah that's pretty much it thanks a lot for watching this video i hope you enjoyed it now you know how to create a pdf converter and thanks a lot to syncfusion as well for sponsoring this video they made it possible for us to create this cool little application and if you want us to build more of these kind of real world applications then hit the like button if you haven't done so already and subscribe and also leave a comment with some ideas of what you would like us to build

Channel: tutorialsEU

Views: 2,433

Keywords: Tutorials, Tutorial, Programming, Course, Learn, Step by step, guide, development, programmer, video course, video tutorial, learn how to, how to, Csharp WPF, Syncfusion, syncfusion asp.net core, Convert Doc To PDF, Convert PNG to PDF, Convert PDF to Doc, Making the App Responsive, Register with Syncfusion, Setting up the WPF UI in XML, Loading the NuGet, Setting up the Syncfusion Theme, syncfusion tutorial, convert pdf to word, convert png to pdf, convert png to pdf tutorial

Id: agK1VK2CIrE

Length: 61min 38sec (3698 seconds)

Published: Mon Nov 22 2021