question

10918804 avatar image
0 Votes"
10918804 asked FayWang-MSFT commented

Place Image on Frame's Border

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?

alt text

Thanks,
Jassim


windows-uwpwindows-uwp-xaml
frame.png (24.5 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, have you tried the following method? Can it help you achieve the effect you want?

0 Votes 0 ·

Hi, do you have any questions? Have you solved your issue?

0 Votes 0 ·

1 Answer

FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered

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


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.