Share via

الشروع في استخدام WPF

  • مقالة

توفر هذه معاينة مقدمة إلى التطوير Windows Presentation Foundation (WPF)التطبيقات التي تتضمن العناصر المشتركة في إلى معظم WPFالتطبيقات: علامات الــExtensible Application Markup Language (XAML) ، خلفية التعليمات البرمجية ، تعريفات التطبيقات, عناصر تحكم ، تخطيط ، ربط البيانات و الأنماط.

هذه معاينة بإرشادك خلال التطوير بسيط WPFاستخدام تطبيق في الخطوات التالية.

  • تعريف XAMLإلى تصميم المظهر تطبيق واجهة المستخدم (UI).

  • كتابة التعليمات البرمجية لإنشاء سلوك التطبيق.

  • إنشاء تعريف للتطبيق لإدارة التطبيق.

  • إضافة عناصر تحكم وإنشاء التخطيط إلى إنشاء تطبيق واجهة المستخدم.

  • إنشاء أنماط لإنشاء مظهراً متناسقاً خلال أحد تطبيقات واجهة المستخدم.

  • ربط واجهة المستخدم بالبيانات لتجميع واجهة المستخدم من البيانات والاحتفاظ بالبيانات و مزامنة واجهة المستخدم.

إنهاء معاينة، سوف يكون بناء مستقل Windowsتطبيق الذي يسمح للمستخدمين بعرض تقارير المصروفات للأشخاص المحددة. يتألف التطبيق من عدة صفحات WPF و التي تتم استضافتها في إطار نمط المستعرض .

نماذج تعليمات برمجية التي هو المستخدمة لإنشاء ترتيب هو معاينة هو متوفراً لكلا Microsoft Visual Basicو #Cفي مقدمة لإنشاء تطبيقات WPF.

المتطلبات الأساسية

تحتاج إلى المكونات التالية لاستكمال هذه الإرشادات التفصيلية:

  • Visual Studio 2010

ل المزيد من المعلومات حول جاري التثبيت Visual Studio، راجع تثبيت Visual Studio وصيانتها.

قم بإنشاء مشروع تطبيق

