none
How to make textblocks appear inside an ellipse area? RRS feed

  • Question

  • Hi,

    I want to make a tag cloud.
     
    For that i'm thinking in draw an ellipse in which i insert all the tags inside.

    Is there any easy way of doing this? Or do i need to calculate the drop position using the ellipse math formula, and use a canvas to hold the tags?

    Thx,

    Nuno
    Monday, January 7, 2008 2:01 PM

Answers

  • You can write a custom decorator to do the trick:

    Code Block
    <cc:EllipseDecorator Width="160" Height="100" Background="Green" BorderBrush="Yellow" BorderThickness="4">
    <
    TextBlock Text="Windows Presentation Foundation" TextWrapping="Wrap" FontSize="18"/>
    </
    cc:EllipseDecorator>

    public class
    EllipseDecorator : Border
    {
    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
    {
    Double width = this.ActualWidth;
    Double height = this.ActualHeight;
    Double a = width / 2;
    Double b = height / 2;
    Point centerPoint = new Point(a, b);
    Double thickness = this.BorderThickness.Left;
    EllipseGeometry ellipse = new EllipseGeometry(centerPoint, a, b);
    drawingContext.PushClip(ellipse);
    drawingContext.DrawGeometry(
    this.Background,
    new Pen(this.BorderBrush, thickness),
    ellipse);
    }

    protected override Size MeasureOverride(Size constraint)
    {
    return base.MeasureOverride(constraint);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
    Double a = finalSize.Width / 2;
    Double b = finalSize.Height / 2;
    Double PI = 3.1415926;
    Double x = a * Math.Cos(45 * PI / 180);
    Double y = b * Math.Sin(45 * PI / 180);
    Rect rect = new Rect(new Point(a - x, b - y), new Point(a + x, b + y));
    if (base.Child != null)
    {
    base.Child.Arrange(rect);
    }

    return finalSize;
    }
    }



    Hope this helps
    Wednesday, January 9, 2008 6:15 AM
  • I would personally create my own template :

     

    Code Block

    <Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.Resources>
     <Style x:Key="myTextLabel"
            TargetType="Label">
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Label">
          <Grid>
           <Ellipse Fill="Black"/>
           <ContentPresenter TextElement.Foreground="White" Content="{TemplateBinding Content}"
                             VerticalAlignment="Center" HorizontalAlignment="Center"/>
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter> 
     </Style>
     
    </Page.Resources>

    <Label Style="{StaticResource myTextLabel}"
           Content="Hello World"/>

    </Page>

     

     

    This should help you get started, you can then place more ellipse if you want and move them with either margins or renderTransform.

    Monday, January 7, 2008 4:04 PM

