I'm in the process of writing a small text-editor that is supposed to have very basic formatting capabilities, nothing fancy, yet more complex than what RichTextBox can provide (including a 'page' display functionality).
However, last time I wrote any text editors was with WinAPI in C for Windows 3.1. I have no idea on how to approach this with .NET. The furthers I've gotten until a blank is using TextRenderer.DrawText() to output the text I have into a rectangle... but something tells me that's not the way to go in this case, because I've thought all along that for one, I will want the background text in XML format... and while I can break up the paragraphs with tags, I have no clue how to do the formatting, such as or a different font family, so it probably need to be approached a little differently. Probably each word separately. Do I have to keep each word in an array (with respecting xml tags) and draw it as a separate control keeping its positions in an array as well? That sounds like an awful lot of memory and drawing power if we're talking about hundreds of thousands of words in one file (it's a possibility, although I highly doubt one file would extend beyond 20000 words, however anything's possible and together with the word's points (formatting is only available to full words, so no worry about that) it may grow pretty big with memory usage, something that I don't particulary prefer to happen.
So... what I'm looking for is a few hints and tips (I can't use Tx Text Editor, DevExpress or Telerik's RichTextEditors for a good reason plus their price). on the most correct way to build a 'word processor' that is well extendable with C#.NET as it's the one thing I have so far never had to stick my nose into.
Basically:
1) Best way to draw text into a custom control. How should I keep my text? I will probably use the base Text property for pre-formatting stage when I load the files. Or perhaps I'll extend it with my custom XML class? Should I keep words in order in position and joining them by hand when backspace is used? Etc etc.
2) Best way to do selection (probably only one way I presume?), while in WinAPI I could just detect the character under cursor as it was standard text, considering the amount of fonts and the way windows draws the characters I would either have to OCR and then start calculating position... so I presume there's a better way of selecting text?
3) Editing text - which I would assume is simple once I have a cursor position.
Cheers for reading and... hopefully someone comes up with a better solution than my feeble DrawText which... isn't really the solution.
If you're looking to create a more fully-functional text editor in WPF, you might want to start with this sample and work on from there.
Related
I do have a C# application that calculates storage space in terms of boxes, for some products which itself consist of several parts.
The calculation includes suggestions on how many single parts to put into one box, taking in account volume and weight of the part. The overall result states the number of boxes needed for a given quantity of products.
As of now I am putting the results into a database and then copy it into an Excel file. Furthermore I am creating some charts to better visualize the numbers.
I am not satisfied with this solution. I do however have no idea, on how to programmatically produce a printing output. I am familiar with standard printing in C#, but woking with various sized tables and charts there just seems wrong and an awful lot of work to me.
I have to admit I am lacking some experience in this field, therefore I would be pleased to hear from you on this matter.
The short answer is, it is going to take a good amount of work. I think the most important step towards coming up with a solution is stepping back and realizing everything that needs to be printed and how you would handle it if you were a printer (sounds weird, I know!).
You're going to want to write your own DocumentPaginator and draw elements for each page in the overriden DocumentPaginator.GetPage method. The DocumentPaginator is what the printer uses to print documents, so it calls the GetPage method and you can send it a DocumentPage with user controls drawn on it. You also have to be able to do things like calculate how many pages to print, so keep that in mind.
Since they are different sizes you have a couple options that I can think of:
Only draw (scale) the tables/charts to be the width of the maximum size of the page being printed
Draw 1 visual per page (I would suggest keeping them all landscape or all portrait oriented to keep it simpler for now)
Basically if you're going to use the PrintDialog's dialog for the user to select the printer and printer preferences, it'll save you some work. If you don't want to show a dialog, then you will need to become fimiliar with PrintDialog, PrintQueue, XpsDocumentWriter, PrintTicket, PrinterCapabilities, PrintServer, and DocumentPaginator.
Note: If you allow a users to print 1 control across multiple pages, realize that providing "half drawn" controls and/or printing both "vertically" and "horizontally" adds another degree of complexity.
I am developing a windows form. I want to change the physical appearance of the form and its controls. I was able to use the Skincrafter demo, however this is making the application substantially heavier. I am not satisfied with how "heavy" it feels when navigating through tabs, moving the window, etc. It's fairly simple program and I do not have this issue when not using skincrafter. When not using it, the GUI is very responsive and I want to keep it that way.
I've tried many different skins and the results are very similar in every case.
So I will not be using skincrafter unless someone points me out to possible reasons for this slower GUI. I followed their tutorial and didn't do anything else. Simple process. Before: fast GUI - after: slow GUI.
Can anyone recommend me another way to change the appearance of my controls/form? Is there way to programatically change the appearance of controls and form, without relying on a third party skinning software?
Note that I do not want my users to change skins. I want to apply one and that's it.
thank you
Steve
Edit:
The project is far from done so I am going to give WPF some real good thoughts so I don't end up doing this when I have a 4x times as large as it is right now.
I've already start converting and it shouldn't be much of problem. Found timer and serialport cannot be front from the toolbox and timer are replaced by dispatchtimer. No big deal so far.
One another thing that makes me want to work with WPF is that I may have the need to make graphs (plotting) to show temperature over time. I use serialport to communicate with an external USB controller (virtual COM port) that reads a bunch of temperature sensors and fan speeds. I suspect graphing to be better with WPF.
One last thing: it's just about colors/fonts but more about looks of the buttons, looks of the actual window (border shapes). What I wanted to do was something similar that is done with html and css. I do want to have custom labels to give them the look of a "digital display" for real time temperatures and fan speed measurements.
again thanks all for the help provided!
In the distant past, I added lightweight skinning to WinForms projects by subclassing the out-of-the-box controls (Label, TextBox, etc), and having that subclass read in appearance configuration (e.g. color, font) from an XML file (one could also use app.config).
That approach was easy to implement, and I saw no visible performance degradation.
If you just want a consistent, new look and don't need to enable the end user to pick from a variety of skins, the subclassing approach is very straightforward. For example, to modify the look of a Label:
public MyLabel : Label
{
MyLabel()
{
this.ForeColor = Colors.Blue;
}
}
Then, everywhere you currently have a Label in your code, use a MyLabel instead.
If you are starting a new project, I would highly recommend using WPF instead. It provides a much more flexible UI framework. One key feature is that it separates the look from the UI implementation.
I have a small display on my keyboard, it's 320x240, I'm creating a plugin that allows me to see skype messages on this display even when I'm playing full screen games.
The biggest problem I have, after solving all things about interacting with skype, is that I need to show chat messages in such a small area.
I'm using a font with size 10 to avoid unreadable text, this will allow me nothing more than 7 lines and around 40 characters per line.
I need a way to write a string on multiple lines, I've imagined some ways but I don't want to reinvent the wheel, I'm sure someone found the best solution for this, otherwise I couldn't have written this question :)
So, how to write multiple line string with gdi+ on an image of size 320x240? (well, we should consider it of size 290x240 because I have a header).
I solved the problem by myself:
First, drawstring method do already "what i want" (makes the text fill a rectangle, if possible, otherwise keep writing it increasing height and not width).
With measurestring method, you can do the job.
I managed to split the string in multiple lines using some custom algorithms that worked well talking about performance. I won't enter into details because the algorithm is focused on my application and is definitely not generic.
NOTE: I am not exactly sure how to title or tag this question, so if you have any ideas, PLEASE help!
I'm currently envisioning a few possible projects that involve dynamically rendering something (whether it is a point, a line, text, or music notes on a staff, for hypothetical example), but, if I were to undertake these projects, I'm not really sure how to approach this design. What I'm curious about is sort of how programs like Word, or Geometer's Sketchpad, or Finale, create a blank "canvas" and render text, geometry, or music on it, respectively - how can this be done in C#, or in .NET, in general?
First of all, what is the best framework/platform to use: WinForms, WPF, something else? I'm open to many options, as I'm just trying to understand the different ways this can be done.
Next, how can I create such a "canvas" (if we go back to that metaphor) using the different frameworks you answered for part 1? And also, how can I render stuff onto it?
I hope my question isn't too confusing or n00bie. I just don't know how to approach such a prospect. Thanks!
UPDATE: I have now posted a follow-up question which is less broad. I have provided an hypothetical example of what I would like to accomplish. However, I will still accept an answer here, even though my question isn't fully answered.
WPF would probably suit your project well. I like the book Pro WPF in C# 2008: Windows Presentation Foundation with .NET 3.5, it covers most of the topics you're asking about.
You'll probably get better answers with a more focused question. The scope of your question is too large to be answered easily or concisely.
WPF makes it easier to refactor designs for such a project by easily moving shape drawing code between just drawing simple shapes and contents of controls. If you need the richness of custom controls, WPF allows a fairly smooth transition.
Most of the graphics can be defined in XAML which means you can export them from programs like Illustrator or anything that generates the standard SVG vector graphics, via an SVG-XAML converter.
I like WPF Unleashed and it has a nice discussion of 2D graphics and how to use the DrawingContext class for such a visual editor.
Do you know that there's an event called Paint? Everytime Windows OS needs to displays or repaint something on your form, this event is triggered. So, you create a Paint event handler, and everything is possible in that. For eg:
Word: you have a WordDocument data structure with the formatted tags and stuffs, you paint each character/ each word or each block of words one-by-one using a desired brush/paint and font. You might also wanna paint your background and stuff... If, for example the user change the font of 1 particular block, your WordDocument must change something to reflect that font change. And then you do an myForm.Invalidate() to repaint your form (and thus update your font). => Dynamically update your GUI.
Sketchpad: you need datastructures such as Line, Point, Triangle, etc. And then, each time OnPaint is triggered, you paint it dynamically. E.g: myGraphics.DrawLine(..), myGraphics.DrawCircle(..)
Similarly to Finale.
One thing you should do is to handle your data structure and drawing classes carefully, and instead of drawing everything in your OnPaint() method, you create several DrawMe(..) methods in your entity classes, and ask them to draw themselves. E.g: myCircle.DrawMe(..), myScore.DrawMe(..)
Hope that'll help,
Ben
There is no universal answer to your question - it is too generic.
Are you talking about dynamicly created controls, standard UI components (dropdowns, buttons)?
Is it vector graphics - like in drawings, or may be it is 2D image processing - or is it 3D?
We are currently trying to improve our usability in our intranet web app. One of our goals is to declutter certain pages which have large Grids on them. To do this, we have started putting commonly used actions (like Delete, Reset To Zero, Mark As Complete, etc.) in the grids as functions.
My initial idea was to find and use icons (i.e. Delete = a big red x, Reset = an arrow curving around itself, Mark As Complete a checkmark, etc.) to represent these tasks. Some of my coworkers agree with me; they say the icons make the tool look more professional. Others, however, say that icons obscure their intended function, and simple text such as Delete would be more appropriate.
Assuming that we will include a tooltip description of the function regardless of the type we choose (icons or text), which one is more usable? Can we use icons for some actions and text for others, or will that hurt usability?
Using icons for some functions and text for others probably isn't very consistent (unless you follow established idioms such as toolbars and menus, which are both places for commands, even though one is for icons, the other one for labels – doesn't mean that it's a good idiom, though).
To quote from Jef Raskin's The Humane Interface:
In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners. GUIs often present us with windows full of identical icons, each with a label. The icons are small and numerous, and there are dozens of different icons. The limited conditions under which icons are effective do not obtain in present computer systems.
Although it is true that tiny icons can take less screen space than labels, you have to ask: At what cost? The smaller a button, the longer it takes to operate it, and the more difficult it is to find; also, it is difficult to make a small icon distinctive. Another small point: Icons take more time to create than do words.
and
Mayhew [1] cites a number of research studies on the use of icons. Unfortunately, most of the studies did not compare labels to icons. But from these and other studies, we can conclude that icons are most effective when there are at most a dozen of them and when at most a dozen are seen at one time. In addition, it is essential that they
Are visually distinct
Do a good job of representing the appropriate concept
Are presented at a reasonably large size, typically larger than a text label would be
[1] Mayhew, Deborah. Principles and Guidelines in Software User Interface Design (Englewood Cliffs, NJ.: Prentice-Hall, 1992).
I'd agree with Raskin on this point that in many cases icons really obscure the meaning of concepts and commands and you need additional text anyway to explain them. Aza Raskin's article The End of an Icon is a good read on this as well.
I'm a big fan of icons. Heck, the textarea I'm typing this answer into right now has nothing but icons on top of it. You've got to be a moron not to know that a big dark B means bold... I think if your icon is self explanatory (like a big red X for delete etc) then that's for sure the way to go. It also makes it easier for the user to find the right action.
I would use icons seen in Windows applications like Microsoft Word and Excel. Most users a familiar with these and their meaning/functionality.
Also; usability proceeds "the professional look". It sounds to me like your application needs to be functional and not a design masterpiece. Therefore your main concern is to have your interface communicate its functionality as clear as possible, so tap into your users knowledge--again; chances are that your users are using Word and Excel on a regular basis.
To top things off; make use of the alt and title properties on image elements:
<img
src="..."
alt="Click this button to delete X"
title="Click this button to delete X" />
I've seen both implementations work with great success. It really depends more on your target audience. Interestingly enough, there are a group of folks where I work that still expect to see text type buttons/links for their actions, so I've tailored those particular apps accordingly. Just provide both options initially and see which one the user base is more comfortable with.
If you can get away with it, can you make your icons large enough that you can embed the text of each action within it? Say a large red X with a small "Delete" text right below it, embedded into the image? I find that that will often suit both groups accordingly.
Icons save space (and with tooltip can be quite usable by beginners), but mixing icons and text would not be a good idea, requiring user effort to "switch". Why not, instead, put "rare" actions into a section of the page that's normally "folded shut" and only opens up when clicked? This saves even more space and clutter, after all.
If it's an obscure function, then icons would probably hurt usability. However, I think pretty much everyone has accepted and understand delete, refresh, etc. As long as you have the tooltips to fall back on, you should be fine.
We always use text in our company, we used to have a product with icons, and got many complains from the clients, for some reason, those icon made the user make wrong operations, especially when they were doing many things at the same time, for example, talking on the phone and entering data.
Personally, I think if the operation is very simple, then icon is fine, but if there are several tasks listed together, it maybe confusing.