How can I implement an interactive tutorial inside an app? - c#

I have C# add-in for Word and would like to implement an interactive tutorial like games usually have. I'd like to somehow highlight (maybe by circling) certain visual elements and display text boxes that describe what the element does. For example, say the add-in is a generic workflow editor. I'd like to show to the user, step by step, what needs to be done by visually selecting elements and explaining what they do and what options (s)he has. My first question is: can this be done in C#? My second question is how? :) I suppose I'd have to get the positions of said visual elements and then draw an image on top but I don't know how that could be done.

I'm a bit disappointed that not even a single member of the Stack Overflow community took the the time to at least give a hint about this. But such is life and I'm just going to share my findings here because I'm certain someone else will benefit from them.
To be able to do an interactive tutorial you need three things:
a method to find where a control is located in terms of screen coordinates
a method to point the user to the control by highlighting it or
surrounding it with a red line for example.
a method to do its default action (ie: click a button).
In other words, the idea is to have some sort of window with text describing a control and some graphical way of indicating the control in the app. Optionally, the window could provide something like a ShowMe button which shows the user how to use the control by taking control of the mouse and keyboard.
This is trivial when the controls are made by yourself and thus have source code access. However, when doing such a thing for a black box app such as Word you can use the Windows IAccessible interface. Searching for that with your favorite search engine will yield everything you need to understand it and use it. IAccessible allows one to do many things but most importantly it can get a control's position and can also do the default action.
Having sorted out these things the next step is to figure out how to graphically point out the control. There are many ways to do this but in my case I chose to surround it with a red rectangle. I did this by creating an invisible, borderless form with an empty red rectangle on it. Having the control's position and size, I had no problems placing the aforesaid form over the control.
So there you have it. I laid out the building blocks that one needs to make an interactive tutorial for any app.

Related

How to make a window manager?