All replies

  • I would personally create my own template :

     

    Code Block

    <Page
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.Resources>
     <Style x:Key="myTextLabel"
            TargetType="Label">
       <Setter Property="Template">
        <Setter.Value>
         <ControlTemplate TargetType="Label">
          <Grid>
           <Ellipse Fill="Black"/>
           <ContentPresenter TextElement.Foreground="White" Content="{TemplateBinding Content}"
                             VerticalAlignment="Center" HorizontalAlignment="Center"/>
          </Grid>
         </ControlTemplate>
        </Setter.Value>
       </Setter> 
     </Style>
     
    </Page.Resources>

    <Label Style="{StaticResource myTextLabel}"
           Content="Hello World"/>

    </Page>

     

     

    This should help you get started, you can then place more ellipse if you want and move them with either margins or renderTransform.

    Monday, January 7, 2008 4:04 PM
  • Hi,

    That's cool but isn't still what i need... or i didn't understand how to complete my goal with your example.

    I need to put more that one text inside the ellipse, in order to make a tag cloud. I need them disposed in a random way.

    Nuno


    Tuesday, January 8, 2008 9:26 AM
  • You can write a custom decorator to do the trick:

    Code Block
    <cc:EllipseDecorator Width="160" Height="100" Background="Green" BorderBrush="Yellow" BorderThickness="4">
    <
    TextBlock Text="Windows Presentation Foundation" TextWrapping="Wrap" FontSize="18"/>
    </
    cc:EllipseDecorator>

    public class
    EllipseDecorator : Border
    {
    protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
    {
    Double width = this.ActualWidth;
    Double height = this.ActualHeight;
    Double a = width / 2;
    Double b = height / 2;
    Point centerPoint = new Point(a, b);
    Double thickness = this.BorderThickness.Left;
    EllipseGeometry ellipse = new EllipseGeometry(centerPoint, a, b);
    drawingContext.PushClip(ellipse);
    drawingContext.DrawGeometry(
    this.Background,
    new Pen(this.BorderBrush, thickness),
    ellipse);
    }

    protected override Size MeasureOverride(Size constraint)
    {
    return base.MeasureOverride(constraint);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
    Double a = finalSize.Width / 2;
    Double b = finalSize.Height / 2;
    Double PI = 3.1415926;
    Double x = a * Math.Cos(45 * PI / 180);
    Double y = b * Math.Sin(45 * PI / 180);
    Rect rect = new Rect(new Point(a - x, b - y), new Point(a + x, b + y));
    if (base.Child != null)
    {
    base.Child.Arrange(rect);
    }

    return finalSize;
    }
    }



    Hope this helps
    Wednesday, January 9, 2008 6:15 AM
  • Hi..

    i want to the textblock dynamically(runtime)

    i draw a ellipse in canvas at runtime now i want to add the textblock inside the ellipse..





    please help

    Vineeth
    Thursday, September 18, 2008 4:46 AM
  • Hey guys

    This did the trick for me:

    1)Create an ellipse

    2)Create a text block

    3)Create a grid

    5)Add the ellipse followed by the text block to the grid

    6)Add the grid to the stack panel and you're sorted!

     

                StackPanel myStackPanel = new StackPanel();
     
                //Create an ellipse
                Ellipse myEllipse = new Ellipse();
    	   //Set the shape colour etc..
                SolidColorBrush mySolidColorBrush = new SolidColorBrush();
                mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
                myEllipse.Fill = mySolidColorBrush;
                myEllipse.StrokeThickness = 2;
                myEllipse.Stroke = Brushes.Black;
                myEllipse.Width = 200;
                myEllipse.Height = 200;
                
    	  //Create a text block with a value of 1
                TextBlock txt = new TextBlock();
                txt.Text = "1";
                txt.FontSize = 20;
                txt.Width = 15;
                txt.Height = 20;
                txt.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt.VerticalAlignment = System.Windows.VerticalAlignment.Center;
     
                //Create a grid and add your ellipse and text to it
                Grid gr = new Grid();
                gr.Children.Add(myEllipse);
                gr.Children.Add(txt);
                
     
                //Finally, add the grid to the stack panel
                myStackPanel.Children.Add(gr);
                this.Content = myStackPanel;
    Wednesday, October 19, 2011 10:33 AM
  • This did the trick for me:

    1)Create an ellipse

    2)Create a text block

    3)Create a grid

    5)Add the ellipse followed by the text block to the grid

    6)Add the grid to the stack panel and you're sorted!

     

                StackPanel myStackPanel = new StackPanel();
     
                //Create an ellipse
                Ellipse myEllipse = new Ellipse();
    	   //Set the shape colour etc..
                SolidColorBrush mySolidColorBrush = new SolidColorBrush();
                mySolidColorBrush.Color = Color.FromArgb(255, 255, 255, 0);
                myEllipse.Fill = mySolidColorBrush;
                myEllipse.StrokeThickness = 2;
                myEllipse.Stroke = Brushes.Black;
                myEllipse.Width = 200;
                myEllipse.Height = 200;
                
    	  //Create a text block with a value of 1
                TextBlock txt = new TextBlock();
                txt.Text = "1";
                txt.FontSize = 20;
                txt.Width = 15;
                txt.Height = 20;
                txt.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt.VerticalAlignment = System.Windows.VerticalAlignment.Center;
     
                //Create a grid and add your ellipse and text to it
                Grid gr = new Grid();
                gr.Children.Add(myEllipse);
                gr.Children.Add(txt);
                
     
                //Finally, add the grid to the stack panel
                myStackPanel.Children.Add(gr);
                this.Content = myStackPanel;
    Wednesday, October 19, 2011 10:36 AM