Renewal 的開發筆記

Note

2016-02-15

[UWP] 為 Image 設定圓角邊(radius)

直接把 Image 放在 Grid/StackPanel/Border 內並設定 CornerRadius 無法讓 Image 變成圓角邊，必須透過其他元件才能達到想要的效果。

目前自己測試出有效的方法有兩種

1. 使用 Ractangle 搭配 RadiusX, RadiusY 屬性，缺點是不能分別設定四個角的圓角值

<Rectangle RadiusX="20" RadiusY="20" Width="100" Height="100">
    <Rectangle.Fill>
        <ImageBrush>
            <ImageBrush.ImageSource>
                <BitmapImage UriSource="targetUri"/>
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Rectangle.Fill>
</Rectangle>

 

2. 使用 Border 搭配 Background, CornerRadius，可以分別設定四個角的圓角值

<Border CornerRadius="10,5,20,25" Width="100" Height="100">>
    <Border.Background>
        <ImageBrush>
            <ImageBrush.ImageSource>
                <BitmapImage UriSource="targetUri"/>
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Border.Background>
</Border>

 

標籤雲

系列文章