question

JassimRahma-2616 avatar image
JassimRahma-2616 asked ·

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 comments
10 |1000 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
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);


Share
10 |1000 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.