في هذا القسم، تقوم بإنشاء البنية التحتية التطبيق، والذي يتضمن تعريف تطبيق خاص، اثنين الصفحات، ونسخة.

  1. إنشاء يسمى مشروع WPF تطبيق جديد في Visual أساسى أو Visual C# من ExpenseIt. لمزيد من المعلومات، راجع كيفية: إنشاء مشروع تطبيق WPF جديد.

  2. فتح تطبيق.xaml (Visual أساسى) أو App.xaml (C#).

    هذا XAMLملف تعريف WPFتطبيق وتطبيق أي من الموارد. يمكنك أيضا استخدام هذا الملف إلى تحديد واجهة المستخدمauإلىmatically التي تظهر عند بدء تشغيل تطبيق؛ وفي هذه الحالة، MainWindow.xaml.

    الخاص بك XAMLيجب أن مثل بذلك في Visual أساسى:

    <Application x:Class="Application"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

    أو مثل هذا في C#‎:

    <Application x:Class="ExpenseIt.App"
     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
     StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

  3. قم بفتح MainWindow.xaml.

    هذا XAMLملف الإطار الرئيسي تطبيق الخاص بك ويعرض المحتوى التي تم إنشاؤها في الصفحات. Windowفئة تعريف خصائص الإطار، مثل عنوان أو حجمه أو رمز، و أحداث hوles، مثل الإغلاق أو إخفاء.

  4. تغيير Windowعنصر إلى NavigationWindow.

    سوف تنتقل إلى آخر هذا تطبيق محتوى استناداً إلى تدخل من مستخدم. ولذلك، الرئيسي Windowبحاجة إلى تم تغييره NavigationWindow. NavigationWindowترث الجميع خصائصWindow. NavigationWindowعنصر في ملف XAML بإنشاء مثيل NavigationWindowفئة. لمزيد من المعلومات، راجع نظرة عامة حول التنقل.

  5. قم بتغيير الخصائص التالية تشغيل NavigationWindowعنصر:

    • التعيين Titleخاصية إلى "ExpenseIt".

    • التعيين Widthخاصية إلى 500 بكسل.

    • التعيين Heightخاصية إلى 350 بكسل.

    • قم بإزالة Gridعناصر بين NavigationWindowعلامات.

    الخاص بك XAMLيجب أن مثل بذلك في Visual أساسى:

    <NavigationWindow x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="500">

</NavigationWindow>

    أو مثل هذا في C#‎:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

  6. فتح MainWindow.xaml.vb أو MainWindow.xaml.cs.

    Th هو ملف هو ملف التعليمات برمجية-الخلف يحتوي على تعليمات برمجية لمعالجة الأحداث التي تم تعريفها في MainWindow.xaml. وهذا ملف يحتوي على فصل دراسي جزئي لإطار المعرفة في XAML.

  7. إذا كنت تستخدم C#، تغيير MainWindowالفئة إلى ينحدر من NavigationWindow.

    في Visual أساسى، يحدث هذا تلقائياً عند تغيير الإطار في XAML.

    يجب أن تبدو تعليمات برمجية كما يلي. في Visual أساسى، فعليك فقط تعريف فئة.

    Class MainWindow

    Protected Overrides Sub Finalize()
        MyBase.Finalize()
    End Sub

    Public Sub New()

        ' This call is required by the designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.

    End Sub
End Class

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : NavigationWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

إضافة ملفات إلى تطبيق

في هذا القسم، إضافة صفحتان ونسخة إلى التطبيق.

  1. إضافة جديد الصفحة (WPF) إلى مشروع باسم من ExpenseItHome.xaml. لمزيد من المعلومات، راجع كيفية: إضافة عناصر جديدة إلى Project WPF.

    Th هو صفحة هو الصفحة الأولى التي هو dهوplayed عند تطبيق هو تشغيل. ستظهر قائمة بالأشخاص الذين يمكن لمستخدم تحديد شخص منها إلى تقرير مصروفات لإظهار.

  2. فتح ExpenseItHome.xaml.

  3. التعيين Titleإلى "ExpenseIt-الصفحة الرئيسيه".

    الخاص بك XAMLيجب أن مثل بذلك في Visual أساسى:

    <Page x:Class="ExpenseItHome"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="300" d:DesignWidth="300"
  Title="ExpenseIt - Home">
    <Grid>

    </Grid>
</Page>

    أو هذا في C#‎:

    <Page x:Class="ExpenseIt.ExpenseItHome"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="ExpenseIt - Home">

    <Grid>

    </Grid>
</Page>

  4. قم بفتح MainWindow.xaml.

  5. التعيين Sourceخاصية تشغيل NavigationWindowإلى "ExpenseItHome.xaml".

    يؤدي هذا إلى تعيين ExpenseItHome.xaml لتكون أول الصفحة فتح عند بدء تشغيل تطبيق. الخاص بك XAMLيجب أن مثل بذلك في Visual أساسى:

    <NavigationWindow x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

    أو هذا في C#‎:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

  6. إضافة جديد الصفحة (WPF) إلى مشروع باسم من ExpenseReportالصفحة.xaml.

    Th هو الصفحة سيظهر تقرير المصروفات للشخص الذي هو المحددة تشغيل ExpenseItHome.xaml.

  7. افتح ExpenseReportPage.xaml.

  8. التعيين Titleإلى "ExpenseIt-عرض، تقرير نفقات".

    الخاص بك XAMLيجب أن مثل بذلك في Visual أساسى:

    <Page x:Class="ExpenseReportPage"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
      Title="ExpenseIt - View Expense">
    <Grid>

    </Grid>
</Page>

    أو هذا في C#‎:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
      xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="https://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"
    Title="ExpenseIt - View Expense">

    <Grid>

    </Grid>
</Page>

  9. افتح ExpenseItHome.xaml.vb و ExpenseReportPage.xaml.vb، أو ExpenseItHome.xaml.cs ExpenseReportPage.xaml.cs.

    عندما تقوم بإنشاء ملف جديد لصفحة، ‏‫Visual Studio تلقائياً بإنشاء تعليمات برمجية خلف الملف. معالجة هذه الملفات البرمجية-الخلف منطق للاستجابة إلى إدخال مستخدم.

    يجب أن تبدو تعليمات برمجية كما يلي. في Visual أساسى، فعليك فقط تعريف فئة.

    Class ExpenseItHome

    Protected Overrides Sub Finalize()
        MyBase.Finalize()
    End Sub

    Public Sub New()

        ' This call is required by the designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.

    End Sub
End Class

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseItHome.xaml
    /// </summary>
    public partial class ExpenseItHome : Page
    {
        public ExpenseItHome()
        {
            InitializeComponent();
        }
    }
}

    Class ExpenseReportPage

    Public Sub New()

        ' This call is required by the designer.
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.

    End Sub
