Question

All i am trying to do create rectangles with radial corners and content within them. Content can be any image, textual data or multimedia something like http://www.spicynodes.org/. so

• How do I create that rectangle ( can i have xaml markup)

• Can i have arrows from one rectangle to another if so how?

the nearest I got to was below but unable to add text data

<Grid Name="containerPanel" Width="800" Height="500" Background="AntiqueWhite" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Rectangle Name="centerNode" Width="300" Height="150" RadiusX="12" RadiusY="12" VerticalAlignment="Center">
        <Rectangle.Effect>
            <DropShadowEffect ShadowDepth="3" BlurRadius="2" Color="Black"></DropShadowEffect>
        </Rectangle.Effect>
        <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Gray" Offset="0.1"></GradientStop>
                <GradientStop Color="Beige" Offset="0.2"></GradientStop>
            </LinearGradientBrush>
        </Rectangle.Stroke>
        <Rectangle.StrokeThickness>
            2
        </Rectangle.StrokeThickness>
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                <GradientStop Color="AliceBlue" Offset="0.4" />
                <GradientStop Color="White" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

Answer 1

Instead of using a Rectangle, you might want to use a container control. Assuming the content of your will consist of one element (i.e.: Either an image, either a textblock, either a ….), the first thing that comes to mind would be to use a Border, which will accept exactly one child element as its content:

<Border Width="300" Height="200" BorderBrush="Green" BorderThickness="5" CornerRadius="10">
    <Border.Effect>
        <DropShadowEffect ShadowDepth="5"/>
    </Border.Effect>
    <TextBlock Text="Inside the bounding box" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>

As for the arrows going from one box to another:
Of course it’s possible, but you will have to “connect” them manually. There’s no out-of-the-box “connect and draw an arrow between these two elements” functionality.