How could I interactively create an invoice and preview it on WPF? - wpf

I'm creating a trial project wherein my window has two grids, left grid is sort of a table that has labels and textboxes each row and asks for a specific part of the invoice like item, name, address stuff like that and the right grid is to show a preview of the invoice that the left side is creating.
I thought about using a document viewer on the right side but I thought that anything I open there would be static and if I put values on the textboxes on the left grid, it wouldn't matter since I opened a standalone document to view on the right grid.
I thought about just creating a table out of the right grid and have the default values and populate the other ones when a user types something on the textbox and make it function as the preview but then I don't know how would I go about and printing it and also, it has about 45 rows which I couldn't fit in the grid without it being unreadable (because I had to cram 45 rows of data inside that small grid)
So is there a tool in the toolbox that could potentially create a interact-able grid? I tried the grid control but I can't seem to only make it show 4 columns because that's all I need, I don't want it to show E and the rest of the alphabet because I want it to resize accordingly with only 4 columns to make it more readable.
Oh and I also have devexpress installed so you guys could also recommend something I can use from there. Thank You.

I think this is the best solution since it does what I wanted it to do.
I created a scroll view and placed a grid inside it then set the length accordingly to show it in a reasonable size and let the scroll bar do its magic for me to see the rest of the grid without compromises of the content's size.

Related

Automatically resize form and move controls when new ones are added or a text in a label grows

Beginner in Visual Studio here.
I'm trying to create an C# Windows Form application that simply displays a form to show some information about the local system.
I have created this form with the help of the VS designer:
As you can see, it consists of a simple panel with a PictureBox at the top, a label below it (both centered), three table layouts next to each other, and a button at the bottom. Never mind the label texts.
The rows of all the table layouts are set to absolute, this is because I want to programatically add rows to the end middle and right table layout if there are more than one local IP address in the computer and setting the rows to auto size or percentage would make alignment difficult if more rows are added.
Now, my problem is that I can't figure out how to make the form resize and move the controls (specifically move the 'OK' button down) when more rows are added.
I have tried anchoring the button to the bottom edge of the form as well as the bottom of the middle table, both produce the same result: the button stays where it is and the new rows overlap it, like this
I would also like to know how to have the form resize to fit the contents of the labels. For example, if the text in one of the labels inside the layout is bigger than the column width, I'd like to have the form grow to accommodate it. Likewise, I'd like the form to shrink to fit the largest text.
I realize that this may not be the most efficient or easiest way to create this particular form, but it is what I've come up with, I of course welcome any suggestions in that regard. It is important to maintain alignment between the rows of all table layouts.
Thanks in advance.
Use a data grid and add controls to it if an add button is pressed. You can scroll through the rows so you won't need to adjust the height of the form

Container with shape like circle lines border and textblock

I am creating grid dynamically and adding 200 rows and 240 columns and adding stackpanel at each position of the grid So totally i am drawing 4800 stackpanels .Now i want to add lines circle and 3 text blocks in each of the stackpanel
Till I am adding grid add stackpanel it working fine and rendering all controls within 4 seconds which is okay .But as i started adding text block as a child control in scakpanel it taking too much time . Should I use any other better and light weight control . Or instead of adding text block can use DrawText on show text in stack panel. I further want to use drag drop functionality for stack panel so i must use only container will move along with its child elements
I think you can avoid adding the columns and the rows phase, instead of using a Grid you can simply use a canvas and handle the tabular view (rows and columns) from your code behind using the the Left and Top properties.
Beside, a canvas will be convenient to use the drag and drop functionnality. you can use for that the MouseDragElementBehavior. but then you have to deal with absolute positioning according to your Parent Window rather then the Top and Left Properites. It still realtively easy to do.
If you're using a large view where there is only a part of it displayed, you can load only the part in view.
I Hope this will be helpfull.

Silverlight (wp7)

Being new to silverlight I'm struggling to 'get going' with the following.
Basically I wish to create some form of grid like control (custom or user?).
The idea is similar to that of a planner. Along the top are times (set intervals). Downwards are subjects. Then over the grid like background rectangles (or something) indicate when the subject is planned for.
The actual design of the above is not the issue. i.e. a grid with ractangles overlaid. But my issue is I wish this grid to be scrolled up and down (with bounds fixing the top and bottom when the subject lines start and end). And also the grid to be scrolled left and right (with bounds fixing how far left and right it can scroll, current time & 3 days into future).
Based on the above needs, I don't wish to create a control which is very large, and just dragged into view (unless this is the only way?) but instead show the grid at a current time and when dragged dynamically load the next few hours worth of content, possibly with a few hours buffer.
The appearance I am seeking is it looking like it is one massive control, but truely its not, its dynamic.
Does this make sense? Am I worrying about nothing? Should I create a massive grid well into the future and then just handle the load of data dynamically over the top? Its just my concern if I want a grid 3 month into the future this would be massive and a waste of memory.
I'm struggling to find examples on the net, but feel this maybe to do with me not knowing what to search for. This isn't about getting a detailed answer and someone doing it for me, but instead about guidance pointing me in the right direction.
Many thanks
About the up-down scroll: you can simply put a grid containing your data in a ScrollViewer control - this will handle all the scrolling for you. Another solution would be using a listbox control - this is better if you use MVVM. You can bind it to a data source and set as data template a custom control.
For the left-right scroll. I'm thinking you could use gestures for this. Like - catch left-to-right and right-to-left flicks and change the data in your grid / listbox according to the gesture's direction. You could also place two buttons at the top of the grid to handle scrolling from one day to the other (just like in the calendar controls: gestures + buttons).