I tried writing code several different times, but I came to an error with each one.
Basically, I'm trying to make "windows" similar to say Explorer, Paint, MediaPlayer, where you could drag then around, interact with them, minimize and close. Of course, if you clicked on a window, the one below it (they can overlap) shouldn't get affected.
I know how to do this, I have a list of the class I call Window, loop through it, and I only interact with the first window to contain the location of the mouse-click. This way, other windows overlap won't get affected.[1]
Next, I had to make it so that two buttons that are overlapping don't get activated when the user clicks in the "intersection of both buttons." I handled this by using the same method I used above.[2]
But the problem I'm facing now is that, if I hold the left click, but then I decide not to click a button, I drag the mouse away from the button, and release the left click, so that the button-click event won't be activated. But, when I remove the mouse from the boundaries of the button, and say, into another.. the new button get activated. Which it should not.[3]
My set up is like this:
I have a class called Window.
In Window, I have a list of the class called Interface (similar to the Control class in WinForms).
And each Interface has a struct in it that contains 4 bools, if the left/right is currently down, and if they were down in the previous processing. (prevLeft, prevRight, currLeft, currRight)
So, I'm ready to discard that (I have not yet, so I still have the source code), but I need a good structure for making an object-oriented type of application. However, I am not using WinForms. I need help with the structure alone, so no actual code is necessary, description is enough. I need to avoid the 3 problems I mentioned above.
Creating your own Window Manager is not an easy task. I know it because I'm making one too ;)
You can use an existing, though maybe not the best solution, like for example Nuclex.UI, which I personally rejected when I first saw it, but if you're not dead set on making your own WM, I suggest to use that or hybrid WinForms-XNA approach.
But if you're really dead set on implementing a custom Window Manager, you have to understand how any other WM works. Since we're talking about XNA, it means Windows, and that means Windows Explorer, which is a great thing to learn from.
You have to recognize how the simplest things work, and it's really not so hard. The hard part is figuring out what logic is updated when, and how to not spend all the CPU on only UI updates. Let me just give you a few hints on how to solve the problems you mention in your question.
To keep track of all windows, I'm using a Dictionary<string, Window>, where Window is a custom class, and the string is its unique name for rare cases where I have to call windows by name. Think of it as a window GUID or Handle. But you can just make it so that a "Form" can only appear once, and store all references in static variables.
To make WM understand what control you're clicking I use rectangles and check if they contain a Point which is at Cursor coordinates and has {1; 1} pixel size, which is probably about the same way it's done in Windows Explorer. To do that your WM needs to know in which order to update the active windows. Usually you'd want to start from the topmost window and continue towards the end of the list of active windows. For that you can just iterate through the list with a foreach loop.
But that's not all, because every window itself is a Container, which means it contains other controls, some of which may even be Containers themselves, like WinForms Panel class. This means you have to iterate through each of the Windows' Children controls. The update order should make sense too - update from the topmost child to the bottommost, recursively for Container controls, in case they also have Containers in them. This basically means you'd want to implement a recursive GetAllControls() method for your WindowManager class that would iterate through all Containers and return a list of all Controls.
Drawing all those Controls should be done in reverse order of updating them, so you can just GetAllControls().Reverse() and iterate through that in a foreach loop.
Where to draw and what to update depends on all the parent containers the current container has and their combined offset from the top-left corner of the game window. I solve this by storing a ParentContainer reference in all children controls to get the appropriate DrawRectangles and update areas via recursive properties.
When you click somewhere on the screen and a click is registered on a Control, make the WindowManager remember that (bool clickRegistered) and not run any OnClick events on any underlying Controls.
Windows Explorer remembers the control you clicked and will activate its OnRelease event if the cursor is then released in the update area of the very same control. So basically Windows Manager only does something when you release the mouse button. You can make your WindowManager and Controls to handle click events differently, like firing an event right after you press the mouse button, i.e. OnMouseDown. But remember that Microsoft aren't noobs and there's a reason for that behavior in Windows Explorer, and it's because if you accidentally press a mouse button somewhere you didn't intend, you can still fix it by moving the cursor outside the pressed control's update area and not run its action.
At this point you might be thinking "Is it really worth implementing all this?" For me the answer was "maybe", because I was a total noob in both C# and XNA at the time I started, and now I know my game, which was originally supposed to use some Window Manager, is going to benefit from my own WM implementation far more than from ready third-party solutions. And besides, it's a great exercise in logic and programming.
But if you'd like to think of yourself as a game developer, you should think in terms of reaching your goal as quickly as possible, i.e. actually making a game, and not the game engine. So in this case, better make use of existing solutions and start selling your product.
Instead of having the structure with the 4 booleans (similar to xna), how about you make a way to tell where the mouse "is." So in a sense, the mouse is in Window number 5 which is Paint, and the user is holding the mouse down on interface/control number 2 which is a button.
That sounds like it could work.

Universal point position

