How to: Create a BulletDecorator

This example shows how the Bullet of a BulletDecorator control aligns with different types of Child objects. This example also shows different types of Bullet objects.

The following example shows how to define a BulletDecorator control that uses an image as the Bullet and a text object as the Child. When a text object contains multiple lines of text, as it does in this example, the Bullet object lines up with the first line of text.

No code example is currently available or this language may not be supported.

<BulletDecorator  Grid.Row="1" Grid.Column="0" Margin="0,5,0,0"
                  VerticalAlignment="Center" Background="Yellow">
  <BulletDecorator.Bullet>
    <Image Source="images\apple.jpg"/>
  </BulletDecorator.Bullet>
  <TextBlock
    Width="100" 
    TextWrapping="Wrap" 
    HorizontalAlignment="Left"
    Foreground ="Purple">
    A Simple BulletDecorator
  </TextBlock>
</BulletDecorator>


The following example shows how to define a BulletDecorator control that uses an image as the Bullet and a text object that has a specified font size as the Child. Because the Bullet is smaller than the letters that are specified by the font size, the Bullet object centers itself next to the text.


<BulletDecorator Margin="0,5,0,10" Grid.Column="0" Grid.Row="2"
  VerticalAlignment="Center">
  <BulletDecorator.Bullet>
    <Image Source="images\apple.jpg"/>
  </BulletDecorator.Bullet>
  <TextBlock Name="FontSizeExample"
    FontSize="12" Foreground="Green">FontSize = 12 </TextBlock>
</BulletDecorator>


The following example shows how to define a BulletDecorator control that uses an image as the Bullet and a non-text element as the Child. In this example, the Bullet object centers itself next to the non-text element.


<BulletDecorator Grid.Row="3" Grid.Column="0" Margin="0,5,0,0">
  <BulletDecorator.Bullet>
    <Image Source="images\apple.jpg"/>
  </BulletDecorator.Bullet>
  <Ellipse Height="75" Width="50" Fill="Purple" 
           HorizontalAlignment="Left" ></Ellipse>
</BulletDecorator>


The following example shows three kinds of Bullet options for a BulletDecorator control.


    <BulletDecorator Margin="0,5,0,0">
      <BulletDecorator.Bullet>
        <CheckBox/>
      </BulletDecorator.Bullet>
      <TextBlock
        Width="100" 
        TextWrapping="Wrap" 
        HorizontalAlignment="Left"
        Foreground = "Blue" 
        Margin="5,0,0,0">
        A BulletDecorator with a CheckBox Bullet.
      </TextBlock>
    </BulletDecorator>
      <BulletDecorator Margin="0,5,0,0">
        <BulletDecorator.Bullet>
          <TextBox Width="30"/>
        </BulletDecorator.Bullet>
        <TextBlock
          Width="100" 
          TextWrapping="Wrap" 
          HorizontalAlignment="Left"
          Foreground ="Blue" 
          Margin="5,0,0,0">
          A BulletDecorator with a TextBox Bullet.
        </TextBlock>
      </BulletDecorator>
      <BulletDecorator Margin="0,5,0,0">
      <BulletDecorator.Bullet>
        <RadioButton/>
      </BulletDecorator.Bullet>
        <TextBlock
          Width="100" 
          TextWrapping="Wrap" 
          HorizontalAlignment="Left"
          Foreground ="Blue"
          Margin="5,0,0,0">
          A BulletDecorator with a RadioButton Bullet
        </TextBlock>
      </BulletDecorator>



Show: