ایجاد منو درWPF

در این مقاله با ارائه یک مثال ساده ، مرحله به مرحله به بررسی چگونگی ایجاد یک منو و چگونگی بارگذاری و load صفحه یا فرم مربوط به آن گزینه از منو ، در WPF خواهیم پرداخت .

راه های مختلفی برای ایجاد منو در WPF وجود دارد ، ما در این مقاله از Frame برای ایجاد منو استفاده خواهیم کرد . با یک جستجوی ساده میتوانید راه های دیگر برای ایجاد منو در WPF را براحتی نیز یافت کنید .

نکته : برای کسانی که با Windows Application در Windows Form آشنایی دارند ، ما میتوانیم MDI ایجاد کنیم . در WPF ما توانایی ایجاد MDI را در فرم های خود نداریم .

• ابتدا ، Visual Studio را باز کنید :
• حال عکس های مربوط به پروژه را به آن اضافه کنید ، برای ان کار یک فولدر با نام images ساخته و تصاویر را به آن اضافه کنید :

• پس از اضافه کردن تصاویر به پروژه ، کدهای لازم را برای MainScreen یا همان صفحه اصلی خود می نویسیم .

<Window x:Class="The_Parcel.MainScreen"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Height="{Binding SystemParameters.PrimaryScreenHeight}"   
Width="{Binding SystemParameters.PrimaryScreenWidth}"  
        Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >

• همانطور که مشاهده میکنید ، title = dashboard میباشد ، این نامگذاری به سلیقه شماست ، که در بالای برنامه نمایش داده خواهد شد . نامی مناسب برای برنامه خود انتخاب کنید :

• Windowstartuplocation : موقعیت مکانی باز شدن صفحه را مشخص میکند . Centerscreen بدین معناست که در وسط صفحه نمایش داده خواهد شد .

• WindowState : وضعیت صفحه را مشخص میکند ، که بصورت Maximize نمایش داده شود یا Minimize .

وضعیت های WindowsState :
Maximized ، صفحه به صورت تمام صفحه نمایش داده خواهد شد . درحالی که در وضعیت Minimized صفحه کوچکی نمایش داده خواهد شد .

<Window.Background>  
<ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />  
</Window.Background>  
<Window.Resources>  
<ImageBrush x:Key="Background1" ImageSource="Images/17_Booksellers_Most.jpg" />  
<ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />  
<ImageBrush x:Key="Background3" ImageSource="Images/smsalerts.jpg" />  
<ImageBrush x:Key="Background4" ImageSource="Images1/reports.jpg" />  
<ImageBrush x:Key="Background5" ImageSource="Images1/xyz.png" />  
<ImageBrush x:Key="Background6" ImageSource="Images1/partyorders.jpg" />  
<ImageBrush x:Key="Background7" ImageSource="Images/help_balloon.png" />  
<ImageBrush x:Key="Background8" ImageSource="Images1/neworder.jpg" />  
<ImageBrush x:Key="Background9" ImageSource="Images1/inventory.png" />  
<ImageBrush x:Key="Background10" ImageSource="Images1/Loyalcustomers.jpg" />  
<ImageBrush x:Key="Background11" ImageSource="Images1/oie_3svVKQ9e5T5o.png" />  
</Window.Resources>

• کلید هایی را که برای دکمه ها مشخص کردید را به یاد داشته باشید .
• حال دکمه ها را اضافه کنید .

همانطور که در کد زیر مشاهده میکنید ، ما برای دکمه یک کلید مشخص میکنیم :

<ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />

حال ، به دنبال اضافه کردن کلید ها ، آن هارا بوسیله {staticResource ResourceKey=”ItsBackground”}
bind میکنیم .

<Viewbox Stretch="Uniform">  
        <Grid Height="950" Width="1500">  
            <Grid  Height="950">  
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition Width="435*" />  
                    <ColumnDefinition Width="723*" />  
                </Grid.ColumnDefinitions>  
                <Button Background="{StaticResource ResourceKey=Background3}" ToolTip="Send SMS and Email." Height="91" HorizontalAlignment="Left" Name="btnSMSEmail" VerticalAlignment="Top" Width="100" Click="btnSMSEmail_Click" Grid.Column="1" Margin="19,8,0,0">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background5}" ToolTip="Manage employee data." Height="92" HorizontalAlignment="Left" Margin="473,7,0,0" Name="btnEmpDetails" VerticalAlignment="Top" Width="90" Click="btnEmpDetails_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background7}" ToolTip="Need help click here." Height="91" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btnHelp" VerticalAlignment="Top" Width="92" Grid.Column="1" Click="btnHelp_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background8}" Height="91" ToolTip="Place New Order" HorizontalAlignment="Left" Margin="14,7,0,0" Name="btnOrder" VerticalAlignment="Top" Width="92" Click="btnOrder_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background9}" ToolTip="View Reports" Height="91" HorizontalAlignment="Left" Margin="132,7,0,0" Name="btnInventory" VerticalAlignment="Top" Width="92" Click="btnInventory_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background10}" ToolTip="View your customers." Height="92" HorizontalAlignment="Left" Margin="365,7,0,0" Name="btnCustomer" VerticalAlignment="Top" Width="92" Click="btnCustomer_Click" Grid.ColumnSpan="2">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background11}" ToolTip="Party orders coming soon.." Height="92" HorizontalAlignment="Left" Margin="250,6,0,0" Name="btnPartyOrders" VerticalAlignment="Top" Width="92" Click="btnPartyOrders_Click_1">  
  
                </Button>

ازاین جا به بعد ، این همانند یک منو نمایش داده خواهد شد ، به تصویر زیر توجه فرمایید :

حال به سراغ اضافه کردن یک frame برای نمایش فرم های مربوط به هر منو می رویم .

یک تگ معمولی <Frame></Frame> در اینجا ایجاد خواهد شد . و ما یکسری property برای آن مشخص میکنیم :

VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2"  
<Frame Height="900" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>

• کد نهایی :

MainScren.Xaml :

<Window x:Class="The_Parcel.MainScreen"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Height="{Binding SystemParameters.PrimaryScreenHeight}"   
Width="{Binding SystemParameters.PrimaryScreenWidth}"  
        Title="Dashbooard" Topmost="False" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" WindowState="Maximized" >  
    <Window.Background>  
        <ImageBrush ImageSource="Images/Simple-Orange-Wallpaper.jpg" />  
    </Window.Background>  
    <Window.Resources>  
        <ImageBrush x:Key="Background1" ImageSource="Images/17_Booksellers_Most.jpg" />  
        <ImageBrush x:Key="Background2" ImageSource="Images/promotion_new.png" />  
        <ImageBrush x:Key="Background3" ImageSource="Images/smsalerts.jpg" />  
        <ImageBrush x:Key="Background4" ImageSource="Images1/reports.jpg" />  
        <ImageBrush x:Key="Background5" ImageSource="Images1/xyz.png" />  
        <ImageBrush x:Key="Background6" ImageSource="Images1/partyorders.jpg" />  
        <ImageBrush x:Key="Background7" ImageSource="Images/help_balloon.png" />  
        <ImageBrush x:Key="Background8" ImageSource="Images1/neworder.jpg" />  
        <ImageBrush x:Key="Background9" ImageSource="Images1/inventory.png" />  
        <ImageBrush x:Key="Background10" ImageSource="Images1/Loyalcustomers.jpg" />  
        <ImageBrush x:Key="Background11" ImageSource="Images1/oie_3svVKQ9e5T5o.png" />  
    </Window.Resources>  
    <Viewbox Stretch="Uniform">  
        <Grid Height="950" Width="1500">  
            <Grid  Height="950">  
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition Width="435*" />  
                    <ColumnDefinition Width="723*" />  
                </Grid.ColumnDefinitions>  
                <Button Background="{StaticResource ResourceKey=Background3}" ToolTip="Send SMS and Email." Height="91" HorizontalAlignment="Left" Name="btnSMSEmail" VerticalAlignment="Top" Width="100" Click="btnSMSEmail_Click" Grid.Column="1" Margin="19,8,0,0">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background5}" ToolTip="Manage employee data." Height="92" HorizontalAlignment="Left" Margin="473,7,0,0" Name="btnEmpDetails" VerticalAlignment="Top" Width="90" Click="btnEmpDetails_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background7}" ToolTip="Need help click here." Height="91" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btnHelp" VerticalAlignment="Top" Width="92" Grid.Column="1" Click="btnHelp_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background8}" Height="91" ToolTip="Place New Order" HorizontalAlignment="Left" Margin="14,7,0,0" Name="btnOrder" VerticalAlignment="Top" Width="92" Click="btnOrder_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background9}" ToolTip="View Reports" Height="91" HorizontalAlignment="Left" Margin="132,7,0,0" Name="btnInventory" VerticalAlignment="Top" Width="92" Click="btnInventory_Click">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background10}" ToolTip="View your customers." Height="92" HorizontalAlignment="Left" Margin="365,7,0,0" Name="btnCustomer" VerticalAlignment="Top" Width="92" Click="btnCustomer_Click" Grid.ColumnSpan="2">  
  
                </Button>  
                <Button Background="{StaticResource ResourceKey=Background11}" ToolTip="Party orders coming soon.." Height="92" HorizontalAlignment="Left" Margin="250,6,0,0" Name="btnPartyOrders" VerticalAlignment="Top" Width="92" Click="btnPartyOrders_Click_1">  
  
                </Button>  
  
                <Frame Height="900" HorizontalAlignment="Left" Name="frame1" VerticalAlignment="Stretch" Width="1480" NavigationUIVisibility="Hidden" Grid.ColumnSpan="2" Margin="6,104,0,6"></Frame>  
            </Grid>  
  
        </Grid>  
    </Viewbox>  
