How to: Get or Set Canvas Positioning Properties

This example shows how to use the positioning methods of the Canvas element to position child content. This example uses content in a ListBoxItem to represent positioning values and converts the values into instances of Double, which is a required argument for positioning. The values are then converted back into strings and displayed as text in a TextBlock element by using the GetLeft method.

Example

The following example creates a ListBox element that has eleven selectable ListBoxItem elements. The SelectionChanged event triggers the ChangeLeft custom method, which the subsequent code block defines.

Each ListBoxItem represents a Double value, which is one of the arguments that the SetLeft method of Canvas accepts. In order to use a ListBoxItem to represent an instance of Double, you must first convert the ListBoxItem to the correct data type.

<ListBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Width="60" Margin="10,0,0,0" SelectionChanged="ChangeLeft">
  <ListBoxItem>Auto</ListBoxItem>      
  <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>

<ListBox Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Width="60" Margin="10,0,0,0" SelectionChanged="ChangeLeft">
  <ListBoxItem>Auto</ListBoxItem>      
  <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, it invokes the ChangeLeft custom method. This method passes the ListBoxItem to a LengthConverter object, which converts the Content of a ListBoxItem to an instance of Double (notice that this value has already been converted to a String by using the ToString method). This value is then passed back to the SetLeft and GetLeft methods of Canvas in order to change the position of the text1 object.

public void ChangeLeft(object sender, SelectionChangedEventArgs args)
{
    ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
    LengthConverter myLengthConverter = new LengthConverter();
    Double db1 = (Double)myLengthConverter.ConvertFromString(li.Content.ToString());
    Canvas.SetLeft(text1, db1);
    String st1 = (String)myLengthConverter.ConvertToString(Canvas.GetLeft(text1));
    canvasLeft.Text = "Canvas.Left = " + st1;
}

Public Sub ChangeLeft(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    Dim myLengthConverter As New LengthConverter
    Dim db1 As Double = CType(myLengthConverter.ConvertFromString(li.Content.ToString()), Double)
    Canvas.SetLeft(text1, db1)
    Dim st1 As String = CType(myLengthConverter.ConvertToString(Canvas.GetLeft(text1)), String)
    canvasLeft.Text = "Canvas.Left = " + st1
End Sub

For the complete sample, see Positioning Properties of Canvas Sample.

See Also

Reference

Canvas
LengthConverter
ListBoxItem

Concepts

Panels Overview