الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

استخدام عناصر Wpf من داخل تطبيق Windows Forms

بدأه محمد سامر أبو سلو في 29 فبراير 2008 · 1 رد · 794 مشاهدة · في Microsoft Visual Basic.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

يمكن استخدام عناصر WPF من داخل تطبيق Windows Forms من خلال استخدام الفئة ElementHost Class والتي يكون تعريفها ضمن Visual Basic كالتالي

<ContentPropertyAttribute("Child")> _
Public Class ElementHost
	Inherits Control

واستخدامها 

Dim instance As ElementHost

وهي موجودة ضمن مجال الأسماء Namespace المسمى System.Windows.Forms.Integration وفي المجمع WindowsFormsIntegration وفي المكتبة windowsformsintegration.dll ويكون اسم مجال أسماء XML الخاص بها XML Namespace هو http://schemas.microsoft.com/winfx/2006/xaml/presentation ويبين لنا المثال التالي كيفية استخدام التحكم ElementHost لاستضافة عنصر WPF

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
	' Create the ElementHost control for hosting the
	' WPF UserControl.
	Dim host As New ElementHost()
	host.Dock = DockStyle.Fill

	' Create the WPF UserControl.
	Dim uc As New HostingWpfUserControlInWf.UserControl1()

	' Assign the WPF UserControl to the ElementHost control's
	' Child property.
	host.Child = uc

	' Add the ElementHost control to the form's
	' collection of child controls.
	Me.Controls.Add(host)
End Sub

ولاستضافة عنصر WPF ضمن Windows Form يجب عليك تحديد عنصر WPF إلى الخاصية Child وذلك باستخدام الخاصية PropertyMap لتحديد الربط بين التحكم ElementHost وعنصر WPF المستضاف ضمنه كما يمكننا استضافة تحكم Windows Forms ضمن تطبيق WPF باستخدام العنصر WindowsFormsHost

قم بإنشاء مشروع جديد من النوع WPF User Control Library وسمه HostingWpfUserControlInWf ثم قم بفتح الملف UserControl1.xaml في WPF Designer واستبدل كامل الكود الموجود بالكود التالي