Is there a way to know the universal coordinates of the point?
I mean the following:
we have the button which could be pressed by clicking (500;500) when application maximized;
if it possible to know which point to click to press the button when the window of application is 600x600;
And so on. Is there any function to calculate such a point?
Thanks in advance!
I don't think there is a general function, since any developer could change the appearance based on screen size.
However, different approaches may work:
Somehow get a handle to the button/element of interest, then just call its clicked command, or use that handle to get the coordinate position on the screen.
For instance, with Web pages, you can get the specific HTMLElement by name (or id) and then work backward from there.
If it is a Windows Form application, you can actually get a handle onto the window of that application, and then get the desired element/component by walking through them all.
Create a list of the button locations under different maximization/restorings/movings and calculate the function from that. (Perhaps make a computer program to help with this).
As a last-resort, like for applications which randomly move their buttons around to confuse bots (I can't think of any real life examples), you might need to do image analysis on a screenshot.
The spy++ tool in/for Visual Studio has a finder tool that can help get the window/element names of windows applications.

Contextual Text Editor in WPF

We are currently looking to create a text-editor in WPF (.NET 4.0) which will allow writers within our team to create movie scripts. In short, the functionality should ressemble that of FinalDraft or Adobe Story (i.e.: contextual positioning of text depending on the cursor's position and user intentions)
We are currently looking at two different solutions design-wise:
One WPF control which will act as the container, and multiple small text-editing controls which will represent rows within the script. This will allow us to position the controls using their margin, while also making binding easy. The challenge here would be the handling of multi-line selections. I was thinking of using a Listbox as the container, and each listbox item would be a custom control containing a textbox. This would require the instantiation of controls depending on the user's action. Everything would be skinned to give the impression that the user is working on a blank page.
One big textbox capable of displaying custom XML data. The challenge here would be to determine where exactly the cursor is located (i.e.: is the cursor on top of an actor's name, etc.) and positioning the text appropriately (i.e.: actor names are centered and in caps, etc.)
I recently tried implementing the first solution, but having to re-implement the whole selection behavior that is built-in in basic text boxes is non-trivial and requires a lot of work. As for the second solution, binding to my business objects will be much harder than simply instantiating multiple controls with different bindings.
Do you have any other solution in mind ?
I needed a text editor for a application once. We had a big xml file for settings and the user should be able edit those.
Turns out , if your file is large enough (+ 10000 lines) the rich text box is getting pritty slow.
As for building a gui mask : only if your user wirtes some short options like text. But is i understand you want your useres to write creativ text. This "mask" gui - "lot of small places" will make them feel like they are in the 80ties.
I suggest: Dont write the Programm , only write a Plugin to an exitings editor. Some are free like:
http://www.codeproject.com/Articles/42490/Using-AvalonEdit-WPF-Text-Editor
or an add in for word - people love Word and know Word
http://www.codeproject.com/Articles/8837/Writing-a-Word-Add-in-Part-I
And for binding data and the like: Once the text is written, the user just need to press the save button and you can parse the input for information. I would not do it on the fly as it can get pretty slow. Also you say that the information is linked so only if all the data is written you can make use of it.

What is raw code of textbox

May be i can get some negative points on this question but, really this question is boggling in my mind from last many days that what is the basic/raw code behind textbox(or other such controls).
i mean i understands that, we can inherit the textbox class and make our changes, we creates its object and use it.
but wants to know how that class creates a textbox(the design which allow us to enter text) (same query for other components), is it a code of 'C' language which are generating it using CG (computer graphics) programming or any other thing.
Experts please resolve my curiosity.
Thanks
Windows provides several basic API's for drawing on the screen. You can draw pixels, lines, boxes and more complex geometric shapes. There are also API's to draw text. Other API's allow you to react to user input, e.g. mouse movement and clicks and keyboard input.
From these basic API's you can create your own text box by drawing the exact pixels of how the text box should look and react to user input. However, Windows has a built-in concept of a text box. This text box has a standard look and feel and is also integrated with UI concepts like focus, tab order, the clipboard and the caret. But behind the scenes Windows is using the low level API functions to draw on the screen and react to user input.
When you create a TextBox in Windows Forms it actually creates and wraps a standard Windows Edit control. This control is drawn using GDI. However, other programming models like WPF may create TextBox controls that looks like a normal text box but uses a custom implementation supplied by WPF and is drawn using DirectX.
Use http://www.red-gate.com/products/reflector/ and see for yourself...
Here is what I think it is doing:
The Raw code behind TextBox or any other Control uses Windows API that is responsible for drawing these controls and provide Handles of these controls for later reference.
Windows has been using different methods to draw it's UI like GDI, GDI+ and sometimes DirectX. I may be wrong and there may be some other techs I forgot to mention.
These controls use each window's WinProc to receive Input Notification and other callbacks that notify these controls when clicked, typed or for example resized.

Rectangular BackColor of selection in RichTextBox

Background:
I'm going to start studying/coding at the local university's library. Since I'm not a student, I won't be able to utilize their wireless internet access. Since StackOverflow is such a great resource, I want to be able to take it with me, so I'm building a small desktop application to load/search/display the most recent data dumps.
Problem:
I want to display code blocks in the same sort of rectangular block as this site does, so I played with the RichTextBox control to try to create this effect. Unfortunately, the RichTextBox.SelectedBackColor property only colors the actual text, when what I want is a rectangle reaching to the outer limits of the selection.
Example:
This is what I am able to produce with the RichTextBox:
This is what I would like to create:
Questions:
Is there any way to produce this effect using the RichTextBox?
If not, are there any other controls I could use to create this effect?
I don't think so, there is no mention of controlling this behavior on MSDN.

Categories

Resources