11

I've attempted to have a <Grid/> (with interactive stuff inside, not just an image) clipped with rounded corners (a <Border/> or a <Rectangle/>, whatever works).

I've attempted multiple solutions, but none of them was compatible with a Windows Store App.

No brush:

  • RadialGradientBrush is not supported in a Windows App project.
  • DrawingBrush is not supported in a Windows App project.
  • The type 'VisualBrush' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.

No mask:

  • The attachable property 'OpacityMask' was not found in type 'Image'.
  • The attachable property 'OpacityMask' was not found in type 'StackPanel'.
  • The attachable property 'OpacityMask' was not found in type 'Grid'.

No rounded geometry:

  • The property 'RadiusX' was not found in type 'RectangleGeometry'.
  • MultiBinding is not supported in a Windows App project.

Is it something technically impossible in a C#/XAML Windows store app?

Cœur
  • 37,241
  • 25
  • 195
  • 267
  • `OpacityMask` isn't supported yet in WinRT, and for `Clip` you're going to be restricted to `RectangleGeometry` so I guess it really depends on what exactly you're trying to accomplish. – Chris W. May 02 '13 at 16:35
  • @ChrisW. I tried MS solution http://msdn.microsoft.com/en-us/library/ms750631.aspx for a RectangleGeometry with rounded corners, and it fails as well. Did they purposely removed all thinkable ways to clip with a rounded shape? – Cœur May 03 '13 at 07:54
  • Did you try to render it via a `Path` element or a `UIElement` ? You won't be able to apply it to `Path` but I believe you could apply it directly to a `UIElement` like maybe; `` – Chris W. May 03 '13 at 14:57
  • It is polite to mark the best/correct answer. – Jerry Nixon Jun 20 '13 at 15:30
  • @JerryNixon-MSFT Except that I can't agree with the impossibility of programming a simple UI aspect in a software: round corners. It is like the third time I'm facing impossible issues with XAML: previous ones were "control over an animated WebView" and "binding inside an ApplicationBar". I never faced this many restrictions before. As I don't want to start hating developing for Windows 8, I want to find workarounds. I pray for a better answer than yours. – Cœur Jun 21 '13 at 12:01

3 Answers3

17

Have you tried putting your control inside a border? Just set the border's corner radius to 150 and you have a perfectly round control. Here's an example with a button.

    <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center"  Height="200" Margin="0,0,0,0" VerticalAlignment="center" Width="200" CornerRadius="150">

        <Button x:Name="btnPlayback" Content="Play" HorizontalAlignment="Center" Height="200" Margin="0,0,0,0" VerticalAlignment="center" Width=" 200" BorderThickness="0"  Click="btnPlayback_Click_1"/>

    </Border>
MAL22
  • 171
  • 1
  • 3
  • Excellent approach. Button shape cannot be manipulated directly but adding them as a child to a border essentially gives the same result. Programmatically, buttons can be added to a border object using the `Border.Child` property. Also, circular buttons can be made by setting the `CornerRadius` to 150. – Mike Richards Feb 17 '14 at 15:50
3
<Ellipse HorizontalAlignment="Left" Height="301" Stroke="Black" VerticalAlignment="Top" Width="300">
    <Ellipse.Fill>
        <ImageBrush Stretch="Uniform" ImageSource="http://cfile3.uf.tistory.com/image/26616E4D514A3CDC136C4B"/>
    </Ellipse.Fill>
</Ellipse>

Can you use ImageBrush?

I works well.

Hyundong Hwang
  • 711
  • 1
  • 8
  • 19
0

It sounds to me like you have answered your own question. :) Just don't like the answer?

In WPF your options to clip are almost limitless. Even SilverLight had some great options. But, in Windows 8 (right now) you are limited to RectangleGeometry. End of story. It is worth pointing out that you can apply a Transform to a RectangleGeometry which gives you a little more insofar as options.

(at least now you know)

Best of luck!

Jerry Nixon
  • 31,313
  • 14
  • 117
  • 233