إنشاء ساعة تماثلية باستخدام تقنية Silverlight باستخدام الكود فقط

#129 مارس 2009 في 20:56 صاحب الموضوع

لكي نستطيع العمل سنحتاج إلى Mic rosoft Silver Light Tools For Visual Studio 2008 والذي يمكن تحميله من الرابط http://go.microsoft.com/fwlink/?LinkId=94863

افتح فيجول ستوديو ومن قائمة File اختر New Project ثم اختر لغة البرمجة Visual Basic ثم اختر Silverlight ثم أنشئ SilverLight Application جديد وقم بتسميته SilverLightClock ومن صندوق الحوار الذي يظهر لنا اختر الآن Automatically Generate a test page to host silverlight at build time ثم اضغط ok

اجعل الكود في قسم xaml مماثلا للكود التالي وذلك لنقوم برسم دائرة رمادية تشكل ظل الساعة حيث استخدمنا Ellips لرسم دائرة وملئها بلون معين

<UserControl x:Class="SilverlightClock.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot">

		<!-- Shadow Ellipse -->
		<Ellipse Margin="165,67,145,83" Fill="#FF000000" Width="330" 
		 Height="330" Opacity="0.3"/>
	</Grid>
</UserControl>

أضف الكود التالي في قسم xaml وقبل </Grid> مباشرة وذلك من أجل رسم الإطار الخارجي للساعة حيث استخدمنا LinearGradientBrush من أجل رسم التدرج اللوني للإطار

<!-- Outer Rim -->
<Ellipse Height="330" Margin="156,58,154,92" Width="330" Stroke="#FF000000">
	<Ellipse.Fill>
		<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
			<GradientStop Color="#FFE4E5F4"/>
			<GradientStop Color="#FFC0C0C0" Offset="0.254"/>
		</LinearGradientBrush>
	</Ellipse.Fill>
</Ellipse>

أضف الكود التالي بعد الكود السابق في قسم xaml وذلك من أجل رسم حواف إطار الساعة حيث تمت عملية الرسم بنفس الطريقة السابقة

<!-- Bevel -->
<Ellipse Height="290" Margin="156,58,154,92" Width="290" Stroke="#FF000000">
	<Ellipse.Fill>
		<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
			<GradientStop Color="#FF2F2F32"/>
			<GradientStop Color="#FFE4E5F4" Offset="0.987"/>
		</LinearGradientBrush>
   </Ellipse.Fill>
</Ellipse>

سنستخدم Ellipse مرة أخرى من أجل رسم وجه الساعة – أدخل الكود التالي بعد الكود السابق في قسم xaml

<!-- Clock Face -->
<Ellipse Height="270" Margin="176,78,174,112" Width="270" 
		 Stroke="#FF000000" Fill="#FF000000"/>

أدخل الكود التالي في قسم xaml بعد الكود السابق حيث سنستخدم بعضا من أدوات الرسم من أجل عملية رسم العقارب ودائرة المنتصف الخاصة بالساعة

<!-- Central Clock Circle -->
<Ellipse Margin="306,208,304,0" VerticalAlignment="Top" Fill="#FF000000" 
		 Stroke="#FF008000" StrokeThickness="8" Height="30"/>

<!-- Second Hand -->
<Rectangle Height="80" Margin="318.25,117.75,316.75,0" VerticalAlignment="Top" 
		   Fill="#FFFF0000" Stroke="#FF000000" Width="5"	
		   RenderTransformOrigin="0.5,1.312" >
	<Rectangle.RenderTransform>
		<RotateTransform x:Name="secondHandTransform"/>
	</Rectangle.RenderTransform>
</Rectangle>

 <!-- Minute Hand -->
<Rectangle x:Name="minuteHand" Height="80" Margin="316.75,117.75,315.25,0" 
		   VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="8" 
		   RenderTransformOrigin="0.5,1.312" >
	<Rectangle.RenderTransform>
		<RotateTransform x:Name="minuteHandTransform"/>
	</Rectangle.RenderTransform>
</Rectangle>

<!-- Hour Hand -->
<Rectangle x:Name="hourHand" Height="59" Margin="315.75,138.75,314.25,0" 
		   VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="10" 
		   RenderTransformOrigin="0.525,1.428">
	<Rectangle.RenderTransform>
		<RotateTransform x:Name="hourHandTransform"/>
	</Rectangle.RenderTransform>
</Rectangle>

سنضيف الآن حركة الساعة

في قسم xaml بعد تعريف UserControl وقبل <Grid x:Name="LayoutRoot"> أدخل الكود التالي الذي سيقوم بتكوين الحركة الظاهرة للساعة

