How to Clip content with rounded corners in Windows Store App

问题

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?

回答1:

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>

回答2:

<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.

回答3:

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!

来源：https://stackoverflow.com/questions/16341788/how-to-clip-content-with-rounded-corners-in-windows-store-app