在 UWP 应用程序的椭圆元素中放置一个 BitmapIcon

Posted 2023-04-13

【中文标题】在 UWP 应用程序的椭圆元素中放置一个 BitmapIcon

【英文标题】：Place a BitmapIcon in an Ellipse Element in UWP app

【发布时间】：2019-07-24 03:40:15

【问题描述】：

在我的 UWP 应用中，我希望在 Ellipse 元素中放置一个位图图标。有没有办法使用椭圆的 Fill 属性来实现这一点，或者任何其他方式可以让我实现这一点？

我只希望使用位图图标，因为我需要使用 Foreground 属性更改图标的颜色。有什么方法可以使用 BitmapIcon 创建 ImageBrush，因为这将允许我用 ImageBrush 填充 Ellipse 并帮助我实现所描述的 UI。

【参考方案1】：

Ellipse 是 Shape 对象，因此不能有内容或子对象。但如果你想将BitmapIcon 放在椭圆形Control 中，那么我认为你应该使用Border 控件。

Border 控件具有CornerRadius 属性。使用它，您可以将其形状变成椭圆形，甚至是圆形：

上面的输出是用这个代码实现的：

<Border
    Width="200"
    Height="200"
    CornerRadius="100"
    BorderBrush="White"
    BorderThickness="1">

    <BitmapIcon 
        UriSource="ms-appx:///Assets/StoreLogo.png"
        Foreground="DodgerBlue"/>

</Border>

这能满足你的需要吗？

【讨论】：

是的，最初我这样做只是为了满足我的目的。但是以某种方式将角半径赋予矩形边框并不会导致完美的圆。发生在我身上的是 - 我必须将图像放在圆圈的中心。但是，每当您将屏幕分辨率从 100% 更改为 150% 或任何其他值时，图像不再保持在圆的中心，并且偏移了几个像素，从而导致非常糟糕的用户体验，因为图像似乎被偏移了.

您能否在问题中添加您的代码以及位移位图图标的快照？