</Window>

• با دو بار کلیک کردن بر روی هر دکمه ، وارد فضای جدید میشوید که در آنجا شما میتوانید eventای را برای آن دکمه تعریف کنید :

حال ، فرم ساده ای همانند زیر به آن اضافه میکنیم :

همانند زیر صفحه را مشخص کنید :

نام مناسبی برای آن انتخاب کنید :

چیزی که شما میخواهیم به عنوان نسخه برنامه نمایش داده شود را ، اضافه کنید :

Page2.Xaml :

<Page x:Class="The_Parcel.Page1"  
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
      mc:Ignorable="d"   
      d:DesignHeight="192" d:DesignWidth="469"  
    Title="Page1">  
  
    <Grid Height="958" Width="604">  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="7*" />  
            <ColumnDefinition Width="1169*" />  
        </Grid.ColumnDefinitions>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="361*" />  
            <RowDefinition Height="597*" />  
        </Grid.RowDefinitions>  
        <RichTextBox SpellCheck.IsEnabled="True" Margin="4,8,0,43" Name="RichTextBox1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="588" Height="310" FontSize="18" FontFamily="Tahoma" IsReadOnly="True" Grid.ColumnSpan="2" ScrollViewer.HorizontalScrollBarVisibility="Visible" >  
            <FlowDocument>  
                <Paragraph>  
                    <Bold FontFamily="Tahoma">Welcome To Parcel V 1.0 .</Bold>  
                </Paragraph>  
                
             
  
            </FlowDocument>  
        </RichTextBox>  
    </Grid>  
</Page>

• حال ، دوباره به Mainscreen.xaml.cs بروید و تکه کد زیر را به آن اضافه کنید :

private void btnHelp_Click(object sender, RoutedEventArgs e)  
       {  
           frame1.Source = new Uri("Page2.xaml", UriKind.Relative);  
       }

کد نهایی Mainscrren.xaml.cs :

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.Shapes;  
using System.Data.SqlClient;  
using System.Collections.Generic;  
using System.ComponentModel;  
using System.Configuration;  
  
  
namespace The_Parcel  
{  
    /// <summary>  
    /// Interaction logic for Window1.xaml  
    /// </summary>  
    public partial class MainScreen : Window  
    {  
  
        // Uri iconUri = new Uri("pack://application:,,,/Icon1.ico", UriKind.RelativeOrAbsolute);  
        //this.Icon = BitmapFrame.Create(iconUri);  
        //  public static string strconn = ConfigurationManager.ConnectionStrings["HotemManagement"].ConnectionString;  
        //  SqlConnection connection = new SqlConnection(strconn);  
        public MainScreen()  
        {  
            InitializeComponent();  
        }  
  
        private void btnOrder_Click(object sender, RoutedEventArgs e)  
        {  
            
             
  
        }  
  
        private void btnEmpDetails_Click(object sender, RoutedEventArgs e)  
        {  
             
        }  
  
        private void btnSMSEmail_Click(object sender, RoutedEventArgs e)  
        {  
             
        }  
  
        private void btnCustomer_Click(object sender, RoutedEventArgs e)  
        {  
              
        }  
          
        private void btnPartyOrders_Click_1(object sender, RoutedEventArgs e)  
        {  
            //frame1.Source = new Uri("Partorders.xaml", UriKind.Relative);  
            MessageBox.Show("Coming Soon.......");  
        }  
  
        private void btnHelp_Click(object sender, RoutedEventArgs e)  
        {  
            frame1.Source = new Uri("Page2.xaml", UriKind.Relative);  
        }  
  
        private void btnInventory_Click(object sender, RoutedEventArgs e)  
        {  
              
        }  
    }  
}

خروجی برنامه بصورت زیر خواهد بود :

فایل های ضمیمه

5526_Sample.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

ایجاد منو درWPF

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید