I need to visually show a line from one image to one or more images to represent a server connected to one or more servers. I'm assuming WPF is the best tool for this and am using this project to learn and evaluate WPF and determine if we should start migrating from WinForms.
I'm trying to keep the layout simple for purposes of re-sizing and managing the layout. So the image representing the source server is in the upper left and all connected servers are listed down the right side. I'm new to WPF and Expression Blend and have been struggling with how to draw the connectors. Right now I have the images in a grid. After some frustrating attempts to draw lines using tiled images I started to use a line with a GradientBrush which looks like a 2D pipe. This seemed like a decent approach. But I'm hoping there is an adequate method to draw a path similar to my mock up.
Thoughts...
Put the lines in the grid and span multiple rows and columns
Put the line on a canvas which spans all rows and columns
I assume the line paths will need to be determined in the code behind, But I've been impressed with everything XAML is capable of.
I'm just a WPF noob and a little overwhelmed by everything that WPF can do. This seems like something that's been done many times before but I cannot find any related WPF examples and would prefer to minimize my frustrating attempts :-)
I would use Canvas instead of Grid because you can use absolute positioning with Canvas.
Take a look at this 4 part series on CodeProject to get some ideas.
You can try using Seperator in between the images. Put seperator in a stackpanel so you can control its orientation to horizontal or vertical and you can also change its color and thickness. If you place seperator in a canvas you can also control its placement.
Related
I've been using Winforms and the built in Charting library to accomplish this task in a hacky sort of way, but the team I'm developing for wants a more interactive solution. I wish I was able to just stack several charts, but as the graph is representative of a digital timing diagram, they need to share the same x-axis. I'm looking at LiveCharts as a solution, but I can't figure out if it's possible to vertically stack the multiple y-axis items to achieve my end goal. Ideally, it would look like this:
It's very important that I maintain them as one chart so that they share the x-axis, and comparisons can be made within the same chart timing wise.
The data getting used is from a generated log file, and is not collected in real time. I would manually offset the data, but the user can choose the order in which the graphed lines are displayed, so I would have to go through the entire series and offset it each time the user moved it.
Perhaps livecharts is not the way to go here? It needs to be a free implementation of something, or SciCharts v2.2 (but I can't find archived documentation) as those are the only resources I currently have access to.
While your question doesn't specifically relate to SciChart, you have tagged it, so I have a suggestion for you.
There is a vertically stacked axis feature in SciChart WPF. This allows you to substitute the YAxis Container template for anything you want. In this example we use a UniformGrid. The result is as follows:
Several traces are on the same plot, but at different vertical positions. Each axis is stacked one over each other. They share the same XAxis and hence response to zooming, panning, tooltips as if they were one chart.
The source code to the above is on the Example Webpage. All the scichart WPF Examples source code is hosted on GitHub so if you click through to the above then scroll down to source and click 'View on Github' you can see how we have achieved this type of chart.
Disclosure to community: Im the tech lead on the SciChart project
I am working on a project that requires me to develop an application using the Universal Windows Platform (UWP). I have no prior knowledge of developing UWP apps and XAML is completely new to me. Thankfully however, I am competent at writing in C#.
The project I am working on involves recreating the Tafl Board games - Hnefatafl, Brandubh, Tablut, etc.
Now, while I'm fairly confident in my ability to create the underlying logic for the game, I find myself bamboozled when it comes to creating the interface using XAML.
Several different chessboards will need to be rendered: 7x7, 9x9 and 11x11.
So my question is two-fold.
How do I create a chessboard in XAML that will scale appropriately to different window/display sizes and be able to be backed by a grid behind the scenes (i.e. The application can detect which square of the board is touched, etc)
How do I go about rendering a different board depending on the game type selected?
Apologies if this is a terrible question but googling hasn't helped me a whole lot and StackOverflow has always been a great source of information.
You might want to try out the RelativePanel control and use different coloured rectangles for the tiles. This would resize for different screen sizes.
I hope you finally got an answer to this that led you in the right direction. If you didn't here are some ideas that might narrow your research terms and get your going. I'd give you working samples but youd did mention it is for a school project :).
Using a listbox and manupulating the base style can be a relatively
good way to go, and very reusable. This also fulfills your
requirement of knowing the tile currently selected as the listbox
already handles that. I used this technique for a Sudoku board that
had alternating colors for the different regions.
Create a UserControl with properties for the number of columns and
rows you need for your board and then dynamically add the rows and
columns to the grid. If your game model has a list of tiles and
each tile has a column and row property that can be mapped to the
column and row indices of the grid, you could potentially bind to it
quite easily.
Create a custom control that handles the columns,
rows and other aspects of the board itself in c# and the rendering
in XAML. I personally shy away from this just because the existing
controls are already so flexible that with enough ingenuity you can
create what you need with out of the box controls.
In my WinRT app I need to draw about 3000 objects on a canvas, where I can translate and zoom the view. Unfortunatley, after adding about 1500 lines to my canvas my Windows 8 App always crashes. What could be the best practice to achieve this?
One solution could be rendering everything on an image (how do I do this?). But then I loose comfort of easy access and editing of every element.
Also my scale and translate is very slow. But since I also need a big overview, it makes no sense to put only the objects of the visible area in the canvas, since on minimum zoom it's still everything and zoomed it's still very laggy cause of add and remove operations.
There are a couple of different things you should employ to have a smooth UX:
Use a Quadtree, whenever you add a shape to your canvas you also put it on your Quadtree. This will be helpful when you will zoom on a portion of the image: you will know what objects are in this portion of the image; you will render them again (against using a cached/pixellated version).
To overcome the potentially lengthy drawing process you could do the following:
display the portion of the cached image overview at the right scale
use a progress indicator to let know the user that the program is working render this portion
when the faint rendering is done, blit it on the screen
A concrete example: Google Maps does that.
I need to find, or create an editor that will handle text and images as objects. For instance I have a 3 line string of text, to be able to move it around and position it within a canvas, also the ability to add an image, and possibly resize it within that canvas. and take the result, and save it, whether I get the the offsets and positions manually, of each of the objects (preferable) , or get the entire canvas as an image, to be able to save and print.
Rulers would be great... Im not trying to re-create Photoshop, but the idea is similar.
I will be doing this in a C# WinForms application, it does seem however that a WPF solution might be better suited, and I think I can have a WPF control within winforms...
Any direction or advice would be greatly appreciated.
Forget winforms. It doesn't support anything. Your best bet is to do it in WPF and if you need, you can integrate it into an existing winforms application via the ElementHost.
Please see my similar answers/samples about this:
https://stackoverflow.com/a/15580293/643085
https://stackoverflow.com/a/15469477/643085
https://stackoverflow.com/a/15821573/643085
Also, see this example with support for zoom, panning and resizing functionality:
https://stackoverflow.com/a/16947081/643085
They're all MVVM based and have some interesting features.
You can easily customize these samples and add ANY type of elements:
images,
geometries,
usable interactive UI elements with functionality (TextBoxes, ComboBoxes, whatever),
text,
videos,
FlowDocuments,
or whatever that's visible on screen)
by adding additional data items and their corresponding DataTemplates.
I am trying to create a simple drawing utility as .net desktop application(i.e Windows Form using C#). What i am planing to develop is:
There should be a canvas area (This is the area where the actual drawing is performed).
The canvas should be zoomable (Zoom in and zoom out)
The canvas areas should have grid lines (the ideal size of grid is 100X100pixel, but it can be changed with zooming)
There is a single character written inside each cell (here by the term "cell" i am refering to the box that is formed by the intersection of grid lines)
Now until this step all the thing are automatic (i.e user don't have to do anything until now all is done by my application)
User is only allowed to draw rectangles in canvas area(my application will also need to keep the track of those rectangles in such a way that user is allowed to resize those rectangles later)
Since i am beginner to C# so i need only guidance. Till now i just look at System.Drawing library (only look at it don't go deep :P) but not sure should it cater all my requirements or not (but i guess it will cater my req) and if it will then from where do i start with and what resource do i need to study in order to create this application.