#480 – ZIndex Values and Render Transforms

January 25, 2012 1 Comment

It’s possible for controls to overlap each other when using a RenderTransform–even in containers that don’t normally overlap their child controls.

In the example below, the first Button in a StackPanel is rotated and ends up overlapping the second Button.

    <StackPanel Margin="10">
        <Button Content="Alpha" HorizontalAlignment="Center" Padding="20,0" >
            <Button.RenderTransform>
                <RotateTransform Angle="45"/>
            </Button.RenderTransform>
        </Button>
        <Button Content="Bravo" HorizontalAlignment="Center" Padding="20,0" />
    </StackPanel>


Whenever overlapping occurs, the containing panel’s attached ZIndex property dictates the overlapping order of the child controls. With default ZIndex values of 0, child controls appearing later in the XAML are rendered on top of earlier controls.

You can explicitly control the overlap order by specifying ZIndex values.  In the previous example, if we give the first button a ZIndex of 2 and the second button a ZIndex of 1, their overlap order is reversed.

Filed under Layout Tagged with , , ,

#477 – Default ZIndex Value for Child Elements of a Canvas

January 20, 2012 1 Comment

You can set the Canvas.ZIndex attached property for a child element of the Canvas panel, to dictate the overlap behavior of child elements.  Elements with a higher ZIndex value will appear on top of elements with a lower value.

By default, all child elements of a Canvas have a ZIndex value of 0.  In this case, the Canvas lays out the child elements in the order that they exist in the Children collection (the same order in which they appear in XAML), with elements occurring later in the collection layering on top of elements that occur earlier in the collection.

More generally, any time that two elements have the same value for ZIndex, they are layered in the order in which the appear in the Children collection.





                


                

					

						Filed under Layout
						Tagged with , , , 					

                


            


        
            


           		


                    
#476 – Set ZIndex Values for Child Elements of Canvas


                    

                        

                        	January 19, 2012
                        	                        	Leave a Comment
                        	                        

                    


                    
By default, child elements of a Canvas panel will be arranged in the order that they appear in a XAML file, with later elements appearing on top of earlier elements.




You can override this behavior by specifying explicit values for the Canvas.ZIndex attached property.  An element with a higher ZIndex value will appear on top of an element with a lower value.


        <Canvas Name="canv" Grid.Row="0">
            <Button Content="1 - Lft10,Top10" Canvas.Left="10" Canvas.Top="10" Canvas.ZIndex="4"/>
            <Button Content="2 - Rt10,Top10" Canvas.Right="10" Canvas.Top="15" Canvas.ZIndex="3"/>
            <Button Content="3 - Lft10,Bott10..." Canvas.Left="15" Canvas.Bottom="15" Canvas.ZIndex="2"/>
            <Button Content="4 - Rt10,Bott10" Canvas.Right="10" Canvas.Bottom="8"  Canvas.ZIndex="1"/>
        </Canvas>







                


                

					

						Filed under Layout
						Tagged with , , , 					

                


            


        
        

        	

        	

        



	



















	

	

	

	

			
	

		Follow
		

			
					

		
			

			
Get every new post delivered to your Inbox.

			
			

						
Join 110 other followers