2

WPF allows to use subclasses of Transform to scale(ScaleTransform), rotate(RotateTransform), skew (SkewTransform) and so on any FrameworkElement.

But I cannot see how to crop some FrameworkElement using these. Is there any way how to crop lets say a Label of width 30px so it will behave as if its width was 20px?

To be more exact: I want to do this before laying out so that the Label would be laid out as if its width was 20. But I want it to be rendered fully so the last 10 pixels will be rendered too (possibly overlapping other elements). How can I do this ?

Why do I need this ? I want to make H.B.'s answer to my question Create guitar chords editor in WPF to work with kerning.

Community
  • 1
  • 1
Rasto
  • 17,000
  • 40
  • 141
  • 232

2 Answers2

1

Use a negative Margin on the label, e.g. Margin="0,0,-10,0" makes the Label 10 pixels shorter on the right, layout-wise. (To prevent overlap put it in a container and set ClipToBounds="True")

H.B.
  • 136,471
  • 27
  • 285
  • 357
  • H.B.: +1 This was the fastest good answer I ever got. This is also solution but what if I really wanted to make previous element `5` pixels shorter for layout system yet still render it fully? Instead of setting next element's margin `Margin="-5,0,0,0"`? Because that is the way how other editors (like `RichTextBox`) deal with kerning. I don't why they don't use something like margin to do it but there might be a problem when highlighting text and so on (when elements overlap each other). – Rasto Apr 27 '11 at 18:53
  • 1
    I do not quite get your problem, if you set `Margin="0,0,-5,0"` on the previous item it should be shorter and still render unless you set clipping. – H.B. Apr 27 '11 at 19:16
0

My problem with H.B.'s solution was, that i can't bind only the top margin.

i use XAML like this to build kindof a round progressbar (an ellipse, that gets cropped at the top):

<Canvas Name="ProgressIndicator" Width="120" Height="{Binding ProgressIndicatorHeight}" ClipToBounds="True">
    <Ellipse Width="120" Canvas.Bottom="0" Height="120" Fill="#FF7090B7"/>
</Canvas>

When i change the height of the canvas, the top of the ellipse gets cropped (because it is aligned to the bottom of the canvas). if i aligned it to the top (default), it would be cropped on the bottom.

I use this construct inside a round icon to fill it up proportionaly to the progress.

JCH2k
  • 2,661
  • 24
  • 24