在 Windows Phone 中以圆圈显示图像答案

【问题标题】：Displaying Image in Circle in Windows Phone在 Windows Phone 中以圆圈显示图像
【发布时间】：2014-03-27 06:13:38
【问题描述】：

我正在创建一个 WP (7.1+8) 应用程序，它要求我在一个圆圈内显示图像（如在 Google+ 中）。
我找到了一个使用 GradientBrush 通过以下代码完成任务的解决方案：-

BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;

//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
image.OpacityMask = opacityMask;

我想知道如果我需要对大量图像（比如 50 个）执行此操作，对性能的影响是什么。

【问题讨论】：

标签： c# performance windows-phone-7 windows-phone-8 windows-phone

【解决方案1】：

使用剪辑显示控件的部分区域。

<Image Source="YouImage.jpg">
    <Image.Clip>
        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
    </Image.Clip>
</Image>

根据您的方便更改中心、RadiusX 和 RadiusY。

【讨论】：

【解决方案2】：

根据您的要求使用以下代码 sn-p。

<Ellipse Height="300" Width="300">
       <Ellipse.Fill>
             <ImageBrush ImageSource="images/WmDev.jpg" AlignmentX="Center" AlignmentY="Center" />
       </Ellipse.Fill>
</Ellipse>

希望对你有帮助。

【讨论】：

谢谢，我也试试这个方法，比较一下性能。
好的，Vikas，你可以随时尝试。

【解决方案3】：

这个问题已经回答了，如果你想更详细地看到它，那么你可以看看here XAML 解决方案将是，

    <Image Source=”{Binding Converter={StaticResource ContactPictureConverter}}” Width=”48″ Height=”48″ Stretch=”Fill”
>

<Image.Clip>

<EllipseGeometry Center=”24,24″ RadiusX=”24″ RadiusY=”24″ />

</Image.Clip>

</Image>

【讨论】：