# Placing an image

**URL:** <https://forums.fusetools.com/t/placing-an-image/1858>\
**Category:** How-to Discussions\
**Created:** [December 30, 2016, 12:36pm UTC](https://forums.fusetools.com/t/placing-an-image/1858 "2016-12-30T12:36:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![R0b0tn1k](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/r0b0tn1k/32/49_2.png) [@R0b0tn1k](https://forums.fusetools.com/u/R0b0tn1k)\
**Post date:** [December 30, 2016, 12:36pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/1 "2016-12-30T12:36:27Z")

</div>

How would you achieve this design?

[[[http://i.imgur.com/dj0vJSd.png](http://i.imgur.com/dj0vJSd.png)]]

What would be the layout code?  
My code is currently overlaying it self all over each other.

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [December 30, 2016, 12:49pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/2 "2016-12-30T12:49:07Z")

</div>

There are many ways you could do this, ut i would use either a `StackPanel`, `Grid` or `DockPanel`.

Here is an example:

```auto
<DockPanel>
    <Image Dock="Top"/>
    <Panel>...bottom content...
</DockPanel>

```

did this answer your question?

---

<div class="post-metadata">

**Author:** ![R0b0tn1k](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/r0b0tn1k/32/49_2.png) [@R0b0tn1k](https://forums.fusetools.com/u/R0b0tn1k)\
**Post date:** [December 30, 2016, 6:45pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/3 "2016-12-30T18:45:47Z")

</div>

Great!, starting to look good. How wold you make the rounded corners on top of the image?

---

<div class="post-metadata">

**Author:** ![R0b0tn1k](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/r0b0tn1k/32/49_2.png) [@R0b0tn1k](https://forums.fusetools.com/u/R0b0tn1k)\
**Post date:** [December 30, 2016, 6:56pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/4 "2016-12-30T18:56:43Z")

</div>

How do I force text in Text field to word wrap?

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [December 30, 2016, 7:01pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/5 "2016-12-30T19:01:31Z")

</div>

I suggest you look into the documentation to start to learn what you can do with Fuse:

Rectangle (rounded corners): [https://www.fusetools.com/docs/fuse/controls/rectangle](https://www.fusetools.com/docs/fuse/controls/rectangle)  
Text (wrapping): [https://www.fusetools.com/docs/fuse/controls/text](https://www.fusetools.com/docs/fuse/controls/text)

---

<div class="post-metadata">

**Author:** ![R0b0tn1k](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/r0b0tn1k/32/49_2.png) [@R0b0tn1k](https://forums.fusetools.com/u/R0b0tn1k)\
**Post date:** [December 30, 2016, 7:08pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/6 "2016-12-30T19:08:09Z")

</div>

Ok, found the textwrap tag: TextWrapping=“Wrap”

---

<div class="post-metadata">

**Author:** ![R0b0tn1k](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/r0b0tn1k/32/49_2.png) [@R0b0tn1k](https://forums.fusetools.com/u/R0b0tn1k)\
**Post date:** [December 30, 2016, 7:12pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/7 "2016-12-30T19:12:18Z")

</div>

> **Bent Stamnes wrote:**
> 
> I suggest you look into the documentation to start to learn what you can do with Fuse:
> 
> Rectangle (rounded corners): [Fuse](https://www.fusetools.com/docs/fuse/controls/rectangle)  
> Text (wrapping): [Fuse](https://www.fusetools.com/docs/fuse/controls/text)

Didnt realize I can wrap images in rectangles. Thanks!

---

<div class="post-metadata">

**Author:** ![Sebastian\_Reinhard](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian_reinhard/32/513_2.png) [@Sebastian\_Reinhard](https://forums.fusetools.com/u/Sebastian_Reinhard)\
**Post date:** [December 30, 2016, 7:12pm UTC](https://forums.fusetools.com/t/placing-an-image/1858/8 "2016-12-30T19:12:31Z")

</div>

You can achieve rounded corners on the top of an image using a [Rectangle](https://www.fusetools.com/docs/fuse/controls/rectangle) with an [ImageFill](https://www.fusetools.com/docs/fuse/drawing/imagefill) brush.

Something like this:

```auto
<Rectangle CornerRadius="3,3,0,0">
    <ImageFill File="..." />
</Rectangle>

```