End Class

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseReportPage.xaml
    /// </summary>
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  10. قم بإضافة نسخة المسمى علامة مائية.png إلى مشروع. يمكنك أما إنشاء الصورة الخاصة بك أو قم بنسخ الملف من تعليمات برمجية للنموذج. لمزيد من المعلومات، راجع كيفية القيام بما يلي: إضافة عناصر موجود إلى مشروع.

إنشاء وتشغيل التطبيق

في هذا الجزء، يمكنك بنية و تشغيل تطبيق.

  1. بنية و تشغيل تطبيق عن طريق الضغط على F5 أو تحديد بدء التصحيح من قائمة تصحيح.

    يبين المثال التالي تطبيق مع NavigationWindowالأزرار.

    لقطة شاشة لعينة ExpenseIt

  2. يغلق تطبيق للرجوع إلى Visual Studio.

إنشاء التخطيط

يوفر التخطيط طريقة مرتبة لوضع العناصر واجهة المستخدم ويقوم أيضاً بإدارة الحجم والموضع لتلك العناصر عندما يتم تغيير حجم واجهة المستخدم. إنشاء تخطيط باستخدام واحد الإجراءات التالية التخطيط بشكل عام عناصر التحكم:

كل من عناصر تحكم التخطيط يعتمد نوع خاص من التخطيط للعناصر التابعة له. يمكن تغيير حجم صفحات ExpenseIt ويكون كل صفحة لها عناصر التي يتم ترتيبها أفقياً وعمودياً بجانب العناصر الأخرى. وبالتالي، Grid هو عنصر التخطيط مثالي للتطبيق.

ملاحظةملاحظة

ل المزيد من المعلومات حول Panelالعناصر، راجع نظرة عامة على اللوحات.للحصول على مزيد من المعلومات حول تخطيط، راجع تخطيط النظام.

في مقطع، إنشاء جدول ذو عمود مفرد باستخدام ثلاثة صف (s) وهامش 10 بكسل بإضافة العمود و صف ملفات تعريف إلى Gridفي ExpenseItHome.xaml.

  1. فتح ExpenseItHome.xaml.

  2. بتعيين Marginخاصية تشغيل Gridالعنصر إلى "10,0,10,10" التي تتوافق مع إلى اليسار، الأتشغيل، يمين و أسفل هوامش.

  3. إضافة التالية XAMLبين Gridعلامات لإنشاء صف ملفات تعريف الأعمدة.

    <Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

    Heightصفين تم تعيين إلى Autoيعني حجم صفوف بإسناد المحتوى الموجود في صفوف. الافتراضي Heightهو Starتغيير الحجم، مما يعني أنه سيتم الصف نسبة ثقيلة في المساحة متوفر. على سبيل المثال في حالة وجود صفين كل ارتفاع "*"، سوف يكون لكل ارتفاع الذي هو نصف المساحة متوفر.

    الخاص بك Gridيجب أن تبدو إلى XAML التالي:

    <Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

إضافة عناصر تحكم.

في ترتيب هو المقطع الصفحة الصفحة الرئيسية واجهة المستخدمهو المحدث لإظهار lهوt أشخاص يمكنك محدد المستخدمين من عرض تقرير المصروفات للشخص المحدد. عناصر التحكم هي الكائنات واجهة المستخدم التي تسمح للمستخدمين إلى التعامل مع تطبيق الخاص بك. لمزيد من المعلومات، راجع نظرة عامة حول عناصر التحكم.

إلى إنشاء هذا واجهة المستخدم، تتم إضافة العناصر التالية إلى ExpenseItHome.xaml:

  • ListBox (للحصول علي قائمة الأشخاص).

  • Label (لرأس القائمة).

  • Button (انقر فوقها لعرض تقرير المصاريف للشخص المحدد في القائمة).

كل عنصر تحكم هو في صف من Gridبتعيين Grid.Rowإرفاق الخصائص. لمزيد من المعلومات حول خصائص المرفق، راجع نظرة عامة حول الخصائص المرفقة.

  1. فتح ExpenseItHome.xaml.

  2. اضف XAMLالتالية بين العلامات Grid .

    
  <!-- People list -->
  <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

  3. قم ببناء التطبيق وتشغيله.

يبين المثال التالي عناصر التحكم التي يتم إنشاؤها بواسطة XAML في هذا القسم.

لقطة شاشة لعينة ExpenseIt

إضافة نسخة و عنوان