<UserControl x:Class="HostingWpfUserControlInWf.UserControl1"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	>

	<Grid>

	  <!-- Place a Label control at the top of the view. -->
	  <Label 
				HorizontalAlignment="Center" 
				TextBlock.TextAlignment="Center" 
				FontSize="20" 
				Foreground="Red" 
				Content="Model: Cone"/>

	  <!-- Viewport3D is the rendering surface. -->
	  <Viewport3D Name="myViewport" >

		<!-- Add a camera. -->
		<Viewport3D.Camera>
		  <PerspectiveCamera 
						FarPlaneDistance="20" 
						LookDirection="0,0,1" 
						UpDirection="0,1,0" 
						NearPlaneDistance="1" 
						Position="0,0,-3" 
						FieldOfView="45" />
		</Viewport3D.Camera>

		<!-- Add models. -->
		<Viewport3D.Children>

		  <ModelVisual3D>
			<ModelVisual3D.Content>

			  <Model3DGroup >
				<Model3DGroup.Children>

				  <!-- Lights, MeshGeometry3D and DiffuseMaterial objects are added to the ModelVisual3D. -->
				  <DirectionalLight Color="#FFFFFFFF" Direction="3,-4,5" />

				  <!-- Define a red cone. -->
				  <GeometryModel3D>

					<GeometryModel3D.Geometry>
					  <MeshGeometry3D 
	Positions="0.293893 -0.5 0.404509  0.475528 -0.5 0.154509  0 0.5 0  0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 0.154509  0.475528 -0.5 -0.154509  0 0.5 0  0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 -0.154509  0.293893 -0.5 -0.404509  0 0.5 0  0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  0.293893 -0.5 -0.404509  0 -0.5 -0.5  0 0.5 0  0 -0.5 -0.5  0 0.5 0  0 0.5 0  0 -0.5 -0.5  -0.293893 -0.5 -0.404509  0 0.5 0  -0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  -0.293893 -0.5 -0.404509  -0.475528 -0.5 -0.154509  0 0.5 0  -0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 -0.154509  -0.475528 -0.5 0.154509  0 0.5 0  -0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 0.154509  -0.293892 -0.5 0.404509  0 0.5 0  -0.293892 -0.5 0.404509  0 0.5 0  0 0.5 0  -0.293892 -0.5 0.404509  0 -0.5 0.5  0 0.5 0  0 -0.5 0.5  0 0.5 0  0 0.5 0  0 -0.5 0.5  0.293893 -0.5 0.404509  0 0.5 0  0.293893 -0.5 0.404509  0 0.5 0  0 0.5 0  " 
	Normals="0.7236065,0.4472139,0.5257313  0.2763934,0.4472138,0.8506507  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  -0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.5308242,0.4294462,0.7306172  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.7236065,0.4472139,0.5257313  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.858892,0.429446,0.279071  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.8944269,0.4472139,0  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.858892,0.429446,-0.279071  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.7236065,0.4472139,-0.5257313  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.5308242,0.4294462,-0.7306172  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.2763934,0.4472138,-0.8506507  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.5308249,0.4294459,-0.7306169  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.7236068,0.4472141,-0.5257306  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8588922,0.4294461,-0.27907  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8944269,0.4472139,0  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.858892,0.429446,0.279071  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.7236065,0.4472139,0.5257313  0.858892,0.429446,0.279071  0.7236065,0.4472139,0.5257313  0.5308242,0.4294462,0.7306172  0.858892,0.429446,0.279071  "				   TriangleIndices="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 " />
					</GeometryModel3D.Geometry>

					<GeometryModel3D.Material>
					  <DiffuseMaterial>
						<DiffuseMaterial.Brush>
						  <SolidColorBrush 
							Color="Red" 
							Opacity="1.0"/>
						</DiffuseMaterial.Brush>
					  </DiffuseMaterial>
					</GeometryModel3D.Material>

				  </GeometryModel3D>

				</Model3DGroup.Children>
			  </Model3DGroup>

			</ModelVisual3D.Content>

		  </ModelVisual3D>

		</Viewport3D.Children>

	  </Viewport3D>
	</Grid>

</UserControl>

• أضف مشروع Windows Forms للـ Solution الحالي وسمه WpfUserControlHost وفي Solution Explorer أضف مرجعا للمجمع WindowsFormsIntegration والمسمى WindowsFormsIntegration.dll ثم قم بإضافة مرجعا Reference لمجمعات WPF التالية PresentationCore و PresentationFramework و WindowsBase ثم أضف مرجعا لـ HostingWpfUserControlInWf ضمن المشروع ثم قم بضبط المشروع WpfUserControlHost ليكون Startup Project

• افتح Form1 في Windows Forms Designer ثم انقر نقرا مزدوجا على form1 لفتح محرر الكود ثم قم باستبدال الكود الموجود بالكود التالي

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms

Imports System.Windows.Forms.Integration

Public Class Form1
	Inherits Form

	Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
		' Create the ElementHost control for hosting the
		' WPF UserControl.
		Dim host As New ElementHost()
		host.Dock = DockStyle.Fill

		' Create the WPF UserControl.
		Dim uc As New HostingWpfUserControlInWf.UserControl1()

		' Assign the WPF UserControl to the ElementHost control's
		' Child property.
		host.Child = uc

		' Add the ElementHost control to the form's
		' collection of child controls.
		Me.Controls.Add(host)
	End Sub

End Class

اضغط F5 لاختبار المشروع

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

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

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

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

#2

دعنا نقوم بعمل مثال معا خطوة خطوة

أنشئ مشروعا جديدا من النوع Windows Forms Application وسمه TestHostElement