How to use Blend to create a basic Grid

I'm a developer who's trying to get the hang of Blend. I've always used Blend to mess with control templates and such, but I'm trying to get the hang of using it for basic UI design, since I figure it's probably a bit faster than typing the XAML up manually in Visual Studio.
Right now I'm just trying to create a basic Grid, but I'm seeing two default behaviors that I'm hoping someone can show me how to change.
1) When I hover my mouse outside of the design surface, I see the temporary yellow line to show up, where the new Grid Column / Row will be when I click. The problem is that the newly created rows are set to heights like 0.2297* How do I get Blend to attach regular heights, like 250?
2) Ignoring 1), once I have some rows and columns, when I drag a button, or combo box, etc, onto one of the cells, it drops it exactly where I release the mouse, while adding some large margins to position it there. Is it possible to tell blend to just drop the control into the cell, and leave the margins alone?
Grids are awesome but it takes a bit of play to get proficient at working with them in Blend. Here are some tips to get you started (I cover this in detail in chapter 4 of my book).
1) When you use the snap lines to create rows and columns Blend automatically makes them relative (Star) sized, which is the behavior you are seeing. To change the row/column style to fixed (Pixel) sizes, click on the Padlock icons to the left and top of the desired rows and columns. Then, either edit the values in XAML or you can click near (but not on) the padlock to select the row or column. This will open the sizing properties in the Properties panel.
2) The short answer is "No". Blend will always add Margins when you draw the element in a cell unless you take care to draw them to the borders. This is too difficult and time consuming, so I just make sure I draw it somewhere inside my target cell. Now I can right-click the element and select "Auto Size > Fill" and the element will fill up the cell: no Margins, Width and Height set to Auto, and Horizontal and Vertical Alignments set to Stretch. [FWIW, addressing this is my number one feature request for Blend.]
I hope this helps.
To answer point 1) Blend is creating proportional grids so that the columns remain the same relative widths when you grow or shrink the grid rather than absolute grids. So if you want absolute grid widths you'll have to go in and edit the values by hand.
I find that it's easier to create the basic form in Blend and then tweak the values in the text editor - either in Visual Studio or Blend itself.
As for point 2) I've just tried this and as long as I click inside the column/row on the grid when placing a button it adds it to the correct column/row of the grid as expected. Select the button and then just double click inside the grid - this should add a button of default size where you clicked, but in the grid. (It would be much easier if I could see what you were doing).

Why don't my scrollbars work properly when programmatically hiding rows in silverlight Datagrid?

I have a Silverlight datagrid with custom code that allows for +/- buttons on the lefthand side and can display a table with a tree structure. The +/- buttons are bound to a IsExpanded property on my ViewModelRows, as I call them. The visibility of rows is bound to an IsVisible property on the ViewModelRows which is determined based on whether or not all of the parent rows are expanded. Straightforward enough.
This code works fine in that if I scroll up and down the grid with PageUp/PageDown or the arrow keys, all the right rows are hidden and everything has the right structure and I can play with the +/- buttons to my hearts content. However, the vertical scroll bar on the right hand side, although it starts off the correct size and it scrolls through the rows smoothly, when I collapse rows and then re-expand them, doesn't go back to its correct size. The scrollbar can still usually be moved around to scroll through the whole collection, but because it is too big, once the bar moves to the bottom, there are still more rows to go through and it sort of jerkily shoots all the way down to the bottom or sometimes fails to scroll at all. This is pretty hard to describe so I included a screenshot with the black lines drawn on to show the difference in scrollbar length even though the two grids have the same number of rows expanded.
I think this might be a bug related to the way the Datagrid does virtualization of rows. It seems to me like it isn't properly keeping track of how tall each row is supposed to be when expansion states change. Is there a way to programmatically "poke" (read hack) it to recalculate its scrollbar size on LoadingRow or something ugly like that? I'd include a code sample but there's 2 c# files and 1 xaml file so I wanted to see if anyone else has heard of this sort of issue before I try to make it reproducible in a self-contained way. Once again, scrolling with the arrow keys works fine so I'm pretty sure the underlying logic and binding is working, there's just some issue with the row height not being calculated properly.
Since I'm a new user, it won't let me use image tags so here's the link to a picture of the problem:
http://img210.imageshack.us/img210/8760/messedupscrollbars.png
This is a known issue according to what I read today (and is apparently still an issue in the as-yet-unreleased Silverlight 4):
http://forums.silverlight.net/forums/p/153997/343790.aspx

Resources