I am starting a new WPF project that's framework is going to be some sort of a tabbed view dashboard. In ASP I would use a master page with a tab control and a content page for each view. I am new to XAML and was hoping that someone knew of a basic article with example code to get me started. If anyone can point me in the right direction that would be great.
There is a "main window" that would correspond to your "master page".
You can add a WPF "Tab Control" (to the window) that can contain multiple "Tab Item" controls.
The "content" for each tab can be added directly (e.g. as Text Blocks (labels), Text Boxes, Buttons, etc.); however, one generally creates "User Controls" to package UI elements into a view / content page which would then be added to a tab (as a child).
WPF uses "styles" in a way that is similar to CSS in order to propagate styling throughout the visual tree (of UI elements).
The article below makes doing WPF views just like MVC:
<a href="http://www.codeproject.com/Tips/678020/Master-page-in-WPF">Master page in WPF?</a>[<a href="http://www.codeproject.com/Tips/678020/Master-page-in-WPF" target="_blank" title="New Window">^</a>]
That looks OK (though I would prefer to copy the eventhandler and test that copy for null, but that should make a difference in rare cases only).
Where did you set the break point to step into that code? Was that action initiated by some change in the GUI?
We have a MindFusion.RealTimeCharting control that has been extensively modified by us, so talking to them probably won't help.
On a tab control I have User Control, and in that is the WinForms chart control. We want to create a report from the UI. A "Report" is an image that's created and opened in Windows Photo Viewer.
For the purposes of reporting I've written a class called PrintLib that takes the element you want to print, creates an image of it, and opens the Windows Photo Viewer with the image displayed.
The problem is that the actual contents of the chart, a Sine Wave, doesn't show up. To correct this we added a function to the chart control called 'GetPrintBitmap' which returns a DrawingVisual. We then have to call this in code to produce an image file which is the used to replace the image of the XAML element at runtime.
What we would like is to have this happen when the element is rendered. Basically, we need to force WPF to draw the Sine Wave from the WinForms control when the XAML element image is created.
What I have now does work, except that I have to call a function in the WinForms control to get the bitmap back. Here's what I do have:
The process starts here. Element is the outer control containing the User Control, which contains the WinForms control:
public void Print(ItemsControl element)
ChartViewModel vm = ChartCollection;
RealTimeChart chart = vm.GetChart();
var dv = chart.GetPrintBitmap();
Here is the significant portion of the GenerateReport method:
public static void GenerateReport(FrameworkElement element, DrawingVisual dv)
var width = (int)element.ActualWidth;
var mainImageName = string.Empty;
// If no WinForms image (the DrawingVisual) was passed in, then use the element
// that was tagged in the XML, otherwise use the passed in image as the main control
if (dv == null)
// Create the image of the element
mainImageName = CreateImageFromView(element, width);
mainImageName = DrawImage(dv, width, (int)element.ActualHeight);
private static string CreateImageFromView(FrameworkElement element, int width)
// Get the size of the Visual and its descendants.
var rect = VisualTreeHelper.GetDescendantBounds(element);
// Make a DrawingVisual to make a screen representation of the control.
var dv = new DrawingVisual();
// Fill a rectangle the same size as the control with a brush containing images of the control.
using (var ctx = dv.RenderOpen())
var brush = new VisualBrush(element);
ctx.DrawRectangle(brush, null, new Rect(rect.Size));
var height = (int)element.ActualHeight;
if (height == 0)
height = (int)element.Height;
if (height == 0)
var message = "UI Element height is 0 and is not valid";
throw new ArgumentException(message);
return DrawImage(dv, width, height);
private static string DrawImage(DrawingVisual dv, int width, int height)
var rtb = new RenderTargetBitmap(width, height, 96, 96, PixelFormats.Pbgra32);
// Make a PNG encoder.
var encoder = new PngBitmapEncoder();
// Save the file.
var fileName = GetUniqueFileName("png");
using (var fs = new FileStream(fileName, FileMode.Create, FileAccess.Write, FileShare.None))
So essentiially we don't want to have create the DrawingVisual from the WinForms control in code. Is it possible to get WPF to render the WinForms control's contents when it renders the rest of it?
That's what my code already does, the problem is that the WinForms portion doesn't render as part of the WPF rendering process, so I'm calling a method on the WinForms control to return it's visible area as a bitmap, then replacing it ove the Winforms control.
I was hopeing there weas some way of forcing the WinForms control to render in the WPF rendering when the entire view is rendered.
Hello Every One, I have a Critical Problem in my WPF Ink Canvas. The Problem is , when i draw something on it using mouse move , it draws easily , but when my application run on other system, which have 1280*720 screen Resolution, that time Ink canvas draws shape outside the drawing area and the shape is not visible also.
my development Machine screen Resolution - 1680*1050 and when i run this application on low level Resolution Machines then Ink canvas drawing area expand and shapes are draw outside the canvas , and they are not visible also. I already tried the viewbox control, but i am not getting which i want.
Please solve this Problem as soon as possible if anyone have the solution of It.
I assumed you are doing the printing from the VM, forgot you have your odd printing method.
Still I would do it the same anyway, tab changed is bound to the VM and sets the active tab, Print command tells a VM property for each tab to print. Seems like a complete kludge but then you have a creative printing method!
Never underestimate the power of human stupidity
If the TabControls are implemented as a List of Lists of TabControls (or similar) in your AppComposer file (or App.xaml.cs, wherever you defined them), you could just go through said list(s) and look for the TabControl.SelectedTab property.
Once you get hold of the active/selected tab that way, you could notify it to print.
Just noticed that's about the same as what Mycroft suggested...but I would go for it as a first approach anyway
Last Visit: 25-Aug-19 6:41 Last Update: 25-Aug-19 6:41