खोज…


परिचय

एफ # डब्ल्यूपीएफ प्रोग्रामिंग के लिए पाए जाने वाले अधिकांश उदाहरण एमवीवीएम पैटर्न, और एमवीसी के साथ कुछ व्यवहार करते प्रतीत होते हैं, लेकिन आगे कोई नहीं है जो ठीक से दिखाता है कि "अच्छे पुराने" कोड के साथ कैसे उठना और चलना है।

शिक्षण के साथ-साथ प्रयोग के लिए पैटर्न के पीछे कोड बहुत आसान है। यह वेब पर कई परिचय पुस्तकों और शिक्षण सामग्री में उपयोग किया जाता है। इसीलिए।

ये उदाहरण प्रदर्शित करेंगे कि विंडोज़, नियंत्रण, चित्र और आइकन, और बहुत कुछ के साथ आवेदन के पीछे एक कोड कैसे बनाया जाए।

एप्लिकेशन के पीछे एक नया F # WPF कोड बनाएं।

F # कंसोल एप्लिकेशन बनाएं।

अनुप्रयोग के आउटपुट प्रकार को Windows अनुप्रयोग में बदलें।

FsXaml NuGet पैकेज जोड़ें।

इन चार स्रोत फ़ाइलों को, यहां सूचीबद्ध क्रम में जोड़ें।

MainWindow.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="First Demo" Height="200" Width="300">
    <Canvas>
        <Button Name="btnTest" Content="Test" Canvas.Left="10" Canvas.Top="10" Height="28" Width="72"/>
    </Canvas>
</Window>

MainWindow.xaml.fs

namespace FirstDemo

type MainWindowXaml = FsXaml.XAML<"MainWindow.xaml">

type MainWindow() as this =
    inherit MainWindowXaml()

    let whenLoaded _ =
        ()

    let whenClosing _ =
        ()

    let whenClosed _ =
        ()

    let btnTestClick _ =
        this.Title <- "Yup, it works!"

    do
        this.Loaded.Add whenLoaded
        this.Closing.Add whenClosing
        this.Closed.Add whenClosed
        this.btnTest.Click.Add btnTestClick

App.xaml

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
    </Application.Resources>
</Application>

App.xaml.fs

namespace FirstDemo

open System

type App = FsXaml.XAML<"App.xaml">

module Main =

    [<STAThread; EntryPoint>]
    let main _ =
        let app = App()
        let mainWindow = new MainWindow()
        app.Run(mainWindow) // Returns application's exit code.

प्रोजेक्ट से Program.fs फ़ाइल हटाएं।

दो xaml फ़ाइलों के लिए संसाधन के लिए बिल्ड क्रिया बदलें।

.NET असेंबली UIAutomationTypes के लिए एक संदर्भ जोड़ें।

संकलित करें और चलाएं।

आप इवेंट हैंडलर जोड़ने के लिए डिज़ाइनर का उपयोग नहीं कर सकते, लेकिन यह कोई समस्या नहीं है। बस उन्हें मैन्युअल रूप से पीछे के कोड में जोड़ें, जैसे कि आप इस उदाहरण में तीन हैंडलर के साथ देखते हैं, जिसमें टेस्ट बटन के लिए हैंडलर भी शामिल है।

अद्यतन: घटना हैंडलर्स को जोड़ने के लिए एक वैकल्पिक और शायद अधिक सुरुचिपूर्ण तरीका FsXaml में जोड़ा गया है। आप XAML में ईवेंट हैंडलर को C # के समान जोड़ सकते हैं, लेकिन आपको इसे मैन्युअल रूप से करना होगा, और फिर उसी सदस्य को ओवरराइड करना होगा जो आपके F # टाइप में आता है। मैं इसकी सलाह देता हूं।

3: एक विंडो में एक आइकन जोड़ें

सभी आइकन और छवियों को एक या अधिक फ़ोल्डरों में रखना एक अच्छा विचार है।

प्रोजेक्ट पर राइट क्लिक करें, और F # Power Tools / New Folder का उपयोग करके Images नाम का फोल्डर बनाएं।

डिस्क पर, अपने आइकन को नए चित्र फ़ोल्डर में रखें।

Visual Studio में वापस, छवियाँ पर राइट क्लिक करें, और Add / मौजूदा आइटम का उपयोग करें , फिर सभी फ़ाइल ( ) ** आइकन फ़ाइल को देखने के लिए दिखाएं ताकि आप इसे चुन सकें, और फिर इसे जोड़ें

आइकन फ़ाइल का चयन करें, और इसकी बिल्ड एक्शन को संसाधन पर सेट करें।

MainWindow.xaml में, इस तरह आइकन विशेषता का उपयोग करें। संदर्भ के लिए आसपास की रेखाएँ दिखाई जाती हैं।

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="First Demo" Height="200" Width="300"
    Icon="Images/MainWindow.ico">
<Canvas>

दौड़ने से पहले, एक पुनर्निर्माण करें, और सिर्फ एक निर्माण न करें। ऐसा इसलिए है क्योंकि Visual Studio हमेशा आइकन फ़ाइल को निष्पादन योग्य में नहीं डालता है जब तक कि आप पुनर्निर्माण नहीं करते हैं।

यह विंडो है, और एप्लिकेशन नहीं है, जिसमें अब एक आइकन है। आपको रनटाइम के दौरान विंडो के ऊपर बाईं ओर आइकन दिखाई देगा, और आप इसे टास्क बार में देखेंगे। टास्क मैनेजर और विंडोज फाइल एक्सप्लोरर इस आइकन को नहीं दिखाएंगे, क्योंकि वे विंडो आइकन के बजाय एप्लिकेशन आइकन प्रदर्शित करते हैं।

