November 03, 2013
Gets or sets the outer margin of a FrameworkElement.
Assembly: System.Windows (in System.Windows.dll)
XMLNS for XAML: Not mapped to an xmlns.
<frameworkElement Margin="uniform"/> - or - <frameworkElement Margin="left+right,top+bottom"/> - or - <frameworkElement Margin="left,top,right,bottom"/>
In the XAML syntaxes shown previously, you can also use a space instead of a comma as the delimiter between values.
See Remarks for value type, value bounds and edge-case considerations that affect both code and XAML usages of .
Dependency property identifier field: MarginProperty
The margin is the space between this object and other objects that will be adjacent when layout creates the UI. The other objects participating in layout might be peer objects (such as other objects in the collection of a common parent control), or might also be this object's parent in the visual tree.
can be set as discrete Thickness values instead of as a uniform value so that the margin around an object can be set asymmetrically. The Thickness structure itself supports string type conversion so that you can specify an asymmetric in XAML attribute syntax. For example, in XAML, an object that has a margin specified as Margin="15,10,0,10" would have a margin of 15 logical pixels on the left, 10 on the top, 0 on the right, and 10 on the bottom.
<Grid x:Name="LayoutRoot" Background="Coral" Width="350" Height="135" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <TextBlock Grid.Column="0" Grid.Row="0" Text="First Name" HorizontalAlignment="Center" VerticalAlignment="Center" /> <TextBlock Grid.Column="0" Grid.Row="1" Text="Last Name" HorizontalAlignment="Center" VerticalAlignment="Center" /> <TextBox Grid.Column="1" Grid.Row="0" Margin="15,10,15,10" /> <TextBox Grid.Column="1" Grid.Row="1" Margin="15,10,15,10" /> </Grid>
The following illustration shows the effect of setting the property.
Margin Behavior and Layout
Margins are additive for peer objects in a layout; for example, two horizontally or vertically adjacent objects both with a margin of 30 set on the adjoining edge would have 60 logical pixels of space between them.
Objects that have margins set will not typically constrain the size of the specified if the allotted rectangle space is not large enough for the margin plus the object's content area. The content area will be constrained instead when layout is calculated. The only case where margins would be constrained also is if the content is already constrained all the way to zero. However, this behavior is ultimately controlled by the specific type that is interpreting , as well as the layout container of that object.
Negative values for margin dimensions are permitted, but should be used with caution (and be aware that negative margins can be interpreted differently by different class layout implementations). Negative margins typically clip the content of the object in that direction.
Non-integral values for margin values are technically permitted, but should generally be avoided and are typically rounded by the default layout rounding behavior.
There is no prescribed upper bound for margin dimensions, and it is possible (though rarely desirable) to set a margin that positions object content outside the Windows Phone content area so that the object content does not display in view.
Margin and Padding
A related concept is padding. For an object and its bounding box, the margin is extra space that is allocated to the outside of the bounding box when the UI element is contained and rendered. Padding is the area inside the bounding box, and affects the layout of any additional content or child objects inside the element. FrameworkElement does not yet define a content model; therefore, the properties for padding are instead defined by subclasses that do define a content model. The most common such property is TextBlock.Padding. Other properties are TextBlock.Padding and Border.Padding. For more information about the relationship between margin and padding, see Layout and panels for Windows Phone .
Animating a Margin
Windows Phone does not currently support direct animation of a margin, because there is no ThicknessAnimation type in Windows Phone. Border has the same issue because BorderThickness also uses the Thickness type. One possible workaround is to wrap the element in a transparent panel and animate relevant Double properties of the panel.
The following example sets margins for various elements in XAML.
<Canvas> <Rectangle Height="500" Width="480" Margin="0,0,0,0" Stroke="Gray" /> <InkPresenter x:Name="MyIP" Height="500" Width="480" Background="Transparent" Margin="0,0,0,0" MouseLeftButtonDown="MyIP_MouseLeftButtonDown" MouseMove="MyIP_MouseMove" LostMouseCapture="MyIP_LostMouseCapture"/> <Button x:Name="BtPen" Content="Pen" Margin="0,500,0,0" Height="72" Width="100" Click="BtPen_Click" /> <Button x:Name="BtMarker" Content="Marker" Margin="85,500,0,0" Height="72" Width="140" Click="BtMarker_Click" /> <Button x:Name="BtHighlighter" Content="Highlight" Margin="210,500,0,0" Height="72" Width="170" Click="BtHighlighter_Click" /> <Button x:Name="BtEraser" Content="Erase" Margin="365,500,0,0" Height="72" Width="110" Click="BtEraser_Click" /> </Canvas>
The following example shows how to set a in code, by creating a new Thickness inline. This is shown in the context where setting in code might be necessary: when you are creating the full UI element where the is being set with code instead of XAML.
Button button1 = new Button(); button1.Width = 300; button1.Height = 80; StackPanel panel1 = new StackPanel(); panel1.Orientation = System.Windows.Controls.Orientation.Horizontal; Rectangle rect1 = new Rectangle(); rect1.Width = 200; rect1.Fill = new SolidColorBrush(Colors.Green); TextBlock tb3 = new TextBlock(); tb3.Margin = new Thickness(2); tb3.Text = "Green"; tb3.TextAlignment = TextAlignment.Center; panel1.Children.Add(tb3); panel1.Children.Add(rect1); button1.Content = panel1; LayoutRoot.Children.Add(button1);