<UserControl.Resources>
	<Storyboard x:Name="clockStoryboard">

		<!-- This animation targets the hour hand transform -->
		<DoubleAnimation x:Name="hourAnimation"
	 Storyboard.TargetName="hourHandTransform"
	 Storyboard.TargetProperty="Angle"
	 Duration="12:0:0" RepeatBehavior="Forever" To="360" />

		<!-- This animation targets the minute hand transform -->
		<DoubleAnimation x:Name="minuteAnimation"
	 Storyboard.TargetName="minuteHandTransform" 
	 Storyboard.TargetProperty="Angle"
	 Duration="1:0:0" RepeatBehavior="Forever" To="360" />

		<!-- This animation targets the second hand transform  -->
		<DoubleAnimation x:Name="secondAnimation"
	 Storyboard.TargetName="secondHandTransform" 
	 Storyboard.TargetProperty="Angle"
	 Duration="0:1:0" RepeatBehavior="Forever" To="360" />
	</Storyboard>
</UserControl.Resources>

فالكود يحدد StoryBoard يحتوي على الرسوم المتحركة التي ستظهر حركة الساعة ولبدء تنفيذه سنستخدم الحدث Loaded لاستدعاء الدالة Begin لـ StoryBoard وسنضيف هذا الحدث لتعريف grid بحيث يصبح كما يلي

<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">

وبذلك يكون كود xaml الكامل

<UserControl x:Class="SilverLightClock.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
	Width="640" Height="480">

	<UserControl.Resources>
		<Storyboard x:Name="clockStoryboard">

			<!-- This animation targets the hour hand transform -->
			<DoubleAnimation x:Name="hourAnimation"
		 Storyboard.TargetName="hourHandTransform"
		 Storyboard.TargetProperty="Angle"
		 Duration="12:0:0" RepeatBehavior="Forever" To="360" />

			<!-- This animation targets the minute hand transform -->
			<DoubleAnimation x:Name="minuteAnimation"
		 Storyboard.TargetName="minuteHandTransform" 
		 Storyboard.TargetProperty="Angle"
		 Duration="1:0:0" RepeatBehavior="Forever" To="360" />

			<!-- This animation targets the second hand transform  -->
			<DoubleAnimation x:Name="secondAnimation"
		 Storyboard.TargetName="secondHandTransform" 
		 Storyboard.TargetProperty="Angle"
		 Duration="0:1:0" RepeatBehavior="Forever" To="360" />
		</Storyboard>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock">

		<!-- Shadow Ellipse -->
		<Ellipse Margin="165,67,145,83" Fill="#FF000000" Width="330" 
		 Height="330" Opacity="0.3"/>

		<!-- Outer Rim -->
		<Ellipse Height="330" Margin="156,58,154,92" Width="330" Stroke="#FF000000">
			<Ellipse.Fill>
				<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
					<GradientStop Color="#FFE4E5F4"/>
					<GradientStop Color="#FFC0C0C0" Offset="0.254"/>
				</LinearGradientBrush>
			</Ellipse.Fill>
		</Ellipse>

		<!-- Bevel -->
		<Ellipse Height="290" Margin="156,58,154,92" Width="290" Stroke="#FF000000">
			<Ellipse.Fill>
				<LinearGradientBrush EndPoint="0.84,0.87" StartPoint="0.164,0.129">
					<GradientStop Color="#FF2F2F32"/>
					<GradientStop Color="#FFE4E5F4" Offset="0.987"/>
				</LinearGradientBrush>
			</Ellipse.Fill>
		</Ellipse>


		<!-- Clock Face -->
		<Ellipse Height="270" Margin="176,78,174,112" Width="270" 
				 Stroke="#FF000000" Fill="#FF000000"/>


		<!-- Central Clock Circle -->
		<Ellipse Margin="306,208,304,0" VerticalAlignment="Top" Fill="#FF000000" 
				 Stroke="#FF008000" StrokeThickness="8" Height="30"/>

		<!-- Second Hand -->
		<Rectangle Height="80" Margin="318.25,117.75,316.75,0" VerticalAlignment="Top" 
				   Fill="#FFFF0000" Stroke="#FF000000" Width="5" 
				   RenderTransformOrigin="0.5,1.312" >
			<Rectangle.RenderTransform>
				<RotateTransform x:Name="secondHandTransform"/>
			</Rectangle.RenderTransform>
		</Rectangle>

		<!-- Minute Hand -->
		<Rectangle x:Name="minuteHand" Height="80" Margin="316.75,117.75,315.25,0" 
				   VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="8" 
				   RenderTransformOrigin="0.5,1.312" >
			<Rectangle.RenderTransform>
				<RotateTransform x:Name="minuteHandTransform"/>
			</Rectangle.RenderTransform>
		</Rectangle>

		<!-- Hour Hand -->
		<Rectangle x:Name="hourHand" Height="59" Margin="315.75,138.75,314.25,0" 
				   VerticalAlignment="Top" Fill="#FF008000" Stroke="#FF008000" Width="10" 
				   RenderTransformOrigin="0.525,1.428">
			<Rectangle.RenderTransform>
				<RotateTransform x:Name="hourHandTransform"/>
			</Rectangle.RenderTransform>
		</Rectangle>




	</Grid>
