.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

Zooming in/out on canvas: how to leave some children unscaled?

Posted By:      Posted Date: September 27, 2010    Points: 0   Category :WPF

I'm working with Visual Studio 2008 and I have created a window with a Canvas in a ScrollViewer. On the canvas, I've placed an image and the code I've written places buttons on the canvas at certain locations. So far, so good, but I'm trying to implement a zooming method which scales the canvas and the image, but leaves the buttons intact in terms of size and content -- however, their location should scale together with the image and the canvas.
What I have thusfar is this:

private void zoomIn(Object sender, MouseButtonEventArgs e)
  mapCanvas.Width *= ZoomFactor;
  mapCanvas.Height *= ZoomFactor;
  Zoom *= ZoomFactor;
  TransformGroup transform = new TransformGroup();
  transform.Children.Add(new ScaleTransform(Zoom, Zoom));
  transform.Children.Add(new TranslateTransform(0, 0));
  mapCanvas.RenderTransform = transform;

This, together with an analogue zoomOut method, works like a charm, but the buttons are scaled as well, obviously because RenderTransform is applied to every child of the canvas as well.

My question is: how can I leave the buttons unscaled?

View Complete Post

More Related Resource Links

Move all children on canvas or preferrably move the entire canvas



I´m working on a small app that parses the gpx file from the GPS. It will animate how me and my dog moves when we go hunting. I want to zoom in so that I can analyse how the dog is working and therefore need the graph to scroll and keep my position centered.

Yesterday I used a Canvas and plotted my points as black rectangles and the dog as red rectangles. Then used the SetLeft and SetTop to scroll the Canvas. I then added a polyline connecting the dogs points but didnt find StLeft and SetTop for the polyline. Played around with RenderTransform but never got it working.

1. My question is is canvas suitable for this?

2. Is there a way to move the entire canvas and all its children in one command?

3. Is there a generic way that can be used to move all UIElements.

By move I mean move relative an element relative to its current position, for example 2 pixels left and 5 pixels up.



Trying to learn

Drag-move canvas and its children


With VS2008, I have created a Canvas in a ScrollViewer, in which I place an Image which I overlay with Buttons and StackPanels. This far, everything works as I'd want to, but my next challenge is to implement a drag-move behavior where the user can click on the Image and drag it in every direction. I figured out how I should move just the Image, but the problem is that the Buttons and StackPanels stay in place, where I really want them to be moved with Image as well. Trying to convert the drag-the-Image-method to a sort of drag-the-Canvas one did not work out for me.

So my layout is structured like this:


Get location of Children of a Canvas


I'm having some trouble determining the location of UIElements on a Canvas, StackPanels to be exact. I want to be able to compare their location to a given location, but I don't see how I should get their location.

Does anybody have an idea?

Zooming Canvas and ScrollBars !


Hello Everyone,

I may be asking too many questions out here, but I have no other source.. so sorry for flooding the forum.


My question is:

I have a canvas, which I zoom in/out on mouse scroll:


            DockPanel myDockPanel = new DockPanel();
            myDockPanel.LastChildFill = true;

            //Add cnavas and the status bar to dock panel.

            this.elementHost.Child = myDockPanel;



            //Get the current matrix
            Matrix currentMattrix = this.canvas.LayoutTransform.Value;


Treeview: Select all children if Parent is selected etc...



I'm using a Treeview with  ShowCheckBoxes="All" , so basically I have a tree with all CheckBox Nodes. I'm using the TreeView inside an update panel, and populate the Tree code behind dynamically.

My requrements are the following:

1) Select all the children if parent is selected,

2) When parent is selected, and if we de-select a child, set parent unselected

3) Track if new nodes were selected and previously selected nodes were de-selected (becasue I need to update the database according to the selections in the Tree)

For above 1, I do the following:

protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
        foreach (TreeNode node in TreeView1.Nodes)
            TreeNodeCollection col = node.ChildNodes;
            //select all children when the parent is checked
            if (col != null && node.Checked)

IE hanging when trying to leave a page


All I want to do is to present my user with a simple confirmation that asks if they want to leave the page or not if they have data on the screen that is not yet saved. I've read many posts on the net and I know the following is the preferred solution, but seems like I can't trap the error in the try..catch blcok properly for IE to continue to execute. I try the same exact code in Google Chrome, & Firefox and it works fine. Meaning, when I click on the Cancel button, the page is not unloaded and the user still has the chance to save their data. This obvioulsy doesn't work with IE. It just hangs.

I would appreciate somebody to give me the correct exact syntax on how to accomplish this. Notice the boldfaced code. Below, is my js:


// Used when leaving the page
        window.onbeforeunload = unloadPage;
        function unloadPage() {
            var startPosition = document.getElementById("<%= startPosition.ClientID%>");
            var hdnRecordSaved = document.getElementById("<%= hdnRecordSaved.ClientID %>");


How do I use Storyboarb.Children.IndexOf()

I have a storyboard in a resource that has many child DoubleAnimations, a few of which have a name assigned. These DoubleAnimations may need to have thier To property adjusted based on some user settings during run time. What I am trying to figure out, is how to retrieve the DoubleAnimation from the Storyboard,Children collection from it's Name. How can I use Storyboard.Children.IndexOf() to get the index of the DoubleAnimation who's Name is "P1Bf" then modify the To property of that DoubleAnimation. Here's the storyboard resource: <Storyboard x:Key="Fold"> <!-- Fold panel 1 from 90 to 0. --> <DoubleAnimation Storyboard.TargetName="RSC_PanelGroup1_Rotation" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.5"/> <!-- Fold panel 2 from 90 to 0. --> <DoubleAnimation Storyboard.TargetName="RSC_Panel1and2Group_Rotation" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.5" BeginTime="0:0:0.5"/> <!-- Fold glue tab from 0 to -90. --> <DoubleAnimation Storyboard.TargetName="GlueTab_Rotation" Storyboard.TargetProperty="Angle" To="-90" Duration="0:0:0

How to center children divs?

I am trying to center children divs which floated left by using margin: 0 auto 0 auto. It did not work. Is there any way to center them?  thanks. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DIVAlignment.aspx.vb" Inherits="Test_DIVAlignment" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css" >    #formContainer{     width:600px;          margin:0 auto 0 auto;    }    #formContainer #caption{     font-size: medium;     font-weight: bold;     text-align:center;    }         #formContainer .MetaTitle{      float: left;       margin-left:20px;       width:80px;       text-align:left;       font-weight:bold;       background-color: #cc6633;  &

How to customize workflow canvas in re-host environment?

Hi there,  Currently I'm developing a re-hosted debugger for Windows Workflow.  For the workflow canvas, I'm using View property of WorkflowDesigner class and bind my ContentControl to it.  The question here is, how to customize the WorkflowDesigner.View? Examples of customization are:   Extract the overview window, so that I can put the window in another part of the UI Change the zoom tool into the slide bar as in MS Word.   Thanks and best regards,  Arinto

How to set Panel.Zindex value though XAML code if any of the Grid/UserControl children having the fo

Hi, I have a Grid with 10 buttons. If any of these buttons has focus then I want to set the Panel.Zindex = 999 for the Grid. How to do this in XAML code?Please remember to click "Mark as Answer" on the post that helps you, and to click "Unmark as Answer" if a marked post does not actually answer your question. This will help other members to find the solution easily.

Saving Canvas and other UIElements as embedded resource

Hi All, I am trying to save a canvas and its content as an embedded resource to another assembly but in doing so I got a Non-Serializable exception. Is there a better way of doing this? Here is the code I used in embedding the Canvas: // create an assembly AssemblyName assemblyName = new AssemblyName(System.IO.Path.GetFileNameWithoutExtension(filename)); AssemblyBuilder assemblyBuilder = AppDomain.CurrentDomain.DefineDynamicAssembly(assemblyName, AssemblyBuilderAccess.RunAndSave); ModuleBuilder moduleBuilder = assemblyBuilder.DefineDynamicModule(assemblyName.Name, assemblyName.Name + ".dll"); // create a class TypeBuilder typeBuilder = moduleBuilder.DefineType("ModuleName", TypeAttributes.Public, typeof(EmbeddedBAML)); // Create a default constructor ConstructorBuilder constuctorDefault = typeBuilder.DefineConstructor(MethodAttributes.Public, CallingConventions.Standard, Type.EmptyTypes); ILGenerator ilGenerator = constuctorDefault.GetILGenerator(); ilGenerator.Emit(OpCodes.Ldarg_0); ilGenerator.Emit(OpCodes.Call, typeof(EmbeddedBAML).GetConstructor(Type.EmptyTypes)); ilGenerator.Emit(OpCodes.Ret); typeBuilder.CreateType(); IResourceWriter resourceWriter = assemblyBuilder.DefineResource(assemblyName.Name + ".canvas", "Contains the Canvas object",assemblyName.Name + ".canvas", ResourceAttributes.Pu

Excel 2003 pivot table - parent showing grand total than the sum of its children

All, In Excel 2003, I have a product hierarchy, for simplistic sake lets say it goes A > B > C > model nbr.  I have filtered on model nbr 1.  I have the product hierarchy in my pivot table and unit cnt as the measure. Starting at level A in the hierarchy I am showing a total unit of 12000, if I drill down to B it still shows 12000, if I drill down to C it shows 100 and if I drill down to model nbr it shows me model nbr 1 with a unit cnt of 100. So my question is why are my parents not filtering the model nbr, it is taking the total for ALL records that have level A as their parent regardless of the model nbr? This does NOT happen in Excel 2007 or when I browse my cube in SSAS.

usercontrol layout in canvas at runtime puts in mult. copies of 1st element in collection.

I created a usercontrol which has a few DP's that match up with fields in a sql table. The requirements of this control specify if I get a specific status value I will flash the usercontrol to draw attention to a specific area of equipment in the facility. I also provide a tooltip which has all the fields of data to view. The usercontrol should only display it's description. On a button click I run the following code which instantiates a new observablecollection of my custom usercontrol (I call it profiNode). It then fills a dataset by calling our DAL and then I loop through the datarows using the values to create a new profiNode object for each row. I then add these to the observable collection, but I suppose a generic list would work too.     ProfiNodes = new ObservableCollection< profi.profiNode > (); DataSet data = new DataSet(); data = this.DataLayer.getDataSet("Select * from ProfibusMapping", CommandType.Text, null); foreach (DataRow row in data.Tables[0].Rows) { profi.profiNode node = new profi.profiNode((string)row.ItemArray[0],(int)row.ItemArray[1], (int)row.ItemArray[2], (int)row.ItemArray[3], (string)row.ItemArray[4], (DateTime)row.ItemArray[5], (int)row.ItemArray[6], (int)row.ItemArray[7], (string) row.ItemArray[8], (double)row.ItemArray[9], (double)row.ItemArray[10]); node.ID = string.Format("node_M{0}_A{1}&q

how to create property widget and change the properties of dragged-dropped UIelement in canvas in wp

I'm new in WPF development. I'd like to learn it. I'm curious and having problem in developing property widget for the UIElements. I want to change the properties of the dragged and dropped UIElement from the Property widget. How could I do this? I'd glad if any help is suggested. I've listbox and canvas. Elements from listbox can be dropped to the canvas. I'm trying to change the properties of the dropped element through a property widget. I don't know how to do this. I'd be grateful to any kind of support.   Regards, Binaya

different mouseWheel handlers for canvas and image

i have different mouse wheel handler for both canvas and image in that canvas,,but when i move my mouse over image and roll the wheel then the canvas mousewheel handler also starts working,,here is my code:   void img_MouseWheel(object sender, MouseWheelEventArgs e) { if (e.Delta > 1) { ((Image)sender).Width =((Image)sender).ActualWidth*1.01; ((Image)sender).Height = ((Image)sender).ActualHeight*1.01; } if (e.Delta < 1) { ((Image)sender).Width = ((Image)sender).ActualWidth/1.01; ((Image)sender).Height =((Image)sender).ActualHeight/1.01; } } <pre lang="x-c#">void mycanvas_MouseWheel(object sender, MouseWheelEventArgs e) { if (e.Delta > 1) { ((Canvas)sender).Width = ((Canvas)sender).ActualWidth*1.01; ((Canvas)sender).Height = ((Canvas)sender).ActualHeight*1.01; foreach(UIElement myElement in ((Canvas)sender).Children) { if (myElement is Image) { Image myimage = myElement as Image; myimage.Width *= 1.01 ; myimage.Height *= 1.01; } } } if (e.Delta < 1) { ((Canvas)sender).Width = ((Canvas)sender).ActualWidth /1.01; ((Canvas)sender).Height = ((Canvas)sender).ActualHeight/1.01; foreach (UIElement myElement in ((Canvas)sender).Children) { if (myElement is Image) { Image myimage = myElement as Imag

WebBrowser zooming in WPF

I am using a System.Windows.Controls.WebBrowser control in my WPF application to display an HTML page, but require the ability to zoom in/out of the page. I have found an option for windows forms: http://slingkid.blogsome.com/2007/04/13/ie-zoom/ , but I cannot see how/if this applies to the WPF WebBrowser control. Any help would be appreciated
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend