Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

XAML: Placing controls over an Image

I need to display an Image in a Grid cell. On top of the image, a StackPanel of controls (such as zoom, brightness etc) has to be added at the bottom right corner of the image. How can this be done. I am doing the following, but not sure how to position the StackPanel of controls on the lower right corner of the image. The position needs to be maintained even if user resizes browser window.

<Grid Grid.Column="1" Height="387" HorizontalAlignment="Left" Name="Image_Border" VerticalAlignment="Top" Width="799">  
      <Border BorderBrush="Black" BorderThickness="1" Grid.ColumnSpan="2" Height="Auto" HorizontalAlignment="Left" Name="Border_Image" VerticalAlignment="Top" Width="Auto" >
           <Canvas Height="Auto" HorizontalAlignment="Left" Name="ImageCanvas"  VerticalAlignment="Top" Background="Transparent" Width="Auto">                               
                <Image Canvas.Left="0" Canvas.Top="0" Height="Auto" Name="imageName" Stretch="None" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top"/>
           </Canvas>
      </Border>     
      <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right">
        <!--Stackpanel of controls to be placed at the lower right corner image -->
      </StackPanel>                  
</Grid>
like image 334
Tsu Avatar asked Nov 30 '25 14:11

Tsu


1 Answers

The intent of the UI is a little unclear so I'll hold back from giving a more complete answer for now. However if you simply had an image and you want to overlay the bottom right of this image with controls then a Grid is the solution:-

<Grid>
    <Image x:Name="img" Stretch="None" />
    <StackPanel x:Name="control" VerticalAlignment="Bottom" HorizontalAlignment="Right">
        <!-- controls here -->
    </StackPanel>
</Grid>

This grid will size to whatever size the Image is (unless its smaller the the controls panel), the controls panel will float on top in the bottom right corner of the image. This is case of less is more let the components do the work.

Since one of your controls is "Zoom" I suspect you will have other issues to solve which might ultimately make this problem moot but the above is the essence of what you need for now.

like image 66
AnthonyWJones Avatar answered Dec 08 '25 23:12

AnthonyWJones



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!