Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Add new shape to Shapes dashboard. (Read 8683 times)
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Add new shape to Shapes dashboard.
Mar 27th, 2017 at 10:25am
Print Post  
Hi,

I'm trying to add new shapes to shapes panel

in this [url=http://mindfusion.eu/Forum/YaBB.pl?num=1415023459/2#2]URL[/url] its mentioning how to add it, but I can't find the place to add this,

these are the dimensions I need to add

Value="M24.5,0 L25.5,0 C39.030975,2.6077032E-07 50,6.3799427 50,14.25 50,14.49594 49.989288,14.740423 49.968121,14.983303 L49.966301,15 50,15 50,45 40,45 40,25.736368 39.682743,25.870951 C37.431286,26.802197 34.897587,27.517639 32.17083,27.965405 L31.55818,28.058558 31.624964,28.186726 C32.183014,29.320271 32.5,30.619288 32.5,32 32.5,36.418278 29.254065,40 25.25,40 21.245935,40 18,36.418278 18,32 18,30.619288 18.316986,29.320271 18.875036,28.186726 L18.90699,28.125401 18.745115,28.104674 C15.668942,27.673962 12.818876,26.905669 10.317256,25.870951 L10,25.736368 10,45 0,45 0,15 0.033698976,15 0.031879544,14.983304 C0.010711937,14.740423 0,14.49594 0,14.25 0,6.3799427 10.969024,2.6077032E-07 24.5,0 z"
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #1 - Mar 27th, 2017 at 11:17am
Print Post  
Hi,

We support this (SVG path) syntax only in JavaScript version of the library. In WPF you could draw custom shapes interactively in Shape Designer sample project and save a shape-library xml file; then load the custom shapes in your application by calling ShapeLibrary.LoadFromXml. If you prefer declaring shapes from code, you could call Shape constructor with array of LineTemplate, ArcTemplate and BezierTemplate objects as argument.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #2 - Mar 27th, 2017 at 11:23am
Print Post  
Yes I'm trying to add this using code, what you said bit unclear, can you mention step by step how to add a custom shape to this shape panel? or refer me to a tutorial
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #3 - Mar 27th, 2017 at 12:51pm
Print Post  
See sample code at the end of this topic -
http://www.mindfusion.eu/onlinehelp/wpfdiagram/index.htm?T_MindFusion_Diagrammin...

Your shape string converted to that format looks like this -
Code
Select All
var myShape = new Shape(
	new ElementTemplate[]
	{
		new LineTemplate(49, 0, 51, 0),
		new BezierTemplate(51, 0, 78.06195, 5.2154064E-07, 100, 12.7598854, 100, 28.5),
		new BezierTemplate(100, 28.5, 100, 28.99188, 99.978576, 29.480846, 99.936242, 29.966606),
		new LineTemplate(99.936242, 29.966606, 99.932602, 30),
		new LineTemplate(99.932602, 30, 100, 30),
		new LineTemplate(99.932602, 30, 100, 90),
		new LineTemplate(99.932602, 30, 80, 90),
		new LineTemplate(99.932602, 30, 80, 51.472736),
		new LineTemplate(99.932602, 30, 79.365486, 51.741902),
		new BezierTemplate(99.932602, 30, 74.862572, 53.604394, 69.795174, 55.035278, 64.34166, 55.93081),
		new LineTemplate(64.34166, 55.93081, 63.11636, 56.117116),
		new LineTemplate(63.11636, 56.117116, 63.249928, 56.373452),
		new BezierTemplate(63.11636, 56.117116, 64.366028, 58.640542, 65, 61.238576, 65, 64),
		new BezierTemplate(65, 64, 65, 72.836556, 58.50813, 80, 50.5, 80),
		new BezierTemplate(50.5, 80, 42.49187, 80, 36, 72.836556, 36, 64),
		new BezierTemplate(36, 64, 36, 61.238576, 36.633972, 58.640542, 37.750072, 56.373452),
		new LineTemplate(37.750072, 56.373452, 37.81398, 56.250802),
		new LineTemplate(37.81398, 56.250802, 37.49023, 56.209348),
		new BezierTemplate(37.81398, 56.250802, 31.337884, 55.347924, 25.637752, 53.811338, 20.634512, 51.741902),
		new LineTemplate(20.634512, 51.741902, 20, 51.472736),
		new LineTemplate(20, 51.472736, 20, 90),
		new LineTemplate(20, 51.472736, 0, 90),
		new LineTemplate(20, 51.472736, 0, 30),
		new LineTemplate(20, 51.472736, 0.067397952, 30),
		new LineTemplate(20, 51.472736, 0.063759088, 29.966608),
		new BezierTemplate(20, 51.472736, 0.021423874, 29.480846, 0, 28.99188, 0, 28.5),
		new BezierTemplate(0, 28.5, 0, 12.7598854, 21.938048, 5.2154064E-07, 49, 0)
	},
	FillRule.Nonzero, "test"); 



If by shape panel you mean NodeListView instance, you can add the shape there like this -

Code
Select All
nodeListView.Items.Add(
	new ShapeNode
		{
			Bounds = new Rect(0, 0, 50, 50),
			Shape = myShape
		}); 



FYI I've converted your shape string to Shape constructor's format using this method -

Code
Select All
Shape FromPathString(string path, string id, double scale)
{
	var elements = new List<ElementTemplate>();
	path = path.ToLower();
	var parts = Regex.Matches(path, @"[mlcz]|[^mlcz]+")
		 .Cast<Match>()
		 .Select(m => m.Value)
		 .ToArray();
	var lastPoint = new Point();
	List<Point> points;
	for (int c = 0; c < parts.Length; c+=2)
	{
		var command = parts[c];
		switch (command)
		{
			case "m":
				lastPoint = ParsePoints(parts[c + 1], scale)[0];
				break;
			case "l":
				points = ParsePoints(parts[c + 1], scale);
				for (int p = 0; p < points.Count; p++)
				{
					elements.Add(new LineTemplate(
				       	lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
					Debug.WriteLine(
						string.Format(
							"new LineTemplate({0}, {1}, {2}, {3}),",
							lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
					lastPoint = points[0];
				}
				break;
			case "c":
				points = ParsePoints(parts[c + 1], scale);
				for (int p = 0; p < points.Count; p += 3)
				{
					elements.Add(new BezierTemplate(
		             	lastPoint.X, lastPoint.Y,
						points[p + 0].X, points[p + 0].Y,
						points[p + 1].X, points[p + 1].Y,
						points[p + 2].X, points[p + 2].Y));
					Debug.WriteLine(
						string.Format(
							"new BezierTemplate({0}, {1}, {2}, {3}, {4}, {5}, {6}, {7}),",
							lastPoint.X, lastPoint.Y,
							points[p + 0].X, points[p + 0].Y,
							points[p + 1].X, points[p + 1].Y,
							points[p + 2].X, points[p + 2].Y));

					lastPoint = points[p + 2];
				}
				break;
		}
	}
	return new Shape(elements.ToArray(), FillRule.Nonzero, id);
}

List<Point> ParsePoints(string coords, double scale)
{
	coords = coords.Trim();
	var points = new List<Point>();
	var pointStrings = coords.Split(new [] { ' ' });
	foreach (var pointString in pointStrings)
	{
		var cs = pointString.Split(new[] { ',' });
		points.Add(
			new Point(
				scale * double.Parse(cs[0]),
				scale * double.Parse(cs[1])));
	}
	return points;
} 



You could as well call it directly with the string for shorter syntax, especially if you have more strings like that -
Code
Select All
var myShape =
	FromPathString(
		"M24.5,0 L25.5,0 C39.030975,2.6077032E-07 50,6.3799427 50,14.25 50,14.49594 49.989288,14.740423 49.968121,14.983303 L49.966301,15 50,15 50,45 40,45 40,25.736368 39.682743,25.870951 C37.431286,26.802197 34.897587,27.517639 32.17083,27.965405 L31.55818,28.058558 31.624964,28.186726 C32.183014,29.320271 32.5,30.619288 32.5,32 32.5,36.418278 29.254065,40 25.25,40 21.245935,40 18,36.418278 18,32 18,30.619288 18.316986,29.320271 18.875036,28.186726 L18.90699,28.125401 18.745115,28.104674 C15.668942,27.673962 12.818876,26.905669 10.317256,25.870951 L10,25.736368 10,45 0,45 0,15 0.033698976,15 0.031879544,14.983304 C0.010711937,14.740423 0,14.49594 0,14.25 0,6.3799427 10.969024,2.6077032E-07 24.5,0 z",
		"test", 2); 



I scaled coordinates by 2 because Shape constructor expects them as percentage.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #4 - Mar 28th, 2017 at 4:01am
Print Post  
thanks it helps lot.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #5 - May 14th, 2017 at 4:30am
Print Post  
so again I tried to add following shape

Value = "M0.5,123.775001525879L182.258003234863,123.775001525879 182.258003234863,184.843994140625 0.5,184.843994140625z M92.671501159668,0.5C130.455291748047,0.5,161.30867767334,17.495044708252,163.20
011138916,38.8665504455566L163.228340148926,39.2919998168945 163.291999816895,39.2919998168945 163.291999816895,40.947998046875 163.291999816895,117.775001525879 135.671005249023,117.775001525879 135.671005249023,73.0245819091797 134.924873352051,73.3604125976563C126.087989807129,77.1455535888672,115.65161895
752,79.7730026245117,104.301208496094,80.8501510620117L102.235954284668,81.02134
70458984 102.309646606445,81.1426467895508C103.266494750977,82.9040374755859 103.810005187988,84.9225463867188 103.810005187988,87.068000793457 103.810005187988,93.9334487915039 98.2444534301758,99.4990005493164 91.3790054321289,99.4990005493164 84.5135498046875,99.4990005493164 78.9480018615723,93.9334487915039 78.9480018615723,87.068000793457 78.9480018615723,84.9225463867188 79.491512298584,82.9040374755859 80.448356628418,81.1426467895508L80.6514091491699,80.8084106445313 78.2236289978027,80.5487976074219C67.9630966186523,79.3270568847656,58.518608093
2617,76.8301315307617,50.4181308746338,73.3604125976563L49.672004699707,73.02458
19091797 49.672004699707,117.775001525879 22.0510017871857,117.775001525879 22.0510017871857,40.947998046875 22.0510017871857,39.2919998168945 22.1146675944328,39.2919998168945 22.1428924202919,38.8665504455566C24.0343313217163,17.495044708252,54.8877105712
891,0.5,92.671501159668,0.5z"

then I'm getting following error in this "FromPathString" method "elements.Add(new BezierTemplate(" line


Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #6 - May 15th, 2017 at 1:34pm
Print Post  
You must specify coordinates for three points after C command, in form of x1,y1 x2,y2 x,y - note the spaces too. For example your last C is not like that. If you need to support a different format, you can adjust the parsing code in ParsePoints and FromPathString functions.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #7 - May 15th, 2017 at 5:09pm
Print Post  
where should I change in following method to make above style correctly

Code
Select All
        Shape FromPathString(string path, string id, double scale)
        {
            var elements = new List<ElementTemplate>();
            path = path.ToLower();
            var parts = Regex.Matches(path, @"[mlcz]|[^mlcz]+")
                 .Cast<Match>()
                 .Select(m => m.Value)
                 .ToArray();
            var lastPoint = new Point();
            List<Point> points;
            for (int c = 0; c < parts.Length; c += 2)
            {
                var command = parts[c];
                switch (command)
                {
                    case "m":
                        lastPoint = ParsePoints(parts[c + 1], scale)[0];
                        break;
                    case "l":
                        points = ParsePoints(parts[c + 1], scale);
                        for (int p = 0; p < points.Count; p++)
                        {
                            elements.Add(new LineTemplate(
                                   lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
                            Debug.WriteLine(
                                string.Format(
                                    "new LineTemplate({0}, {1}, {2}, {3}),",
                                    lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
                            lastPoint = points[0];
                        }
                        break;
                    case "c":
                        points = ParsePoints(parts[c + 1], scale);
                        for (int p = 0; p < points.Count; p += 3)
                        {
                            elements.Add(new BezierTemplate(
                                 lastPoint.X, lastPoint.Y,
                                points[p + 0].X, points[p + 0].Y,
                                points[p + 1].X, points[p + 1].Y,
                                points[p + 2].X, points[p + 2].Y));
                            Debug.WriteLine(
                                string.Format(
                                    "new BezierTemplate({0}, {1}, {2}, {3}, {4}, {5}, {6}, {7}),",
                                    lastPoint.X, lastPoint.Y,
                                    points[p + 0].X, points[p + 0].Y,
                                    points[p + 1].X, points[p + 1].Y,
                                    points[p + 2].X, points[p + 2].Y));

                            lastPoint = points[p + 2];
                        }
                        break;
                }
            }
            return new MindFusion.Diagramming.Wpf.Shape(elements.ToArray(), FillRule.Nonzero, id);
        } 



  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #8 - May 16th, 2017 at 5:31pm
Print Post  
please can you help with this one also, I thought this `FromPathString` method can use for any shape
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #9 - May 17th, 2017 at 8:26am
Print Post  
FromPathString only supports lines and Bezier curves, using m,l,c SVG path commands. I'm not sure if the paths you are posting come from SVG editor or Xaml editor, in either case I cannot write full parser for you, and Shape elements for ShapeNodes only support lines, arcs and Beziers in any case.

If you need to display SVG, check this library and try adding SvgViewbox to ShapeNode template -
http://sharpvectors.codeplex.com/

If that's Xaml path string, you should be able to show it using Path objects in ShapeNode template.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #10 - May 21st, 2017 at 1:54pm
Print Post  
this is the shape I'm going to add here,




I designed this shape using "Blend for Visual Studio 2015" then I exact that Data tag value from it,

I actually don't have idea to how to build a "FromPathString" method for this new shape,

can you guide how can I insert this new shape to NodeListView like previous one.


-------------------------------------------

As you guided this is how I added previous shape to this list

Step 1 - implemented common FromPathString Method that can pass any dimension string to design new shape

Code
Select All
Shape FromPathString(string path, string id, double scale)
        {
            var elements = new List<ElementTemplate>();
            path = path.ToLower();
            var parts = Regex.Matches(path, @"[mlcz]|[^mlcz]+")
                 .Cast<Match>()
                 .Select(m => m.Value)
                 .ToArray();
            var lastPoint = new Point();
            List<Point> points;
            for (int c = 0; c < parts.Length; c += 2)
            {
                var command = parts[c];
                switch (command)
                {
                    case "m":
                        lastPoint = ParsePoints(parts[c + 1], scale)[0];
                        break;
                    case "l":
                        points = ParsePoints(parts[c + 1], scale);
                        for (int p = 0; p < points.Count; p++)
                        {
                            elements.Add(new LineTemplate(
                                   lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
                            Debug.WriteLine(
                                string.Format(
                                    "new LineTemplate({0}, {1}, {2}, {3}),",
                                    lastPoint.X, lastPoint.Y, points[p].X, points[p].Y));
                            lastPoint = points[0];
                        }
                        break;
                    case "c":
                        points = ParsePoints(parts[c + 1], scale);
                        for (int p = 0; p < points.Count; p += 3)
                        {
                            elements.Add(new BezierTemplate(
                                 lastPoint.X, lastPoint.Y,
                                points[p + 0].X, points[p + 0].Y,
                                points[p + 1].X, points[p + 1].Y,
                                points[p + 2].X, points[p + 2].Y));
                            Debug.WriteLine(
                                string.Format(
                                    "new BezierTemplate({0}, {1}, {2}, {3}, {4}, {5}, {6}, {7}),",
                                    lastPoint.X, lastPoint.Y,
                                    points[p + 0].X, points[p + 0].Y,
                                    points[p + 1].X, points[p + 1].Y,
                                    points[p + 2].X, points[p + 2].Y));

                            lastPoint = points[p + 2];
                        }
                        break;
                }
            }
            return new MindFusion.Diagramming.Wpf.Shape(elements.ToArray(), FillRule.Nonzero, id);
        } 



Step 2 - passed parameters to FromPathString Method like below

Code
Select All
var myShape =
	FromPathString(
		"M24.5,0 L25.5,0 C39.030975,2.6077032E-07 50,6.3799427 50,14.25 50,14.49594 49.989288,14.740423 49.968121,14.983303 L49.966301,15 50,15 50,45 40,45 40,25.736368 39.682743,25.870951 C37.431286,26.802197 34.897587,27.517639 32.17083,27.965405 L31.55818,28.058558 31.624964,28.186726 C32.183014,29.320271 32.5,30.619288 32.5,32 32.5,36.418278 29.254065,40 25.25,40 21.245935,40 18,36.418278 18,32 18,30.619288 18.316986,29.320271 18.875036,28.186726 L18.90699,28.125401 18.745115,28.104674 C15.668942,27.673962 12.818876,26.905669 10.317256,25.870951 L10,25.736368 10,45 0,45 0,15 0.033698976,15 0.031879544,14.983304 C0.010711937,14.740423 0,14.49594 0,14.25 0,6.3799427 10.969024,2.6077032E-07 24.5,0 z",
		"test", 2);  



Step 3 - added to shapelist like this

Code
Select All
 shapeList.Items.Add(new ShapeNode { Bounds = new Rect(0, 0, 50, 50), Shape = userShape, EnabledHandles = AdjustmentHandles.All & ~AdjustmentHandles.ResizeHandles, TextAlignment = TextAlignment.Center }); 




why I can't follow same steps to add new shape to this , is that means for each new design I need to implement new "FromPathString" method ?

please advise Sad
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #11 - May 23rd, 2017 at 4:14am
Print Post  
You could show arbitrary paths in ShapeNodes by adding a Path to their template, e.g. -

Code
Select All
<Style TargetType="{x:Type diag:ShapeNode}">
	<Setter Property="Template">
		<Setter.Value>
			<DataTemplate DataType="{x:Type diag:ShapeNode}">
				<Grid>
					<Viewbox>
						<Path Fill="Black" Data="M24.5,0 L25.5,0 C39.030975,2.6077032E-07 50,6.3799427 50,14.25 50,14.49594 49.989288,14.740423 49.968121,14.983303 L49.966301,15 50,15 50,45 40,45 40,25.736368 39.682743,25.870951 C37.431286,26.802197 34.897587,27.517639 32.17083,27.965405 L31.55818,28.058558 31.624964,28.186726 C32.183014,29.320271 32.5,30.619288 32.5,32 32.5,36.418278 29.254065,40 25.25,40 21.245935,40 18,36.418278 18,32 18,30.619288 18.316986,29.320271 18.875036,28.186726 L18.90699,28.125401 18.745115,28.104674 C15.668942,27.673962 12.818876,26.905669 10.317256,25.870951 L10,25.736368 10,45 0,45 0,15 0.033698976,15 0.031879544,14.983304 C0.010711937,14.740423 0,14.49594 0,14.25 0,6.3799427 10.969024,2.6077032E-07 24.5,0 z" />
					</Viewbox>
					<diag:NodeRenderer Node="{Binding}" />
				</Grid>
			</DataTemplate>
		</Setter.Value>
	</Setter>
	<Setter Property="Brush" Value="Transparent" />
	<Setter Property="Stroke" Value="Transparent" />
</Style> 



NodeRenderer above will draw other parts of the node like Text and Image. The style sets transparent brush so standard node shape does not hide your path.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #12 - May 23rd, 2017 at 2:26pm
Print Post  
Actually I want to add this new shape from server side code, not as XML style. like I show in my steps.  is this possible to do with above new style ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3148
Joined: Oct 19th, 2005
Re: Add new shape to Shapes dashboard.
Reply #13 - May 23rd, 2017 at 3:57pm
Print Post  
You can bind the Path data string in Xaml to some property of the node, e.g. either your own property in derived node type, or something stored in Tag/Id objects as we already discussed few weeks ago. Then you will be able to set different path strings from code-behind.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: Add new shape to Shapes dashboard.
Reply #14 - May 30th, 2017 at 4:43am
Print Post  
As you mentioned on previous comments

Quote:
You must specify coordinates for three points after C command, in form of x1,y1 x2,y2 x,y - note the spaces too. For example your last C is not like that. If you need to support a different format, you can adjust the parsing code in ParsePoints and FromPathString functions.


I changed the style as following




Code
Select All
M0,169.56101 L187.013,169.56101 187.013,200.297 0,200.297 z M93.507006,0 C130.93768,0 161.39197,13.794174 162.33452,30.975342 L162.35646,31.776001 162.357,31.776001 162.357,31.795456 162.35701,31.796005 162.357,31.796631 162.357,160.01901 136.078,160.01901 136.078,56.783562 134.03528,57.50235 C126.23219,60.130592 117.18699,62.019501 107.38268,62.946022 L104.26853,63.20285 104.30909,63.361908 C104.46311,64.12085 104.544,64.906647 104.544,65.711502 104.544,72.150314 99.367296,77.370003 92.981501,77.370003 86.595713,77.370003 81.419001,72.150314 81.419001,65.711502 81.419001,64.906647 81.499887,64.12085 81.65391,63.361908 L81.71612,63.117958 79.631327,62.946022 C69.827021,62.019501 60.781816,60.130592 52.978731,57.50235 L50.936003,56.783562 50.936003,158.95901 24.657003,158.95901 24.657003,31.796127 24.657003,30.716003 24.700823,30.716003 24.746588,30.15979 C26.590607,13.359741 56.670473,0 93.507006,0 z 



then I got above Value String,once I apply that like previous steps, its not oping any exception error.
but in design I'm getting design like this no the exact design



how to shape above one properly.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint