Place Image on Frame's Border

Question

Hi,

How can I place an image on the Frame border centered just like the Bill gates and USA flag here in the attached image?

Thanks,
Jassim

Answer 1

Hello,​​

​​Welcome to our Microsoft Q&A platform!

You can first add a Canvas with the same size as your frame to wrap it and then put your image on this Canvas. Since in Canvas, child content is not visually clipped if larger than the panel. And then in code-behind, you can use Canvas.Left and Canvas.Top to change the position of image.

.xaml:

< Canvas Background="AliceBlue" x:Name="MyCanvas" Width="300" Height="200">
    < StackPanel Width="300" Height="200" CornerRadius="20" BorderThickness="2" BorderBrush="Black">
    ......
     < /StackPanel>
     < Image Source="Assets/StoreLogo.png" Width="80" Height="50" x:Name="MyImage">
     < /Image>
< /Canvas>

.cs:

//Center horizontal
MyImage.SetValue(Canvas.LeftProperty, (MyCanvas.ActualWidth - MyImage.ActualWidth) / 2);

//top
MyImage.SetValue(Canvas.TopProperty, - MyImage.ActualHeight / 2);

//bottom
MyImage.SetValue(Canvas.TopProperty, MyCanvas.ActualHeight - MyImage.ActualHeight / 2);