</UserControl>

من Solution Exploere وسع عقدة Page.xaml ثم افتح الملف Page.xaml.vb وأدخل فيه الكود التالي من أجل بدء عملية التحريك

	Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)

		' Start the storyboard.
		clockStoryboard.Begin()
	End Sub

الآن ومع أن الساعة أصبحت تعمل بالشكل المطلوب إلا أنها لاتظهر الوقت الصحيح الأن استبدل الكود السابق بالكود التالي

Private Sub SetAndStartClock(ByVal sender As Object, ByVal e As EventArgs)

	' The current date and time.
	Dim currentDate As Date = DateTime.Now

	' Find the appropriate angle (in degrees) for the hour hand
	' based on the current time.
	Dim hourangle As Double = (((CType(currentDate.Hour, Single) / 12) * 360) + _ 
							  (currentDate.Minute / 2))

	' The same as for the minute angle.
	Dim minangle As Double = ((CType(currentDate.Minute, Single) / 60) * 360)

	' The same for the second angle.
	Dim secangle As Double = ((CType(currentDate.Second, Single) / 60) * 360)

	' Set the beginning of the animation (From property) to the angle 
	' corresponging to the current time.
	hourAnimation.From = hourangle

	' Set the end of the animation (To property)to the angle 
	' corresponding to the current time PLUS 360 degrees. Thus, the
	' animation will end after the clock hand moves around the clock 
	' once. Note: The RepeatBehavior property of the animation is set
	' to "Forever" so the animation will begin again as soon as it completes.
	hourAnimation.To = (hourangle + 360)

	' Same as with the hour animation.
	minuteAnimation.From = minangle
	minuteAnimation.To = (minangle + 360)

	' Same as with the hour animation.
	secondAnimation.From = secangle
	secondAnimation.To = (secangle + 360)

	' Start the storyboard.
	clockStoryboard.Begin()

End Sub

احفظ المشروع واعمل Build ثم جربه يجب أن تعمل الساعة الآن بشكل صحيح

عن عائشة رضي الله عنها أن النبي صلى الله عليه وسلم قال: إن الله يحب إذا عمل أحدكم عملا أن يتقنه

نعيب زماننا والعيب فينا ... وما لزماننا عيب سوانا

ونهجو ذا الزمان بغير ذنب ... ولو نطق الزمان لنا هجانا

محمد سامر أبو سلو

#230 مارس 2009 في 11:36

وهذا هو الكود الخاص بالثال لمن يستخدمون #C بما أن كود xaml يبقى نفسه في الحالتين

الكود الأول

   private void SetAndStartClock(object sender, EventArgs e)
		{
			// Start the storyboard.
			clockStoryboard.Begin();
		}

الكود الثاني

	 private void SetAndStartClock(object sender, EventArgs e)
		{
			// The current date and time.
			System.DateTime currentDate = DateTime.Now;

			// Find the appropriate angle (in degrees) for the hour hand
			// based on the current time.
			double hourangle = (((float)currentDate.Hour) / 12) * 360 + currentDate.Minute / 2;


			// The same as for the minute angle.
			double minangle = (((float)currentDate.Minute) / 60) * 360;

			// The same for the second angle.
			double secangle = (((float)currentDate.Second) / 60) * 360;

			// Set the beginning of the animation (From property) to the angle 
			// corresponging to the current time.
			hourAnimation.From = hourangle;

			// Set the end of the animation (To property)to the angle 
			// corresponding to the current time PLUS 360 degrees. Thus, the
			// animation will end after the clock hand moves around the clock 
			// once. Note: The RepeatBehavior property of the animation is set
			// to "Forever" so the animation will begin again as soon as it completes.
			hourAnimation.To = hourangle + 360;

			// Same as with the hour animation.
			minuteAnimation.From = minangle;
			minuteAnimation.To = minangle + 360;

			// Same as with the hour animation.
			secondAnimation.From = secangle;
			secondAnimation.To = secangle + 360;

			// Start the storyboard.
			clockStoryboard.Begin();
		}

عن عائشة رضي الله عنها أن النبي صلى الله عليه وسلم قال: إن الله يحب إذا عمل أحدكم عملا أن يتقنه

نعيب زماننا والعيب فينا ... وما لزماننا عيب سوانا

ونهجو ذا الزمان بغير ذنب ... ولو نطق الزمان لنا هجانا

محمد سامر أبو سلو

#331 مارس 2009 في 16:16

[ خطوة, فكرة ] جميلة !!! :), لطالما قمت بإعجابنا بما تقدمه,

بارك الله فيك, وزادك من علمه :)

The important thing is not so much

that every child should be taught,

as that every child should be given the wish to learn.

إنشاء ساعة تماثلية باستخدام تقنية Silverlight باستخدام الكود فقط

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

عدد الزوار حالياً