في ترتيب هو المقطع الصفحة الصفحة الرئيسية واجهة المستخدمهو محدثها بصورة وعنوان الصفحة.

  1. فتح ExpenseItHome.xaml.

  2. إضافة عمود آخر إلى ColumnDefinitionsمع ثابت Width230 بكسل.

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>

  3. إضافة صف آخر إلى RowDefinitions.

    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

  4. قم بتحريك عناصر التحكم إلى العمود الثاني بواسطة تعيين Grid.Columnإلى 1. تحريك كل عنصر تحكم لأسفل صف، بواسطة زيادة Grid.Rowقبل 1.

      <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

  5. تعيين Backgroundمن Gridإلى يكون ملف الصورة علامة مائية.png.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. قبل Border، إضافة Labelمع المحتوى "طريقه عرض تقرير مصروفات" إلى أن يكون عنوان الصفحة.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

  7. قم ببناء التطبيق وتشغيله.

يبين المثال التالي نتائج هذا مقطع.

لقطة شاشة لعينة ExpenseIt

قم بإضافة تعليمات برمجية إلى معالجة الأحداث

  1. فتح ExpenseItHome.xaml.

  2. إضافة Clickمعالج حدث Buttonالعنصر. لمزيد من المعلومات، راجع كيفية: إنشاء معالج أحداث بسيطة.

      <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>

  3. فتح ExpenseItHome.xaml.vb أو ExpenseItHome.xaml.cs.

  4. إضافة التعليمة البرمجية التالية إلى Clickمعالج الأحداث، مما يؤدي إلى الإطار للتنقل إلى الملف ExpenseReportPage.xaml.

            Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report
            Dim expenseReportPage As New ExpenseReportPage()
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage();
    this.NavigationService.Navigate(expenseReportPage);

}

إنشاء واجه المستخدم ل ExpenseReportPage

يعرض ExpenseReportPage.xaml تقرير المصاريف للشخص الذي تم تحديده في ExpenseItHome.xaml. يضيف هذا مقطع عناصر التحكم وقم بإنشاء واجهة المستخدمل ExpenseReportPage.xaml. هذا القسم أيضا بإضافة الألوان التعبئة والخلفية إلى متنوع واجهة المستخدمالعناصر.

  1. افتح ExpenseReportPage.xaml.

  2. إضافة XAML التالية بين Gridعلامات.

    Th واجهة المستخدم هو هو مماثلة لواجهة المستخدم التي تم إنشاؤها تشغيل ExpenseItHome.xaml.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>


<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    Expense Report For:
</Label>
<Grid Margin="10" Grid.Column="1" Grid.Row="1">

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
    </StackPanel>

    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
    </StackPanel>

    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="10" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
            <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
            <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

    </Grid>
</Grid>

  3. قم ببناء التطبيق وتشغيله.

  4. انقر فوق الزر عرض.

    تظهر صفحة تقرير المصاريف.

يبين المثال التالي واجهة المستخدمتمت الإضافة عناصر إلى ExpenseReportPage.xaml. لاحظ أنه على زر التنقل الخلفي هو ممكنة.

لقطة شاشة لعينة ExpenseIt

عناصر تحكم styling

الالمظهر متنوع عناصر يمكن غالباً ما يكون هو نفسه لكافة عناصر من نفس النوع في واجهة المستخدم. واجهة المستخدميستخدم أنماط إلى إجراء مظاهر القابل لإعادة الاستخدام عبر عدة عناصر. reusability ليساعدك في أنماط إلى تبسيط XAMLالإنشاء والإدارة. لمزيد من المعلومات حول هذه الأنماط, انظر التنسيق و القولبة. يستبدل هذا مقطع السمات كل العناصر التي تم تعريفها في الخطوات السابقة مع أنماط.

  1. قم بفتح تطبيق.xaml أو App.xaml.

  2. إضافة XAML التالية بين Application.Resourcesعلامات:

    
<!-- Header text style -->
<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

<!-- List header style -->
<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
</Style>

