تخصيص مظهر التحكمات Silverlight & Wpf

إحدى أكثر الميزات قوة في SLiverlight و WPF هي الإمكانية الكاملة لتخصيص مظهر التحكمات التي نستخدمها مما يمكن المطورون والمصممون لنحت واجهة التحكمات بالشكل الذي يريدونه مما يوفر لهم مرونة كبيرة لتحقيق الواجهة التي يرغبون بها حيث سنقوم باستعراض هذه الامكانية في مقالتنا هذه حول تحكم الزر Button من أجل استعراض بعض ما يمكننا فعله مع أن كثيرا من التحكمات الأخرى يمكن أن يتم تعديل مظهرها بطريقة مشابهة لما سنقوم به هنا

لنفرض أنه لدينا في أحد التطبيقات زر تم تعريفه في قسم XAML كما يلي

<Button x:Name="btnTest" Content="Push ME!" Width="100" Height="50" 
		Click="btnTest_Click">


</Button>

أحد الأشياء التي تفيدنا هو أن الخاصية Contenet لا يجب أن تكون نصية دوما بل يمكنها أن تكون أية سلسلة من الأشكال والتحكمات التي نرغب باستخدامها فقد نرغب بجعلها تتضمن StackPanel يتضمن Image و TextBlock بداخله كما في المثال

<Button x:Name="btnTest" Width="200" Height="100" 
		Click="btnTest_Click">
	<Button.Content>
		<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
					VerticalAlignment="Center">
			<Image Source="Samer.jpg" Height="75"></Image>
			<TextBlock Text="Samer" FontSize="20" VerticalAlignment="Center" 
					   Margin="15,10,10,10" ></TextBlock>
		</StackPanel>
	</Button.Content>

</Button>

أو يمكننا استخدام تحكمات الأشكال لرسم الأشكال الخاصة بنا مثل تحكم Ellipse مثلا كما في الكود

<Button x:Name="btnTest" Width="200" Height="100" 
		Click="btnTest_Click">
	<Button.Content>
		<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
					VerticalAlignment="Center">
			<Ellipse Margin="10" Width="50" Height="50">
				<Ellipse.Fill>
					<RadialGradientBrush GradientOrigin="0.2,0.2">
						<GradientStop Offset="0.2" Color="White" />
						<GradientStop Offset="1" Color="Blue" />
					</RadialGradientBrush>
				</Ellipse.Fill>
			</Ellipse>
			<TextBlock Text="Samer" FontSize="20" VerticalAlignment="Center" 
					   Margin="15,10,10,10" ></TextBlock>
		</StackPanel>
	</Button.Content>

</Button>

كما يمكننا تضمين تحكمات مثل Calendar Controls ضمن الزر حيث يمكن للمستخدم التنقل ضمن تحكم التقويم وتحديد التاريخ الذي يرغب به ثم القيام بضغط الزر الذي يحتويه كما في الكود

<Button x:Name="btnTest" Width="400" Height="200" 
		Click="btnTest_Click">
	<Button.Content>
		<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" 
					VerticalAlignment="Center">
			<basics:Calendar></basics:Calendar>
			<TextBlock Text="Samer" FontSize="20" VerticalAlignment="Center" 
					   Margin="15,10,10,10" ></TextBlock>
		</StackPanel>
	</Button.Content>

</Button>

كما تمكننا الامكانيات البرمجية في Silverlight و wpf من القيام بأشياء أكثر من مجرد تعديل المحتويات الداخلية للتحكم حيث لدينا الإمكانية هنا لاستبدال كامل مظهر التحكم بأي شئ نرغبه بدون أن نؤثر على التصرف الطبيعي للتحكم فعلى سبيل المثال نريد من أزار برنامجنا أن تأخذ شكلا مستديرا عوضا عن الشكل المستطيل التقليدي فهنا يمكننا عمل ذلك بإنشاء Style يدعى RoundButton سنستخدمه لنتجاوز الخاصية Template للأزار وتقديم Template أخرى تستبدل الشكل المستطيل التقليدي بتحكم Ellipse يحتوي بداخله TextBlock

في مشروع Sliverlight لديك افتح الملف App.xaml وأضف الكود التالي الذي ينشئ الشكل الذي نريد استخدامه مع الأزار لدينا وذلك ضمن القسم <Application.Resources> ثم اعمل Build للمشروع

<Style x:Key="RoundButton" TargetType="Button">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="Button">
				 <Grid>
					<Ellipse Width="200" Height="200">						   
						<Ellipse.Fill>
							<RadialGradientBrush GradientOrigin=".2,.2">
								<GradientStop Offset=".2" Color="White"/>
								<GradientStop Offset="1" Color="Blue" />
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
					<TextBlock Text="Push Me!"
							   FontSize="28"
							   HorizontalAlignment="Center" 
							   VerticalAlignment="Center" />
				 </Grid>  
			</ControlTemplate>
		</Setter.Value>
	</Setter>
 </Style>

الآن أضف الخاصية Style للزر الذي نرغب بتغيير شكله وذلك بالقيمة {StaticResource RoundButton} كما في المثال

<Button Width="200" Height="200" Style="{StaticResource RoundButton}">

</Button>

نلاحظ هنا أن النص المعروض في الزر دوما هو Push Me! وللتغلب على هذه المشكلة وجعل كل زر يعرض النص الذي نرغب به نستخدم الخاصية TemplateBinding لربط خصائص التحكم مع الشكل الذي قمنا بإنشائه حيث سنقوم بتعديل الشكل السابق كما يلي

<Style x:Key="RoundButton" TargetType="Button">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="Button">
			  <Grid>
					<Ellipse Width="{TemplateBinding Width}" 
							 Height="{TemplateBinding Height}">
						<Ellipse.Fill>
							<RadialGradientBrush GradientOrigin=".2,.2">
								<GradientStop Offset=".2" Color="White"/>
								<GradientStop Offset="1" Color="Blue" />
							</RadialGradientBrush>
						</Ellipse.Fill>
					</Ellipse>
					<ContentPresenter  Content="{TemplateBinding Content}"
									   HorizontalAlignment="Center" 
									   VerticalAlignment="Center" />
				</Grid>  
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

اعمل build للمشروع بعد تعديل الشكل ثم قم بضبط الخصائص المرغوبة من تحكم الزر كما في الكود

<Button Width="200" Height="200" Content="Hello VB"
		Style="{StaticResource RoundButton}" FontSize="15">

</Button>

يمكنك الملاحظة من الكود السابق للشكل أننا قمنا باستبدال TextBlock بـ ContenetPresenter وذلك من أجل أن نتمكن من عرض أي شكل نريده داخل الزر وليس النصوص فقط وإن أردنا المزيد من التحكم بمظهر الزر يمكننا أن نطوره ليعالج حالات الزر المختلفة مثل hover أو focus أو Pushed مما يمكننا من تشكيل الأشكل التي نريدها تماما

تخصيص مظهر التحكمات Silverlight & Wpf

مواضيع مشابهة