انقر بزر الفأرة اليميني على الـ ToolBox واختر Choose Items من القائمة ومن صفحة .net Framework Components اختر Element Host ليتم إضافتها لـ ToolBox لديك ثم اسحب التحكم ElementHost من الـ ToolBox وضعه على النافذة لديك ثم حدد القيمة Fill للخاصية Dock

في الـ Solution Explorer انقر بزر الفأرة اليميني على المشروع واختر Add New Item ومن صفحة WPF اختر User Control WPF ثم في محرر Xaml الخاص بالـ User Control أضف الكود التالي حتى نقوم بإضافة تحكم Border للتحكم وذلك بعد السطر <Grid> مباشرة حيث تحدد الخاصية Margin الهوامش الخاصة بالتحكم و BorderThikness سماكة الحدود 

<Border Margin="1,0,0,78" Name="Border1" BorderThickness="0">


</Border>

سنقوم بتخصيص شكل الخلفية للتحكم Border وذلك برسم الخلفية الخاصة به باستخدام LinearGradientBrush كما في الكود التالي الذي سنضيفه داخل الكود السابق

<Border.Background>
	<LinearGradientBrush StartPoint="0,0.1" EndPoint="0.3,1">
		<GradientStop Offset="0.1" Color="Aquamarine"></GradientStop>
		<GradientStop Offset="0.3" Color="Plum"></GradientStop>
		<GradientStop Offset="0.6" Color="Gold"></GradientStop>
		<GradientStop Offset="0.9" Color="Chocolate"></GradientStop>
		<GradientStop Offset="1" Color="GreenYellow"></GradientStop>
	</LinearGradientBrush>
</Border.Background>

أدخل الكود التالي بعد الكود السابق وقبل </Border> مباشرة وذلك لإضافة تحكم InkCanvas

<InkCanvas Margin="5,5,5,5" Name="InkCanvas1" Height="Auto" Width="Auto" 
		   Background="AliceBlue"/>

كي نضيف زر لمسح محتويات InkCanvas أضف الكود التالي بعد </Border> حيث استخدمنا LinearGradientBrush لرسم الـ Foreground و الـ Background الخاصين بالزر

<Button Height="25" Margin="100,0,100,25" Name="btnClear" 
		VerticalAlignment="Bottom" Content="Clear InkCanvas">
	<Button.Foreground>
		<LinearGradientBrush StartPoint="0.3,0.1" EndPoint="0.7,1">
			<GradientStop Offset="0.1" Color="Red"></GradientStop>
			<GradientStop Offset="0.9" Color="Blue" ></GradientStop>
		</LinearGradientBrush>
	</Button.Foreground>
	<Button.Background>
		<LinearGradientBrush StartPoint="0.3,0.1" EndPoint="0.7,1">
			<GradientStop Offset="0.1" Color="#99FFFF"></GradientStop>
			<GradientStop Offset="0.4" Color="#FF99FF"></GradientStop>
			<GradientStop Offset="0.9" Color="#FFFF99" ></GradientStop>
		</LinearGradientBrush>
	 </Button.Background>
</Button>

من نافذة محرر الـ UserControl انقر نقرا مزدوجا على الزر Clear InkCanvas لإنشاء إجراء معالجة لحدث النقر على ذلك الزر حيث سننتقل هنا مباشرة إلى محرر الكود – أدخل سطر الكود التالي الذي سيقوم بمسح محتويات الـ InkCanvas في الإجراء الفارغ

Me.InkCanvas1.Strokes.Clear

وبهذا نكون قد انتهينا من تصميم الـ UserControl قم بعمل Build للمشروع

– انتقل الآن إلى محرر تصميم النافذة Form1 واختر التحكم ElementHost وانقر على السهم الصغير الذي يظهر أعلى يمين التحكم لفتح نافذة الخصائص السريعة وافتح القائمة المنسدلة بجانب Select Hosted Content واختر تحكم WPF الذي أنشأناه للتو UserControl1

شغل البرنامج واختبره

TestHostElement.zip

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

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

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

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

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

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

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…