如何在 Windows Store App 中使用圆角剪辑内容答案

【问题标题】：How to Clip content with rounded corners in Windows Store App如何在 Windows Store App 中使用圆角剪辑内容
【发布时间】：2013-04-26 20:18:47
【问题描述】：

我尝试制作带有圆角的<Grid/>（内部包含交互式内容，而不仅仅是图像）剪裁（<Border/> 或<Rectangle/>，任何可行的方法）。

我尝试了多种解决方案，但没有一个与 Windows 应用商店应用兼容。

没有刷子：

Windows 应用项目不支持 RadialGradientBrush。

Windows 应用项目不支持 DrawingBrush。

找不到类型“VisualBrush”。确认您没有丢失程序集引用，并且所有引用的程序集都已构建。

没有面具：

在“图像”类型中找不到可附加属性“OpacityMask”。

在“StackPanel”类型中找不到可附加属性“OpacityMask”。

在“网格”类型中找不到可附加属性“OpacityMask”。

无圆角几何：

在“RectangleGeometry”类型中找不到属性“RadiusX”。

Windows 应用项目不支持 MultiBinding。

在 C#/XAML Windows 商店应用程序中，这在技术上是不可能的吗？

【问题讨论】：

OpacityMask 在 WinRT 中尚不支持，而对于 Clip 你将被限制为 RectangleGeometry 所以我想这真的取决于你到底想要完成什么.
@ChrisW。我为带有圆角的 RectangleGeometry 尝试了 MS 解决方案 msdn.microsoft.com/en-us/library/ms750631.aspx，但它也失败了。他们是否故意删除了所有可以想到的圆形剪辑方式？
您是否尝试通过 Path 元素或 UIElement 渲染它？您将无法将其应用于Path，但我相信您可以将其直接应用于UIElement，就像可能一样； <Grid Clip="ClipData"/>
标记最佳/正确答案是有礼貌的。
@JerryNixon-MSFT 除了我不能同意在软件中编写简单的 UI 方面是不可能的：圆角。这就像我第三次面临 XAML 不可能的问题：以前的问题是“控制动画 WebView”和“在 ApplicationBar 内绑定”。我以前从未遇到过这么多限制。因为我不想开始讨厌为 Windows 8 进行开发，所以我想找到解决方法。我祈求一个比你更好的答案。

标签： xaml windows-store-apps winrt-xaml rounded-corners clipping

【解决方案1】：

听起来你已经回答了自己的问题。 :) 只是不喜欢这个答案？

在 WPF 中，您的剪辑选项几乎是无限的。甚至 SilverLight 也有一些不错的选择。但是，在 Windows 8（现在）中，您仅限于 RectangleGeometry。故事结局。值得指出的是，您可以将Transform 应用于RectangleGeometry，这为您提供了更多选择。

（至少现在你知道了）

祝你好运！

【讨论】：

【解决方案2】：

您是否尝试过将控件放在边框内？只需将边框的圆角半径设置为 150，您就有了完美的圆形控制。这是一个带有按钮的示例。

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

【讨论】：

优秀的方法。按钮形状不能直接操作，但将它们作为子元素添加到边框基本上会产生相同的结果。以编程方式，可以使用Border.Child 属性将按钮添加到边框对象。此外，可以通过将CornerRadius 设置为 150 来制作圆形按钮。

【解决方案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>

你可以使用 ImageBrush 吗？

我工作得很好。

【讨论】：