Professional Documents
Culture Documents
At first glance, the Button elements in this illustration may appear to be placed randomly. However, their positions are actually precisely controlled by using a combination of margins, alignments, and padding. The following example describes how to create the layout in the preceding illustration. A Border element encapsulates a parent StackPanel, with a Padding value of 15 device independent pixels. This accounts for the narrow LightBlue band that surrounds the child StackPanel. Child elements of the StackPanel are used to illustrate each of the various positioning properties that are detailed in this topic. Three Button elements are used to demonstrate both the Margin and HorizontalAlignment properties. C#
12/19/13
/ /A d daB o r d e r m y B o r d e r=n e wB o r d e r ( ) ; m y B o r d e r . B a c k g r o u n d=B r u s h e s . L i g h t B l u e ; m y B o r d e r . B o r d e r B r u s h=B r u s h e s . B l a c k ; m y B o r d e r . P a d d i n g=n e wT h i c k n e s s ( 1 5 ) ; m y B o r d e r . B o r d e r T h i c k n e s s=n e wT h i c k n e s s ( 2 ) ; m y S t a c k P a n e l=n e wS t a c k P a n e l ( ) ; m y S t a c k P a n e l . B a c k g r o u n d=B r u s h e s . W h i t e ; m y S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y S t a c k P a n e l . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . T o p ; T e x t B l o c km y T e x t B l o c k=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k . M a r g i n=n e wT h i c k n e s s ( 5 ,0 ,5 ,0 ) ; m y T e x t B l o c k . F o n t S i z e=1 8 ; m y T e x t B l o c k . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k . T e x t=" A l i g n m e n t ,M a r g i na n dP a d d i n gS a m p l e " ; B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ; m y B u t t o n 1 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . L e f t ; m y B u t t o n 1 . M a r g i n=n e wT h i c k n e s s ( 2 0 ) ; m y B u t t o n 1 . C o n t e n t=" B u t t o n1 " ; B u t t o nm y B u t t o n 2=n e wB u t t o n ( ) ; m y B u t t o n 2 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . R i g h t ; m y B u t t o n 2 . M a r g i n=n e wT h i c k n e s s ( 1 0 ) ; m y B u t t o n 2 . C o n t e n t=" B u t t o n2 " ; B u t t o nm y B u t t o n 3=n e wB u t t o n ( ) ; m y B u t t o n 3 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . S t r e t c h ; m y B u t t o n 3 . M a r g i n=n e wT h i c k n e s s ( 0 ) ; m y B u t t o n 3 . C o n t e n t=" B u t t o n3 " ; / /A d dc h i l de l e m e n t st ot h ep a r e n tS t a c k P a n e l . m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 1 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 2 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 3 ) ; / /A d dt h eS t a c k P a n e la st h el o n eC h i l do ft h eB o r d e r . m y B o r d e r . C h i l d=m y S t a c k P a n e l ; / /A d dt h eB o r d e ra st h eC o n t e n to ft h eP a r e n tW i n d o wO b j e c t . m a i n W i n d o w . C o n t e n t=m y B o r d e r ; m a i n W i n d o w . S h o w( ) ;
XAML
< P a g ex m l n s = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l / p r e s e n t a t i o n "W i n d o w T i t l e = " M a r g i n s ,P a d d i n ga n d < B o r d e rB a c k g r o u n d = " L i g h t B l u e "B o r d e r B r u s h = " B l a c k "B o r d e r T h i c k n e s s = " 2 "P a d d i n g = " 1 5 " > < S t a c k P a n e lB a c k g r o u n d = " W h i t e "H o r i z o n t a l A l i g n m e n t = " C e n t e r "V e r t i c a l A l i g n m e n t = " T o p " > < T e x t B l o c kM a r g i n = " 5 , 0 , 5 , 0 "F o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r " > A l i g n m e n t ,M a r g i na n dP a d d < B u t t o nH o r i z o n t a l A l i g n m e n t = " L e f t "M a r g i n = " 2 0 " > B u t t o n1 < / B u t t o n > < B u t t o nH o r i z o n t a l A l i g n m e n t = " R i g h t "M a r g i n = " 1 0 " > B u t t o n2 < / B u t t o n > < B u t t o nH o r i z o n t a l A l i g n m e n t = " S t r e t c h "M a r g i n = " 0 " > B u t t o n3 < / B u t t o n > < / S t a c k P a n e l > < / B o r d e r > < / P a g e >
The following diagram provides a close-up view of the various positioning properties that are used in the preceding
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx 2/12
12/19/13
sample. Subsequent sections in this topic describe in greater detail how to use each positioning property.
HorizontalAlignment Property
The HorizontalAlignment property declares the horizontal alignment characteristics to apply to child elements. The following table shows each of the possible values of the HorizontalAlignment property. Member Left Center Right Stretch (Default) Description Child elements are aligned to the left of the parent element's allocated layout space. Child elements are aligned to the center of the parent element's allocated layout space. Child elements are aligned to the right of the parent element's allocated layout space. Child elements are stretched to fill the parent element's allocated layout space. Explicit Width and Height values take precedence.
The following example shows how to apply the HorizontalAlignment property to Button elements. Each attribute value is shown, to better illustrate the various rendering behaviors. C#
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ;
3/12
12/19/13
B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ; m y B u t t o n 1 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . L e f t ; m y B u t t o n 1 . C o n t e n t=" B u t t o n1( L e f t ) " ; B u t t o nm y B u t t o n 2=n e wB u t t o n ( ) ; m y B u t t o n 2 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . R i g h t ; m y B u t t o n 2 . C o n t e n t=" B u t t o n2( R i g h t ) " ; B u t t o nm y B u t t o n 3=n e wB u t t o n ( ) ; m y B u t t o n 3 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y B u t t o n 3 . C o n t e n t=" B u t t o n3( C e n t e r ) " ; B u t t o nm y B u t t o n 4=n e wB u t t o n ( ) ; m y B u t t o n 4 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . S t r e t c h ; m y B u t t o n 4 . C o n t e n t=" B u t t o n4( S t r e t c h ) " ;
XAML
< P a g ex m l n s = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l / p r e s e n t a t i o n "W i n d o w T i t l e = " H o r i z o n t a l A l i g n m e n < B o r d e rB a c k g r o u n d = " L i g h t B l u e "B o r d e r B r u s h = " B l a c k "B o r d e r T h i c k n e s s = " 2 "P a d d i n g = " 1 5 " > < S t a c k P a n e lB a c k g r o u n d = " W h i t e "H o r i z o n t a l A l i g n m e n t = " C e n t e r "V e r t i c a l A l i g n m e n t = " T o p " > < T e x t B l o c kM a r g i n = " 5 , 0 , 5 , 0 "F o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r " > H o r i z o n t a l A l i g n m e n tS a m p < B u t t o nH o r i z o n t a l A l i g n m e n t = " L e f t " > B u t t o n1( L e f t ) < / B u t t o n > < B u t t o nH o r i z o n t a l A l i g n m e n t = " R i g h t " > B u t t o n2( R i g h t ) < / B u t t o n > < B u t t o nH o r i z o n t a l A l i g n m e n t = " C e n t e r " > B u t t o n3( C e n t e r ) < / B u t t o n > < B u t t o nH o r i z o n t a l A l i g n m e n t = " S t r e t c h " > B u t t o n4( S t r e t c h ) < / B u t t o n > < / S t a c k P a n e l > < / B o r d e r > < / P a g e >
The preceding code yields a layout similar to the following image. The positioning effects of each HorizontalAlignment value are visible in the illustration.
VerticalAlignment Property
The VerticalAlignment property describes the vertical alignment characteristics to apply to child elements. The following table shows each of the possible values for the VerticalAlignment property. Member Top Center Bottom Description Child elements are aligned to the top of the parent element's allocated layout space. Child elements are aligned to the center of the parent element's allocated layout space. Child elements are aligned to the bottom of the parent element's allocated layout space.
4/12
Stretch Child elements are stretched to fill the parent element's allocated layout space. Explicit Width and msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
12/19/13
Stretch (Default)
Child elements are stretched to fill the parent element's allocated layout space. Explicit Width and Height values take precedence.
The following example shows how to apply the VerticalAlignment property to Button elements. Each attribute value is shown, to better illustrate the various rendering behaviors. For purposes of this sample, a Grid element with visible gridlines is used as the parent, to better illustrate the layout behavior of each property value. C# T e x t B l o c km y T e x t B l o c k=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k . F o n t S i z e=1 8 ; m y T e x t B l o c k . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k . T e x t=" V e r t i c a l A l i g n m e n tS a m p l e " ; G r i d . S e t R o w ( m y T e x t B l o c k ,0 ) ; B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ; m y B u t t o n 1 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . T o p ; m y B u t t o n 1 . C o n t e n t=" B u t t o n1( T o p ) " ; G r i d . S e t R o w ( m y B u t t o n 1 ,1 ) ; B u t t o nm y B u t t o n 2=n e wB u t t o n ( ) ; m y B u t t o n 2 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . B o t t o m ; m y B u t t o n 2 . C o n t e n t=" B u t t o n2( B o t t o m ) " ; G r i d . S e t R o w ( m y B u t t o n 2 ,2 ) ; B u t t o nm y B u t t o n 3=n e wB u t t o n ( ) ; m y B u t t o n 3 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . C e n t e r ; m y B u t t o n 3 . C o n t e n t=" B u t t o n3( C e n t e r ) " ; G r i d . S e t R o w ( m y B u t t o n 3 ,3 ) ; B u t t o nm y B u t t o n 4=n e wB u t t o n ( ) ; m y B u t t o n 4 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . S t r e t c h ; m y B u t t o n 4 . C o n t e n t=" B u t t o n4( S t r e t c h ) " ; G r i d . S e t R o w ( m y B u t t o n 4 ,4 ) ;
XAML
< P a g ex m l n s = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l / p r e s e n t a t i o n " x m l n s : x = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l " W i n d o w T i t l e = " V e r t i c a l A l i g n m e n tS a m p l e " > < B o r d e rB a c k g r o u n d = " L i g h t B l u e "B o r d e r B r u s h = " B l a c k "B o r d e r T h i c k n e s s = " 2 "P a d d i n g = " 1 5 " > < G r i dB a c k g r o u n d = " W h i t e "S h o w G r i d L i n e s = " T r u e " > < G r i d . R o w D e f i n i t i o n s > < R o w D e f i n i t i o nH e i g h t = " 2 5 " / > < R o w D e f i n i t i o nH e i g h t = " 5 0 " / > < R o w D e f i n i t i o nH e i g h t = " 5 0 " / > < R o w D e f i n i t i o nH e i g h t = " 5 0 " / > < R o w D e f i n i t i o nH e i g h t = " 5 0 " / > < / G r i d . R o w D e f i n i t i o n s > < T e x t B l o c kG r i d . R o w = " 0 "G r i d . C o l u m n = " 0 "F o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r " > V e r t i c a l < B u t t o nG r i d . R o w = " 1 "G r i d . C o l u m n = " 0 "V e r t i c a l A l i g n m e n t = " T o p " > B u t t o n1( T o p ) < / B u t t o n > < B u t t o nG r i d . R o w = " 2 "G r i d . C o l u m n = " 0 "V e r t i c a l A l i g n m e n t = " B o t t o m " > B u t t o n2( B o t t o m ) < / B u t t o n < B u t t o nG r i d . R o w = " 3 "G r i d . C o l u m n = " 0 "V e r t i c a l A l i g n m e n t = " C e n t e r " > B u t t o n3( C e n t e r ) < / B u t t o n < B u t t o nG r i d . R o w = " 4 "G r i d . C o l u m n = " 0 "V e r t i c a l A l i g n m e n t = " S t r e t c h " > B u t t o n4( S t r e t c h ) < / < / G r i d > < / B o r d e r > < / P a g e >
The preceding code yields a layout similar to the following image. The positioning effects of each VerticalAlignment value are visible in the illustration.
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx 5/12
12/19/13
XAML < B u t t o nM a r g i n = " 1 0 " > B u t t o n7 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 " > B u t t o n8 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 " > B u t t o n9 < / B u t t o n > In many instances, a uniform margin is not appropriate. In these cases, non-uniform spacing can be applied. The following example shows how to apply non-uniform margin spacing to child elements. Margins are described in this order: left, top, right, bottom. C#
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx 6/12
12/19/13
B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ; m y B u t t o n 1 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ; m y B u t t o n 1 . C o n t e n t=" B u t t o n1 " ; B u t t o nm y B u t t o n 2=n e wB u t t o n ( ) ; m y B u t t o n 2 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ; m y B u t t o n 2 . C o n t e n t=" B u t t o n2 " ; B u t t o nm y B u t t o n 3=n e wB u t t o n ( ) ; m y B u t t o n 3 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ;
XAML < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n1 < / B u t t o n > < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n2 < / B u t t o n > < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n3 < / B u t t o n >
XAML < B o r d e rB a c k g r o u n d = " L i g h t B l u e " B o r d e r B r u s h = " B l a c k " B o r d e r T h i c k n e s s = " 2 " C o r n e r R a d i u s = " 4 5 " P a d d i n g = " 2 5 " >
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
7/12
12/19/13
elements. Button elements are again used to show the various effects of Margin and HorizontalAlignment. TextBlock elements are added to each ColumnDefinition to better define the various properties applied to the Button elements in each column. C# m a i n W i n d o w=n e wW i n d o w ( ) ; m y B o r d e r=n e wB o r d e r ( ) ; m y B o r d e r . B a c k g r o u n d=B r u s h e s . L i g h t B l u e ; m y B o r d e r . B o r d e r B r u s h=B r u s h e s . B l a c k ; m y B o r d e r . B o r d e r T h i c k n e s s=n e wT h i c k n e s s ( 2 ) ; m y B o r d e r . C o r n e r R a d i u s=n e wC o r n e r R a d i u s ( 4 5 ) ; m y B o r d e r . P a d d i n g=n e wT h i c k n e s s ( 2 5 ) ; / /D e f i n et h eG r i d . m y G r i d=n e wG r i d ( ) ; m y G r i d . B a c k g r o u n d=B r u s h e s . W h i t e ; m y G r i d . S h o w G r i d L i n e s=t r u e ; / /D e f i n et h eC o l u m n s . C o l u m n D e f i n i t i o nm y C o l D e f 1=n e wC o l u m n D e f i n i t i o n ( ) ; m y C o l D e f 1 . W i d t h=n e wG r i d L e n g t h ( 1 ,G r i d U n i t T y p e . A u t o ) ; C o l u m n D e f i n i t i o nm y C o l D e f 2=n e wC o l u m n D e f i n i t i o n ( ) ; m y C o l D e f 2 . W i d t h=n e wG r i d L e n g t h ( 1 ,G r i d U n i t T y p e . S t a r ) ; C o l u m n D e f i n i t i o nm y C o l D e f 3=n e wC o l u m n D e f i n i t i o n ( ) ; m y C o l D e f 3 . W i d t h=n e wG r i d L e n g t h ( 1 ,G r i d U n i t T y p e . A u t o ) ; / /A d dt h eC o l u m n D e f i n i t i o n st ot h eG r i d . m y G r i d . C o l u m n D e f i n i t i o n s . A d d ( m y C o l D e f 1 ) ; m y G r i d . C o l u m n D e f i n i t i o n s . A d d ( m y C o l D e f 2 ) ; m y G r i d . C o l u m n D e f i n i t i o n s . A d d ( m y C o l D e f 3 ) ; / /A d dt h ef i r s tc h i l dS t a c k P a n e l . S t a c k P a n e lm y S t a c k P a n e l=n e wS t a c k P a n e l ( ) ; m y S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . L e f t ; m y S t a c k P a n e l . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . T o p ; G r i d . S e t C o l u m n ( m y S t a c k P a n e l ,0 ) ; G r i d . S e t R o w ( m y S t a c k P a n e l ,0 ) ; T e x t B l o c km y T e x t B l o c k 1=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 . F o n t S i z e=1 8 ; m y T e x t B l o c k 1 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 1 . M a r g i n=n e wT h i c k n e s s ( 0 ,0 ,0 ,1 5 ) ; m y T e x t B l o c k 1 . T e x t=" S t a c k P a n e l1 " ; B u t t o nm y B u t t o n 1=n e wB u t t o n ( ) ; m y B u t t o n 1 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ; m y B u t t o n 1 . C o n t e n t=" B u t t o n1 " ; B u t t o nm y B u t t o n 2=n e wB u t t o n ( ) ; m y B u t t o n 2 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ; m y B u t t o n 2 . C o n t e n t=" B u t t o n2 " ; B u t t o nm y B u t t o n 3=n e wB u t t o n ( ) ; m y B u t t o n 3 . M a r g i n=n e wT h i c k n e s s ( 0 ,1 0 ,0 ,1 0 ) ; T e x t B l o c km y T e x t B l o c k 2=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 2 . T e x t=@ " C o l u m n D e f i n i t i o n . W i d t h=" " A u t o " " " ; T e x t B l o c km y T e x t B l o c k 3=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 3 . T e x t=@ " S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t=" " L e f t " " " ; T e x t B l o c km y T e x t B l o c k 4=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 4 . T e x t=@ " S t a c k P a n e l . V e r t i c a l A l i g n m e n t=" " T o p " " " ; T e x t B l o c km y T e x t B l o c k 5=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 5 . T e x t=@ " S t a c k P a n e l . O r i e n t a t i o n=" " V e r t i c a l " " " ;
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
8/12
12/19/13
T e x t B l o c km y T e x t B l o c k 6=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 6 . T e x t=@ " B u t t o n . M a r g i n=" " 1 , 1 0 , 0 , 1 0 " " " ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 1 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 1 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 2 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y B u t t o n 3 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 2 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 3 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 4 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 5 ) ; m y S t a c k P a n e l . C h i l d r e n . A d d ( m y T e x t B l o c k 6 ) ; / /A d dt h es e c o n dc h i l dS t a c k P a n e l . S t a c k P a n e lm y S t a c k P a n e l 2=n e wS t a c k P a n e l ( ) ; m y S t a c k P a n e l 2 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . S t r e t c h ; m y S t a c k P a n e l 2 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . T o p ; m y S t a c k P a n e l 2 . O r i e n t a t i o n=O r i e n t a t i o n . V e r t i c a l ; G r i d . S e t C o l u m n ( m y S t a c k P a n e l 2 ,1 ) ; G r i d . S e t R o w ( m y S t a c k P a n e l 2 ,0 ) ; T e x t B l o c km y T e x t B l o c k 7=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 7 . F o n t S i z e=1 8 ; m y T e x t B l o c k 7 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 7 . M a r g i n=n e wT h i c k n e s s ( 0 ,0 ,0 ,1 5 ) ; m y T e x t B l o c k 7 . T e x t=" S t a c k P a n e l2 " ; B u t t o nm y B u t t o n 4=n e wB u t t o n ( ) ; m y B u t t o n 4 . M a r g i n=n e wT h i c k n e s s ( 1 0 ,0 ,1 0 ,0 ) ; m y B u t t o n 4 . C o n t e n t=" B u t t o n4 " ; B u t t o nm y B u t t o n 5=n e wB u t t o n ( ) ; m y B u t t o n 5 . M a r g i n=n e wT h i c k n e s s ( 1 0 ,0 ,1 0 ,0 ) ; m y B u t t o n 5 . C o n t e n t=" B u t t o n5 " ; B u t t o nm y B u t t o n 6=n e wB u t t o n ( ) ; m y B u t t o n 6 . M a r g i n=n e wT h i c k n e s s ( 1 0 ,0 ,1 0 ,0 ) ; m y B u t t o n 6 . C o n t e n t=" B u t t o n6 " ; T e x t B l o c km y T e x t B l o c k 8=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 8 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 8 . T e x t=@ " C o l u m n D e f i n i t i o n . W i d t h=" " * " " " ; T e x t B l o c km y T e x t B l o c k 9=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 9 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 9 . T e x t=@ " S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t=" " S t r e t c h " " " ; T e x t B l o c km y T e x t B l o c k 1 0=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 0 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 1 0 . T e x t=@ " S t a c k P a n e l . V e r t i c a l A l i g n m e n t=" " T o p " " " ; T e x t B l o c km y T e x t B l o c k 1 1=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 1 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 1 1 . T e x t=@ " S t a c k P a n e l . O r i e n t a t i o n=" " H o r i z o n t a l " " " ; T e x t B l o c km y T e x t B l o c k 1 2=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 2 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 1 2 . T e x t=@ " B u t t o n . M a r g i n=" " 1 0 , 0 , 1 0 , 0 " " " ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 7 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y B u t t o n 4 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y B u t t o n 5 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y B u t t o n 6 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 8 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 9 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 0 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 1 ) ; m y S t a c k P a n e l 2 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 2 ) ; / /A d dt h ef i n a lc h i l dS t a c k P a n e l . S t a c k P a n e lm y S t a c k P a n e l 3=n e wS t a c k P a n e l ( ) ;
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx 9/12
12/19/13
Alignment, Margins, and Padding Overview S t a c k P a n e lm y S t a c k P a n e l 3=n e wS t a c k P a n e l ( ) ; m y S t a c k P a n e l 3 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . L e f t ; m y S t a c k P a n e l 3 . V e r t i c a l A l i g n m e n t=V e r t i c a l A l i g n m e n t . T o p ; G r i d . S e t C o l u m n ( m y S t a c k P a n e l 3 ,2 ) ; G r i d . S e t R o w ( m y S t a c k P a n e l 3 ,0 ) ; T e x t B l o c km y T e x t B l o c k 1 3=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 3 . F o n t S i z e=1 8 ; m y T e x t B l o c k 1 3 . H o r i z o n t a l A l i g n m e n t=H o r i z o n t a l A l i g n m e n t . C e n t e r ; m y T e x t B l o c k 1 3 . M a r g i n=n e wT h i c k n e s s ( 0 ,0 ,0 ,1 5 ) ; m y T e x t B l o c k 1 3 . T e x t=" S t a c k P a n e l3 " ; B u t t o nm y B u t t o n 7=n e wB u t t o n ( ) ; m y B u t t o n 7 . M a r g i n=n e wT h i c k n e s s ( 1 0 ) ; m y B u t t o n 7 . C o n t e n t=" B u t t o n7 " ; B u t t o nm y B u t t o n 8=n e wB u t t o n ( ) ; m y B u t t o n 8 . M a r g i n=n e wT h i c k n e s s ( 1 0 ) ; m y B u t t o n 8 . C o n t e n t=" B u t t o n8 " ; B u t t o nm y B u t t o n 9=n e wB u t t o n ( ) ; m y B u t t o n 9 . M a r g i n=n e wT h i c k n e s s ( 1 0 ) ; m y B u t t o n 9 . C o n t e n t=" B u t t o n9 " ; T e x t B l o c km y T e x t B l o c k 1 4=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 4 . T e x t=@ " C o l u m n D e f i n i t i o n . W i d t h=" " A u t o " " " ; T e x t B l o c km y T e x t B l o c k 1 5=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 5 . T e x t=@ " S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t=" " L e f t " " " ; T e x t B l o c km y T e x t B l o c k 1 6=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 6 . T e x t=@ " S t a c k P a n e l . V e r t i c a l A l i g n m e n t=" " T o p " " " ; T e x t B l o c km y T e x t B l o c k 1 7=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 7 . T e x t=@ " S t a c k P a n e l . O r i e n t a t i o n=" " V e r t i c a l " " " ; T e x t B l o c km y T e x t B l o c k 1 8=n e wT e x t B l o c k ( ) ; m y T e x t B l o c k 1 8 . T e x t=@ " B u t t o n . M a r g i n=" " 1 0 " " " ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 3 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y B u t t o n 7 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y B u t t o n 8 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y B u t t o n 9 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 4 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 5 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 6 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 7 ) ; m y S t a c k P a n e l 3 . C h i l d r e n . A d d ( m y T e x t B l o c k 1 8 ) ;
XAML
< P a g ex m l n s = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l / p r e s e n t a t i o n "W i n d o w T i t l e = " M a r g i n s ,P a d d i n ga n d < B o r d e rB a c k g r o u n d = " L i g h t B l u e " B o r d e r B r u s h = " B l a c k " B o r d e r T h i c k n e s s = " 2 " C o r n e r R a d i u s = " 4 5 " P a d d i n g = " 2 5 " >
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx 10/12
12/19/13
P a d d i n g = " 2 5 " > < G r i dB a c k g r o u n d = " W h i t e "S h o w G r i d L i n e s = " T r u e " > < G r i d . C o l u m n D e f i n i t i o n s > < C o l u m n D e f i n i t i o nW i d t h = " A u t o " / > < C o l u m n D e f i n i t i o nW i d t h = " * " / > < C o l u m n D e f i n i t i o nW i d t h = " A u t o " / > < / G r i d . C o l u m n D e f i n i t i o n s >
< S t a c k P a n e lG r i d . C o l u m n = " 0 "G r i d . R o w = " 0 "H o r i z o n t a l A l i g n m e n t = " L e f t "N a m e = " S t a c k P a n e l 1 "V e r t i c a l A l i g n m < T e x t B l o c kF o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r "M a r g i n = " 0 , 0 , 0 , 1 5 " > S t a c k P a n e l 1 < / T e x t B l o c k < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n1 < / B u t t o n > < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n2 < / B u t t o n > < B u t t o nM a r g i n = " 0 , 1 0 , 0 , 1 0 " > B u t t o n3 < / B u t t o n > < T e x t B l o c k > C o l u m n D e f i n i t i o n . W i d t h = " A u t o " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t = " L e f t " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . V e r t i c a l A l i g n m e n t = " T o p " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . O r i e n t a t i o n = " V e r t i c a l " < / T e x t B l o c k > < T e x t B l o c k > B u t t o n . M a r g i n = " 0 , 1 0 , 0 , 1 0 " < / T e x t B l o c k > < / S t a c k P a n e l >
< S t a c k P a n e lG r i d . C o l u m n = " 1 "G r i d . R o w = " 0 "H o r i z o n t a l A l i g n m e n t = " S t r e t c h "N a m e = " S t a c k P a n e l 2 "V e r t i c a l A l i < T e x t B l o c kF o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r "M a r g i n = " 0 , 0 , 0 , 1 5 " > S t a c k P a n e l 2 < / T e x t B l o c k < B u t t o nM a r g i n = " 1 0 , 0 , 1 0 , 0 " > B u t t o n4 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 , 0 , 1 0 , 0 " > B u t t o n5 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 , 0 , 1 0 , 0 " > B u t t o n6 < / B u t t o n > < T e x t B l o c kH o r i z o n t a l A l i g n m e n t = " C e n t e r " > C o l u m n D e f i n i t i o n . W i d t h = " * " < / T e x t B l o c k > < T e x t B l o c kH o r i z o n t a l A l i g n m e n t = " C e n t e r " > S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t = " S t r e t c h " < / T e x t B l o c k < T e x t B l o c kH o r i z o n t a l A l i g n m e n t = " C e n t e r " > S t a c k P a n e l . V e r t i c a l A l i g n m e n t = " T o p " < / T e x t B l o c k > < T e x t B l o c kH o r i z o n t a l A l i g n m e n t = " C e n t e r " > S t a c k P a n e l . O r i e n t a t i o n = " H o r i z o n t a l " < / T e x t B l o c k > < T e x t B l o c kH o r i z o n t a l A l i g n m e n t = " C e n t e r " > B u t t o n . M a r g i n = " 1 0 , 0 , 1 0 , 0 " < / T e x t B l o c k > < / S t a c k P a n e l >
< S t a c k P a n e lG r i d . C o l u m n = " 2 "G r i d . R o w = " 0 "H o r i z o n t a l A l i g n m e n t = " L e f t "N a m e = " S t a c k P a n e l 3 "V e r t i c a l A l i g n m < T e x t B l o c kF o n t S i z e = " 1 8 "H o r i z o n t a l A l i g n m e n t = " C e n t e r "M a r g i n = " 0 , 0 , 0 , 1 5 " > S t a c k P a n e l 3 < / T e x t B l o c k < B u t t o nM a r g i n = " 1 0 " > B u t t o n7 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 " > B u t t o n8 < / B u t t o n > < B u t t o nM a r g i n = " 1 0 " > B u t t o n9 < / B u t t o n > < T e x t B l o c k > C o l u m n D e f i n i t i o n . W i d t h = " A u t o " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . H o r i z o n t a l A l i g n m e n t = " L e f t " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . V e r t i c a l A l i g n m e n t = " T o p " < / T e x t B l o c k > < T e x t B l o c k > S t a c k P a n e l . O r i e n t a t i o n = " V e r t i c a l " < / T e x t B l o c k > < T e x t B l o c k > B u t t o n . M a r g i n = " 1 0 " < / T e x t B l o c k > < / S t a c k P a n e l > < / G r i d > < / B o r d e r > < / P a g e >
When compiled, the preceding application yields a UI that looks like the following illustration. The effects of the various property values are evident in the spacing between elements, and significant property values for elements in each column are shown within TextBlock elements.
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
11/12
12/19/13
What's Next
Positioning properties defined by the FrameworkElement class enable fine control of element placement within WPF applications. You now have several techniques you can use to better position elements using WPF. Additional resources are available that explain WPF layout in greater detail. The Panels Overview topic contains more detail about the various Panel elements. The topic Walkthrough: Getting Started with WPF introduces advanced techniques that use layout elements to position components and bind their actions to data sources.
See Also
Reference
FrameworkElement HorizontalAlignment VerticalAlignment Margin
Concepts
Other Resources
WPF Layout Gallery Sample
msdn.microsoft.com/en-us/library/ms751709(d=printer,v=vs.110).aspx
12/12