Image overflow in Treeview Header or Expender

Question

Hi,

Is there a way to achieved this kind of header ? I mean having an image that OVERFLOW the header border.

I tried using a Cavas having a height of 60 and then put the image inside. After I follow by a Grid for the Text but with an Height of 30 vertically centered. But the result isn't what we see here.

Anyone have an idea ?
Best regards,

Answer 1

Hi,

The image does not have to be placed in the same container as the text. Probably the easiest way to achieve this is to put the image *on top of* the text box and give it a height where the text box can be vertically aligned to the the bottom.

If you could share the XAML, we can look into more in details.

Regards,

Answer 2

Hi Johnny,

I tried something like that and it is working.

<Grid Grid.Row="0">
	<Border x:Name="toggleBorder"
			Background="Orange" 
			BorderThickness="1,1,1,0"
			Height="23" VerticalAlignment="Bottom">
		<TextBlock VerticalAlignment="Center" Padding="36,0,0,0">Test</TextBlock>
	</Border>
	<Image x:Name="headerImage"  Width="32" Height="32" Margin="1,0,0,0" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="Untitled (119).ico"/>
</Grid>

And here is the result :

But there's still something that I can not understand, if I place the image before the border , eg:

<Grid Grid.Row="0">
	<Image x:Name="headerImage" Width="32" Height="32" Margin="1,0,0,0" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Bottom" Source="Untitled (119).ico" Panel.ZIndex="10"/>
	<Border x:Name="toggleBorder"
			Background="Orange" 
			BorderThickness="1,1,1,0"
			Height="23" VerticalAlignment="Bottom">
		  <TextBlock VerticalAlignment="Center" Padding="36,0,0,0">Toto</TextBlock>
	</Border>
</Grid>

doing in that whay the image is place behind the border, but indicating a ZIndex greater it became on top of the border. But do it as HTML and image is an INLINE element and an object border BLOCK element ? Because the image does not takes space BEFORE the border.

Answer 3

Hi,

Larger ZIndex values are rendered on top of elements with smaller ZIndex.

By default, the ZIndex is 0 and element will be rendered according or the order they appear in XAML, meaing elements added later are placed on top of elements added earlier unless ZIndex values are explicitly specified.

XAML layout mechanics are very different from HTML.

Regards,

Answer 4

Hi Johny,

But it is very weird that putting the image after the border and not inside, result in having the image insert ON TOP of the border element ?..?

As the Border is a layout container and the image put OUTSIDE of it, it should suppose to be place into the preceeding layout container but taking place aside of the border, not into ? I don't understand...

Answer 5

Well, it is up to you how you want to place it anyway.

The border can be a container for the image if you put it inside. All the XAML indicates is that both the image and border belong to the parent container (grid). If that happens, the layout will place one on top of another with regard to the ZIndex.

It all comes down to what is the visual effect you are after and apparently there are more than one way to do it mostly.

Regards,