<!-- List header text style -->
<Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

    هذا XAMLقم بإضافة ما يلي أنماط:

    • headerTextStyle:لتنسيق عنوان الصفحةLabel.

    • labelStyle: إلى تنسيقLabelعناصر التحكم.

    • listHeaderStyle: لتنسيق رأس قائمة عناصر التحكمBorder .

    • listHeaderTextStyle: لتنسيق رأس القائمةLabel.

    • buttonStyle: إلى تنسيقButtonتشغيل ExpenseItHome.xaml.

    لاحظ أن الأنماط موارد و الأطفال Application.Resourcesخاصية العنصر. يتم تطبيق الأنماط في هذا الموقع لكافة العناصر في أحد تطبيقات. لمثال حول استخدام الموارد في التطبيق NET Framewor. ، راجع كيفية القيام بما يلي: استخدام موارد تطبيق.

  3. فتح ExpenseItHome.xaml.

  4. قم باستبدال كل شيء بين Gridعناصر مع التالية XAML.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"  />
</Grid.Background>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<!-- People list -->

<Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
    View Expense Report
</Label>

<Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
    <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
    <ListBoxItem>Mike</ListBoxItem>
    <ListBoxItem>Lisa</ListBoxItem>
    <ListBoxItem>John</ListBoxItem>
    <ListBoxItem>Mary</ListBoxItem>
</ListBox>

<!-- View report button -->
<Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>

    خصائص مثل كـ VerticalAlignmentو FontFamilyالتي تعرف مظهر كل عنصر تحكم يتم إزالته واستبداله بتطبيق أنماط. على سبيل المثال headerTextStyleهو المطبق "طريقه عرض تقرير مصروفات" Label.

  5. افتح ExpenseReportPage.xaml.

  6. قم باستبدال كل شيء بين Gridعناصر مع التالية XAML.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>


<Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
    Expense Report For:
</Label>
<Grid Margin="10" Grid.Column="1" Grid.Row="1">

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
    </StackPanel>

    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}"></Label>
    </StackPanel>

    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="10" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
            <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
            <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

    </Grid>
</Grid>

    يؤدي هذا إلى إضافة أنماط إلى Labelو Borderالعناصر.

  7. قم ببناء التطبيق وتشغيله.

    بعد إضافة XAMLفي هذا القسم، يبحث تطبيق نفسه كـ ظهر قبل محدث باستخدام الأنماط.

ربط بيانات إلى عنصر تحكم

في ترتيب هو المقطع، يمكنك إنشاء XMLبيانات التي هو مرتبط بعناصر التحكم المتنوعة.

  1. فتح ExpenseItHome.xaml.

  2. في Gridالعنصر، إضافة XAML التالية لإنشاء XmlDataProviderالتي تحتوي على بيانات لكل شخص.

    بيانات هو التي تم إنشاؤها ك Gridمورد. عادة هذا سوف يتم تم تحميله كـ ملف، ولكن للبساطة تمت الإضافة بيانات المضمنة.

    <Grid.Resources>


...


<!-- Expense Report Data -->
<XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
    <x:XData>
        <Expenses >
            <Person Name="Mike" Department="Legal">
                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
            </Person>
            <Person Name="Lisa" Department="Marketing">
                <Expense ExpenseType="Document printing"
      ExpenseAmount="50"/>
                <Expense ExpenseType="Gift" ExpenseAmount="125" />
            </Person>
            <Person Name="John" Department="Engineering">
                <Expense ExpenseType="Magazine subscription" 
     ExpenseAmount="50"/>
                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                <Expense ExpenseType="Software" ExpenseAmount="500" />
            </Person>
            <Person Name="Mary" Department="Finance">
                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
            </Person>
        </Expenses>
    </x:XData>
</XmlDataProvider>


...


</Grid.Resources>

  3. في Gridالموارد، قم بإضافة ما يلي DataTemplate، الذي يعرف كيفية إلى عرض بيانات في ListBox. للحصول على مزيد من المعلومات حول قوالب البيانات ، راجع نظرة عامة حول قولبة البيانات.

    <Grid.Resources>


...


<!-- Name item template -->
<DataTemplate x:Key="nameItemTemplate">
    <Label Content="{Binding XPath=@Name}"/>
</DataTemplate>


...


</Grid.Resources>

  4. استبدال الموجود ListBoxمع XAML التالية.

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
         ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
         ItemTemplate="{StaticResource nameItemTemplate}">
</ListBox>

    ربط هذا XAML ItemsSourceخاصية ListBoxبمصدر بيانات وقم بتطبيق قالب بيانات ItemTemplate.

Connecting بيانات إلى عناصر التحكم