4: एप्लिकेशन में आइकन जोड़ें

निम्नलिखित सामग्री के साथ, AppIcon.rc नामक एक पाठ फ़ाइल बनाएँ।

1 ICON "AppIcon.ico"

इसे काम करने के लिए आपको AppIcon.ico नाम की एक आइकन फ़ाइल की आवश्यकता होगी, लेकिन निश्चित रूप से आप अपनी पसंद के अनुसार नामों को समायोजित कर सकते हैं।

निम्न आदेश चलाएँ।

"C:\Program Files (x86)\Windows Kits\10\bin\x64\rc.exe" /v AppIcon.rc

यदि आप इस स्थान पर rc.exe नहीं पा सकते हैं, तो इसे C: \ Program Files (x86) \ Windows Kits के नीचे खोजें । यदि आप अभी भी इसे नहीं ढूंढ पा रहे हैं, तो Microsoft से विंडोज एसडीके डाउनलोड करें।

AppIcon.res नामक एक फ़ाइल जनरेट की जाएगी।

Visual Studio में, प्रोजेक्ट गुण खोलें। एप्लिकेशन पेज चुनें।

संसाधन फ़ाइल शीर्षक वाले पाठ बॉक्स में, AppIcon.res टाइप करें (या Images \ AppIcon.res यदि आप इसे वहां डालते हैं), और फिर सहेजने के लिए प्रोजेक्ट गुण बंद करें।

एक त्रुटि संदेश दिखाई देगा, जिसमें कहा गया है "दर्ज की गई संसाधन फ़ाइल मौजूद नहीं है। इस पर ध्यान न दें। त्रुटि संदेश फिर से प्रकट नहीं होगा।

पुनर्निर्माण। निष्पादन योग्य में तब एक एप्लिकेशन आइकन होगा, और यह फ़ाइल एक्सप्लोरर में दिखाता है। चलाते समय, यह आइकन टास्क मैनेजर में भी दिखाई देगा।

2: एक नियंत्रण जोड़ें

मुख्य विंडो के लिए फ़ाइलों के ऊपर इस क्रम में इन दो फ़ाइलों को जोड़ें।

MyControl.xaml

<UserControl
             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" Height="50" Width="150">
    <Canvas Background="LightGreen">
        <Button Name="btnMyTest" Content="My Test" Canvas.Left="10" Canvas.Top="10" Height="28" Width="106"/>
    </Canvas>
</UserControl>

MyControl.xaml.fs

namespace FirstDemo

type MyControlXaml = FsXaml.XAML<"MyControl.xaml">

type MyControl() =
    inherit MyControlXaml()

MyControl.xaml के लिए बिल्ड एक्शन को संसाधन पर सेट किया जाना चाहिए।

आपको निश्चित रूप से MyControl की घोषणा में "इस रूप में" जोड़ना होगा, जैसा कि मुख्य विंडो के लिए किया गया है।

MainWindow के लिए क्लास में MainWindow.xaml.fs फाइल में, इस लाइन को जोड़ें

let myControl = MyControl()

और इन दो पंक्तियों को मुख्य विंडो क्लास के do -section में जोड़ें।

    this.mainCanvas.Children.Add myControl |> ignore
    myControl.btnMyTest.Content <- "We're in business!"

वहाँ एक से अधिक एक कक्षा में -section करना हो सकता है, और आप जब कोड-पीछे कोड के बहुत सारे लेखन इसकी जरूरत की संभावना है।

नियंत्रण को हल्के हरे रंग की पृष्ठभूमि का रंग दिया गया है, ताकि आप आसानी से देख सकें कि यह कहाँ है।

ध्यान रखें कि नियंत्रण मुख्य विंडो के बटन को देखने से रोक देगा। यह सामान्य रूप से आपको WPF सिखाने के लिए इन उदाहरणों के दायरे से परे है, इसलिए हम इसे यहाँ ठीक नहीं करेंगे।

तीसरे पक्ष के पुस्तकालयों से नियंत्रण कैसे जोड़ें

यदि आप C # WPF प्रोजेक्ट में थर्ड पार्टी लाइब्रेरी से कंट्रोल जोड़ते हैं, तो XAML फाइल में आम तौर पर इस तरह की लाइनें होंगी।

xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

यह शायद FsXaml के साथ काम नहीं करेगा।

डिज़ाइनर और कंपाइलर उस लाइन को स्वीकार करता है, लेकिन शायद XAML को पढ़ते समय 3 पार्टी प्रकार के बारे में शिकायत करने वाले रनटाइम पर एक अपवाद होगा।

इसके बजाय निम्नलिखित की तरह कुछ प्रयास करें।

xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"

यह तब एक नियंत्रण का एक उदाहरण है जो उपरोक्त पर निर्भर करता है।

<xctk:IntegerUpDown Name="tbInput" Increment="1" Maximum="10" Minimum="0" Canvas.Left="13" Canvas.Top="27" Width="270"/>

इस उदाहरण में प्रयुक्त लाइब्रेरी विस्तारित Wpf टूलकिट है, जो NuGet या इंस्टॉलर के माध्यम से नि: शुल्क उपलब्ध है। यदि आप NuGet के माध्यम से पुस्तकालयों को डाउनलोड करते हैं, तो नियंत्रण टूलबॉक्स में उपलब्ध नहीं हैं, लेकिन वे अभी भी डिज़ाइनर में दिखाते हैं यदि आप उन्हें XAML में मैन्युअल रूप से जोड़ते हैं, और गुण गुण फलक में उपलब्ध हैं।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow