How to: Change the Margin Property
This example shows how to change the Margin property of a child element that is in a Grid. The example represents positioning values as content in a ListBoxItem. The values are later converted into instances of Thickness, which is a required value for Margin. The value is then converted back to a string and displayed as a TextBlock.
Example
The following example creates a ListBox element that has ten selectable items. The SelectionChanged event triggers the ChangeMargin custom method, which the subsequent code example defines.
In the Extensible Application Markup Language (XAML) example, each ListBoxItem represents a Thickness value, which is used to describe the uniform margins of an element. However, before you can use a ListBoxItem to represent an instance of Thickness, you must first convert it to the correct data type. The subsequent code example shows the conversion.
<ListBox VerticalAlignment="Top" Grid.Row="0" Grid.Column="1" Width="50" Height="50" SelectionChanged="ChangeMargin">
<ListBoxItem>10</ListBoxItem>
<ListBoxItem>20</ListBoxItem>
<ListBoxItem>30</ListBoxItem>
<ListBoxItem>40</ListBoxItem>
<ListBoxItem>50</ListBoxItem>
<ListBoxItem>60</ListBoxItem>
<ListBoxItem>70</ListBoxItem>
<ListBoxItem>80</ListBoxItem>
<ListBoxItem>90</ListBoxItem>
<ListBoxItem>100</ListBoxItem>
</ListBox>
When a user changes the ListBox selection, the change invokes the ChangeMargin custom method. This method passes the ListBoxItem to a ThicknessConverter object, which converts the ListBoxItem Content to an instance of Thickness. (Notice that this value has already been converted to a string by using the ToString method.) This value is then passed back as the Margin of the text1 object, dynamically changing its position.
public void ChangeMargin(object sender, SelectionChangedEventArgs args)
{
ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
ThicknessConverter myThicknessConverter = new ThicknessConverter();
Thickness th1 = (Thickness)myThicknessConverter.ConvertFromString(li.Content.ToString());
text1.Margin = th1;
String st1 = (String)myThicknessConverter.ConvertToString(text1.Margin);
gridVal.Text = "The Margin property is set to " + st1 +".";
}
Public Sub ChangeMargin(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)
Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
Dim myThicknessConverter As ThicknessConverter = New ThicknessConverter()
Dim th1 As Thickness = CType(myThicknessConverter.ConvertFromString(li.Content.ToString()), Thickness)
text1.Margin = th1
Dim st1 As String = CType(myThicknessConverter.ConvertToString(text1.Margin), String)
gridVal.Text = "The Margin property is set to " + st1 + "."
End Sub
For the complete sample, see Changing Margins in a Grid Sample.
See Also
Tasks
How to: Convert a ListBoxItem to a New Data Type
How to: Use a ThicknessConverter Object