في هذا الجزء, you write the تعليمات برمجية that retrieves the الحالي العنصر that هو محدد in the قائمة of people تشغيل the ExpenseItHome.xaml الصفحة, و passes its مرجع إلى the الدالة الإنشائية of ExpenseReportPage during instantiation. ExpenseReportPage sets its بيانات سياق مع the passed العنصر, which هو what the عناصر التحكم defined في ExpenseReportPage.xaml will يربط إلى.

  1. قم بفتح ExpenseReportPage.xaml.vb أو ExpenseReportPage.xaml.cs.

  2. إضافة على الدالة الإنشائية يأخذ كائن بحيث يمكنك تمرير بيانات تقرير المصاريف الشخص المحدد.

        Partial Public Class ExpenseReportPage
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub

        ' Custom constructor to pass expense report data
        Public Sub New(ByVal data As Object)
            Me.New()
            ' Bind to expense report data.
            Me.DataContext = data
        End Sub

    End Class

    public partial class ExpenseReportPage : Page
{
    public ExpenseReportPage()
    {
        InitializeComponent();
    }

    // Custom constructor to pass expense report data
    public ExpenseReportPage(object data):this()
    {
        // Bind to expense report data.
        this.DataContext = data;
    }

}

  3. فتح ExpenseItHome.xaml.vb أو ExpenseItHome.xaml.cs.

  4. تغيير Clickمعالج الأحداث إلى لاستدعاء construcإلىr جديد بتمرير بيانات تقرير المصاريف للشخص المحدد.

            Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report
            Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);

}

styling بيانات باستخدام قوالب بيانات

في هذا الجزء، يمكنك تحديث واجهة المستخدملكل عنصر في بيانات حدود سرد باستخدام قوالب بيانات.

  1. افتح ExpenseReportPage.xaml.

  2. يربط المحتوى "الاسم" و "القسم" Labelعناصر إلى مصدر بيانات المناسبة خاصية. لمزيد من المعلومات حول ربط البيانات، راجع نظرة عامة لربط البيانات.

        <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
    </StackPanel>

    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>
    </StackPanel>

  3. بعد فتح Gridالعنصر، قم بإضافة قوالب البيانات التالية، التي تعرف كيفية إلى عرض بيانات تقرير المصاريف.

    <!--Templates to display expense report data-->
<Grid.Resources>
    <!-- Reason item template -->
    <DataTemplate x:Key="typeItemTemplate">
        <Label Content="{Binding XPath=@ExpenseType}"/>
    </DataTemplate>
    <!-- Amount item template -->
    <DataTemplate x:Key="amountItemTemplate">
        <Label Content="{Binding XPath=@ExpenseAmount}"/>
    </DataTemplate>
</Grid.Resources>

  4. قم بيطبق القوالب إلى ListBoxالعناصر التي تعرض بيانات تقرير المصاريف.

    <!-- Expense type list -->
<Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
    <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
</Border>
<ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
         ItemTemplate="{StaticResource typeItemTemplate}"  />

<!-- Amount list -->
<Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
    <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
</Border>
<ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
         ItemTemplate="{StaticResource amountItemTemplate}" />

  5. قم ببناء التطبيق وتشغيله.

  6. حدد شخص و انقر فوق الزر عرض.

تظهر التوضيحات الثاني التالية الصفحتين تطبيق ExpenseIt مع عناصر التحكم، والتخطيط، والأنماط، وبيانات ربط، وقوالب بيانات التي تم تطبيقها.

لقطة شاشة لعينة ExpenseIt

أفضل الممارسات

يوضح هذا النموذج لميزة معينة ل WPF و، وبالتالي لا يتبع تطوير تطبيق أفضل الممارسات. لتغطية شاملة ل WPFو NET Framewor.أفضل الممارسات لتطوير التطبيقات، راجع المواضيع التالية كـ المناسب:

وماذا بعد

لديك الآن عدد من التقنيات تحت تصرفكم لإنشاء واجهة المستخدم باستخدام Windows Presentation Foundation (WPF). يجب أن يكون لديك فهم واسع من كتل الإنشاء الأساسية من الآن لتطبيق بيانات-مرتبطة NET Framewor. . هذا الموضوع لا يستنفد ولكن تقريبًا لديك الآن الإحساس لبعض إمكانيات قد تكتشفها بنفسك خارج تقنيات هذا الموضوع.

لمزيد من المعلومات حول بنية WPF و البرمجة طرازات، راجع المواضيع التالية:

ل المزيد من المعلومات حول إنشاء تطبيقات، راجع المواضيع التالية:

راجع أيضًا:

المبادئ

نظرة عامة على اللوحات

نظرة عامة حول قولبة البيانات

إنشاء تطبيق WPF (WPF)

موارد أخرى

أنماط و قوالب: وضع التصورات