View source for TclProImage

<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert">
function AddNewProImage(AComponent: TCLComponent; xName: string): TClProImage;	
</div>

<span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br>

<span style="color:blue"><b>xName</b></span> : The name of the defined image should be written.<br>


TclProImage is used to add an image to a form. Adding visuals to an application makes it more attractive and user-friendly.<br>
All of the TclImage features are available. Apart from this, border color, rounding borders, image stretching and fitting features are available. <br>

<div class="alert alert-info" role="alert" data-bs-theme="light">
Refer to the [[TclImage]] page for standard image usage.
</div>

<div class="table-responsive">
{| class="wikitable" style="border: 2px solid #c3d7e0"
! style="background-color: #c3d7e0"| Feature  !!style="background-color: #c3d7e0"| Use of !!style="background-color: #c3d7e0"| Definition 
|-
|TclProImage || ProImage1 : TclProImage; || A variable belonging to the TclProImage class is created.
|-
|AddNewProImage || ProImage1  = Form1.AddNewProImage(Form1,'ProImage1'); || A new image is added to the form.
|}
</div>

In addition to the features of a standard image, TclProImage offers new and advanced features, which we will explain in detail below.<br>

<div class="row">
	<div class="col-lg-6">
		<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
			<div style="font-size: 16px;font-weight: bold;text-align:left;">
				  clProSettings Properties
			</div>
			<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>BorderColor</li>
<li>BorderWidth</li>
<li>BackgroundColor</li>
<li>IsTransparent</li>
<li>IsFill</li>
<li>IsRound</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>PictureAutoFit</li>
<li>PictureStretch</li>
<li>PictureSource</li>
			</div>
		</div>
	</div>
	<div class="col-lg-6">
	<div  class="card d-flex flex-column justify-content-start gap-1 mb-3 h-100" style="padding: 3;">
		<div style="font-size: 16px;font-weight: bold;text-align:left;">
		SetupComponent Properties
		</div>
		<div style="font-size: 14px;font-weight: normal;text-align:justify; max-width: 350px;">
<li>Width</li>
<li>Height</li>
<li>PositionX</li>
<li>PositionY</li>
<li>Align</li>
<li>BackgroundColor</li>
<li>MarginTop</li>
<li>MarginBottom</li>
<li>MarginRight</li>
<li>MarginLeft</li>
<li>RoundHeight</li>
<li>RoundWidth</li>
<li>BorderColor</li>
<li>BorderWidth</li>
<li>ImgFit</li>
<li>ImgStretch</li>
<li>ImgUrl</li>
		</div>
	</div>
	</div>	
</div>
<br>

<div class="alert alert-warning" role="alert" data-bs-theme="light">
To learn the purpose and usage of the <b>SetupComponent</b> and <b>clProSettings</b> properties, please refer to [[Pro Object Properties| the page]].
</div>

<b>Example</b><br>

For clProSettings:<br>
<pre>
Var   
  Form1:TclForm;
  ProImg1: TClProImage;

void SetImage;
{
  ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
  ProImg1.Align = alCenter;
  ProImg1.Width = 150;
  ProImg1.Height = 150;
  ProImg1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#fabd2');
  ProImg1.clProSettings.RoundHeight = 10;
  ProImg1.clProSettings.RoundWidth = 10;
  ProImg1.clProSettings.BorderWidth = 2;
  ProImg1.clProSettings.IsFill = True; 
  ProImg1.clProSettings.IsRound = True;
  ProImg1.clProSettings.PictureSource = 'https://clomosy.com/demos/computerNetwork.png';
  ProImg1.clProSettings.PictureAutoFit = True;
  ProImg1.SetclProSettings(ProImg1.clProSettings);
}

{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}
</pre>

For SetupComponent:<br>
<pre>
Var   
  Form1:TclForm;
  ProImg1: TClProImage;

void SetImage;
{
  ProImg1 = Form1.AddNewProImage(Form1,'ProImg1');
  clComponent.SetupComponent(ProImg1,'{
  "Align" : "Center",
  "Width":150,
  "Height":150,
  "BorderColor":"#fabd2",
  "BorderWidth":2,
  "RoundHeight":10,
  "RoundWidth":10,		
  "ImgUrl":"https://clomosy.com/demos/computerNetwork.png",
  "ImgFit":"yes"
}');
}

{
  Form1 = TclForm.Create(Self);
  SetImage;
  Form1.Run;
}
</pre>

<b>Output:</b><br>
[[File:ProImage.png|frameless|450px]]<br>

<h2> See Also </h2>
* [[Components]]
* [[Pro Object Properties]]
* [[Object Properties]]