CODEWITHSUNDEEP
c#wpfxaml
Shai UI
Shai UI

Reputation: 51918

WPF: the right way to scale a path?

I have a path (looks like an oval):

<Path Data="Bla Bla"/>

Now I want to scale the path's width and height to whatever I like. I found a way:

<Grid Width="400" Height="50">
<Viewbox Stretch="Fill">
    <Path Data="Bla Bla"/>
</Viewbox>  
</Grid>

And this works, but I'm wondering if this is the most efficient way to do this? (I had to introduce a grid and viewbox to do this)

Upvotes: 35

Views: 34590

Answers (4)

Walter Fuchs
Walter Fuchs

Reputation: 175

You could do it programmaticaly, like http://social.msdn.microsoft.com/Forums/vstudio/en-US/a0d473fe-3235-4725-aa24-1ea9307752d3/how-to-rendertransform-in-code-behind-c?forum=wpf

kUIWEB:kArrow mArrow = new kUIWEB:kArrow(); 
mArrow.Width=30; 
mArrow.Height=30; 
mArrow.RenderTransformOrigin=new Point(0.5, 0.5); 


ScaleTransform myScaleTransform = new ScaleTransform(); 
myScaleTransform.ScaleY = 1; 
myScaleTransform.ScaleX = 1; 

RotateTransform myRotateTransform = new RotateTransform(); 
myRotateTransform.Angle = 0; 

TranslateTransform myTranslate = new TranslateTransform (); 
myTranslate.X = 12; 
myTranslate.X = 15; 

SkewTransform mySkew = new SkewTransform (); 
mySkew.AngleX=0; 
mySkew.AngleY=0; 

// Create a TransformGroup to contain the transforms 
// and add the transforms to it. 
TransformGroup myTransformGroup = new TransformGroup(); 
myTransformGroup.Children.Add(myScaleTransform); 
myTransformGroup.Children.Add(myRotateTransform); 
myTransformGroup.Children.Add(myTranslate); 
myTransformGroup.Children.Add(mySkew); 

// Associate the transforms to the object 
mArrow.RenderTransform = myTransformGroup;

Upvotes: 0

Elad Katz
Elad Katz

Reputation: 7591

just FYI, since ViewBox uses ScaleTransform inside it it's basically just as good performance-wise.

Upvotes: 14

Francesco De Vittori
Francesco De Vittori

Reputation: 9290

You basically have 3 ways to scale a Path:

  1. Wrap it into a ViewBox
  2. Apply a ScaleTransform
  3. Explicitly set a Width and a Height

Method 1. and 2. will yield the same result, while 3. is slightly different because the shape will change size, but the stroke will keep the original Thickness (so it's not really a zoom).

Method 1. would be appropriate when you have an area of a given size that you want to fill. On the other hand method 2. will be useful to enlarge (or reduce) the path by a given amount, for ex. two times the original size.

Upvotes: 13

Fredrik Hedblad
Fredrik Hedblad

Reputation: 84657

Another way to Scale a Path is to use RenderTransform or LayoutTransform

<Path Data="Bla Bla"
      RenderTransformOrigin="0.5, 0.5">
    <Path.RenderTransform>
        <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
    </Path.RenderTransform>
</Path>

Upvotes: 36

Related Questions