F#
Verwenden von F #, WPF, FsXaml, einem Menü und einem Dialogfeld

Einführung

Richten Sie das Projekt ein

Wir gehen davon aus, dass Sie dies in Visual Studio 2015 tun (in meinem Fall in der VS 2015-Community). Erstellen Sie ein leeres Konsolenprojekt in VS. In Projekt | Eigenschaften ändern den Ausgabetyp in Windows-Anwendung.

Verwenden Sie als Nächstes NuGet, um FsXaml.Wpf zum Projekt hinzuzufügen. Dieses Paket wurde vom geschätzten Reed Copsey Jr. erstellt und vereinfacht die Verwendung von WPF von F # erheblich. Bei der Installation werden eine Reihe weiterer WPF-Assemblys hinzugefügt, sodass Sie dies nicht tun müssen. Es gibt andere ähnliche Pakete zu FsXaml, aber eines meiner Ziele bestand darin, die Anzahl der Tools so gering wie möglich zu halten, um das Gesamtprojekt so einfach und wartbar wie möglich zu gestalten.

Fügen Sie außerdem UIAutomationTypes als Referenz hinzu. es kommt als Teil von .NET.

Fügen Sie die "Geschäftslogik" hinzu

Vermutlich wird Ihr Programm etwas tun. Fügen Sie Ihrem Projekt Ihren Arbeitscode anstelle von Program.fs hinzu. In diesem Fall ist es unsere Aufgabe, Spirographenkurven auf einem Fensterbereich zu zeichnen. Dies wird mit Spirograph.fs unten erreicht.

namespace Spirograph

// open System.Windows does not automatically open all its sub-modules, so we 
// have to open them explicitly as below, to get the resources noted for each.
open System                             // for Math.PI
open System.Windows                     // for Point
open System.Windows.Controls            // for Canvas
open System.Windows.Shapes              // for Ellipse
open System.Windows.Media               // for Brushes

// ------------------------------------------------------------------------------
// This file is first in the build sequence, so types should be defined here
type DialogBoxXaml  = FsXaml.XAML<"DialogBox.xaml">
type MainWindowXaml = FsXaml.XAML<"MainWindow.xaml">
type App            = FsXaml.XAML<"App.xaml"> 

// ------------------------------------------------------------------------------
// Model: This draws the Spirograph
type MColor = | MBlue   | MRed | MRandom

type Model() =
  let mutable myCanvas: Canvas = null
  let mutable myR              = 220    // outer circle radius
  let mutable myr              = 65     // inner circle radius
  let mutable myl              = 0.8    // pen position relative to inner circle
  let mutable myColor          = MBlue  // pen color
  
  let rng                      = new Random()
  let mutable myRandomColor    = Color.FromRgb(rng.Next(0, 255) |> byte,
                                               rng.Next(0, 255) |> byte,
                                               rng.Next(0, 255) |> byte)

  member this.MyCanvas
    with get() = myCanvas
    and  set(newCanvas) = myCanvas <- newCanvas

  member this.MyR
    with get() = myR
    and  set(newR) = myR <- newR

  member this.Myr
    with get() = myr
    and  set(newr) = myr <- newr

  member this.Myl
    with get() = myl
    and  set(newl) = myl <- newl

  member this.MyColor
    with get() = myColor
    and  set(newColor) = myColor <- newColor

  member this.Randomize =
    // Here we randomize the parameters. You can play with the possible ranges of
    // the parameters to find randomized spirographs that are pleasing to you.
    this.MyR      <- rng.Next(100, 500)
    this.Myr      <- rng.Next(this.MyR / 10, (9 * this.MyR) / 10)
    this.Myl      <- 0.1 + 0.8 * rng.NextDouble()
    this.MyColor  <- MRandom
    myRandomColor <- Color.FromRgb(rng.Next(0, 255) |> byte,
                                   rng.Next(0, 255) |> byte,
                                   rng.Next(0, 255) |> byte)

  member this.DrawSpirograph =
    // Draw a spirograph. Note there is some fussing with ints and floats; this 
    // is required because the outer and inner circle radii are integers. This is
    // necessary in order for the spirograph to return to its starting point 
    // after a certain number of revolutions of the outer circle.
    
    // Start with usual recursive gcd function and determine the gcd of the inner
    // and outer circle radii. Everything here should be in integers.
    let rec gcd x y =
        if y = 0 then x
        else gcd y (x % y)
  
    let g = gcd this.MyR this.Myr             // find greatest common divisor
    let maxRev = this.Myr / g                 // maximum revs to repeat

    // Determine width and height of window, location of center point, scaling 
    // factor so that spirograph fits within the window, ratio of inner and outer
    // radii.
    
    // Everything from this point down should be float.
    let width, height = myCanvas.ActualWidth, myCanvas.ActualHeight
    let cx, cy = width / 2.0, height / 2.0    // coordinates of center point
    let maxR   = min cx cy                    // maximum radius of outer circle
    let scale  = maxR / float(this.MyR)             // scaling factor
    let rRatio = float(this.Myr) / float(this.MyR)  // ratio of the radii

    // Build the collection of spirograph points, scaled to the window.
    let points = new PointCollection()
    for degrees in [0 .. 5 .. 360 * maxRev] do
      let angle = float(degrees) * Math.PI / 180.0
      let x, y = cx + scale * float(this.MyR) *
                 ((1.0-rRatio)*Math.Cos(angle) +
                  this.Myl*rRatio*Math.Cos((1.0-rRatio)*angle/rRatio)),
                 cy + scale * float(this.MyR) *
                 ((1.0-rRatio)*Math.Sin(angle) - 
                  this.Myl*rRatio*Math.Sin((1.0-rRatio)*angle/rRatio))
      points.Add(new Point(x, y))
  
    // Create the Polyline with the above PointCollection, erase the Canvas, and 
    // add the Polyline to the Canvas Children
    let brush = match this.MyColor with
                | MBlue   -> Brushes.Blue
                | MRed    -> Brushes.Red
                | MRandom -> new SolidColorBrush(myRandomColor)
  
    let mySpirograph = new Polyline()
    mySpirograph.Points <- points
    mySpirograph.Stroke <- brush

    myCanvas.Children.Clear()
    this.MyCanvas.Children.Add(mySpirograph) |> ignore

Spirograph.fs ist die erste F # -Datei in der Kompilierreihenfolge. Sie enthält also die Definitionen der benötigten Typen. Seine Aufgabe ist es, ein Spirograph auf der Leinwand auf der Grundlage der in einem Dialogfeld eingegebenen Parameter zu zeichnen. Da es viele Hinweise zum Zeichnen eines Spirographen gibt, gehen wir hier nicht darauf ein.

Erstellen Sie das Hauptfenster in XAML

Sie müssen eine XAML-Datei erstellen, die das Hauptfenster definiert, das unser Menü und den Zeichenbereich enthält. Hier ist der XAML-Code in MainWindow.xaml:

<!-- This defines the main window, with a menu and a canvas. Note that the Height
     and Width are overridden in code to be 2/3 the dimensions of the screen -->
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Spirograph" Height="200" Width="300">
    <!-- Define a grid with 3 rows: Title bar, menu bar, and canvas. By default
         there is only one column -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <!-- Define the menu entries -->
        <Menu  Grid.Row="0">
            <MenuItem Header="File">
                <MenuItem Header="Exit"
                          Name="menuExit"/>
            </MenuItem>
            <MenuItem Header="Spirograph">
                <MenuItem Header="Parameters..."
                          Name="menuParameters"/>
                <MenuItem Header="Draw"
                          Name="menuDraw"/>
            </MenuItem>
            <MenuItem Header="Help">
                <MenuItem Header="About"
                          Name="menuAbout"/>
            </MenuItem>
        </Menu>
        <!-- This is a canvas for drawing on. If you don't specify the coordinates
             for Left and Top you will get NaN for those values -->
        <Canvas Grid.Row="1" Name="myCanvas" Left="0" Top="0">
        </Canvas>
    </Grid>
</Window>

Kommentare sind normalerweise nicht in XAML-Dateien enthalten, was ich für einen Fehler halte. Ich habe allen XAML-Dateien in diesem Projekt einige Kommentare hinzugefügt. Ich behaupte nicht, dass dies die besten Kommentare sind, die jemals geschrieben wurden, aber sie zeigen zumindest, wie ein Kommentar formatiert werden sollte. Beachten Sie, dass geschachtelte Kommentare in XAML nicht zulässig sind.

Erstellen Sie das Dialogfeld in XAML und F #

Die XAML-Datei für die Spirograph-Parameter befindet sich unten. Es enthält drei Textfelder für die Spirograph-Parameter und eine Gruppe von drei Optionsfeldern für Farbe. Wenn wir Optionsfeldern den gleichen Gruppennamen zuweisen, übernimmt WPF das Ein- und Ausschalten, wenn ausgewählt wird.

<!-- This first part is boilerplate, except for the title, height and width.
     Note that some fussing with alignment and margins may be required to get
     the box looking the way you want it. -->
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Parameters" Height="200" Width="250">
    <!-- Here we define a layout of 3 rows and 2 columns below the title bar -->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!-- Define a label and a text box for the first three rows. Top row is
             the integer radius of the outer circle -->
        <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" 
                    Grid.ColumnSpan="2">
            <Label VerticalAlignment="Top" Margin="5,6,0,1" Content="R: Outer" 
                   Height="24" Width='65'/>
            <TextBox x:Name="radiusR"  Margin="0,0,0,0.5" Width="120" 
                     VerticalAlignment="Bottom" Height="20">Integer</TextBox>
        </StackPanel>
        <!-- This defines a label and text box for the integer radius of the
             inner circle -->
        <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="1" 
                    Grid.ColumnSpan="2">
            <Label VerticalAlignment="Top" Margin="5,6,0,1" Content="r: Inner" 
                   Height="24" Width='65'/>
            <TextBox x:Name="radiusr"  Margin="0,0,0,0.5" Width="120" 
                     VerticalAlignment="Bottom" Height="20" Text="Integer"/>
        </StackPanel>
        <!-- This defines a label and text box for the float ratio of the inner
             circle radius at which the pen is positioned -->
        <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="2" 
                    Grid.ColumnSpan="2">
            <Label VerticalAlignment="Top" Margin="5,6,0,1" Content="l: Ratio" 
                   Height="24" Width='65'/>
            <TextBox x:Name="ratiol"  Margin="0,0,0,1" Width="120" 
                     VerticalAlignment="Bottom" Height="20" Text="Float"/>
        </StackPanel>
        <!-- This defines a radio button group to select color -->
        <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="3" 
                    Grid.ColumnSpan="2">
            <Label VerticalAlignment="Top" Margin="5,6,4,5.333" Content="Color" 
                   Height="24"/>
            <RadioButton x:Name="buttonBlue" Content="Blue" GroupName="Color" 
                         HorizontalAlignment="Left"  VerticalAlignment="Top"
                         Click="buttonBlueClick"
                         Margin="5,13,11,3.5" Height="17"/>
            <RadioButton x:Name="buttonRed"  Content="Red"  GroupName="Color" 
                         HorizontalAlignment="Left" VerticalAlignment="Top"
                         Click="buttonRedClick"
                         Margin="5,13,5,3.5" Height="17" />
            <RadioButton x:Name="buttonRandom"  Content="Random"  
                         GroupName="Color" Click="buttonRandomClick"
                         HorizontalAlignment="Left" VerticalAlignment="Top"
                         Margin="5,13,5,3.5" Height="17" />
        </StackPanel>
        <!-- These are the standard OK/Cancel buttons -->
        <Button Grid.Row="4" Grid.Column="0" Name="okButton" 
                Click="okButton_Click" IsDefault="True">OK</Button>
        <Button Grid.Row="4" Grid.Column="1" Name="cancelButton" 
                IsCancel="True">Cancel</Button>
    </Grid>
</Window>

Jetzt fügen wir den Code für die Dialog.Box hinzu. Der Code, der für die Behandlung der Schnittstelle des Dialogfelds mit dem Rest des Programms verwendet wird, heißt standardmäßig XXX.xaml.fs, wobei die zugehörige XAML-Datei XXX.xaml heißt.

namespace Spirograph

open System.Windows.Controls

type DialogBox(app: App, model: Model, win: MainWindowXaml) as this =
  inherit DialogBoxXaml()

  let myApp   = app
  let myModel = model
  let myWin   = win
  
  // These are the default parameters for the spirograph, changed by this dialog
  // box
  let mutable myR = 220                 // outer circle radius
  let mutable myr = 65                  // inner circle radius
  let mutable myl = 0.8                 // pen position relative to inner circle
  let mutable myColor = MBlue           // pen color

  // These are the dialog box controls. They are initialized when the dialog box
  // is loaded in the whenLoaded function below.
  let mutable RBox: TextBox = null
  let mutable rBox: TextBox = null
  let mutable lBox: TextBox = null

  let mutable blueButton: RadioButton   = null
  let mutable redButton: RadioButton    = null
  let mutable randomButton: RadioButton = null

  // Call this functions to enable or disable parameter input depending on the
  // state of the randomButton. This is a () -> () function to keep it from
  // being executed before we have loaded the dialog box below and found the
  // values of TextBoxes and RadioButtons.
  let enableParameterFields(b: bool) = 
    RBox.IsEnabled <- b
    rBox.IsEnabled <- b
    lBox.IsEnabled <- b

  let whenLoaded _ =
    // Load and initialize text boxes and radio buttons to the current values in 
    // the model. These are changed only if the OK button is clicked, which is 
    // handled below. Also, if the color is Random, we disable the parameter
    // fields.
    RBox <- this.FindName("radiusR") :?> TextBox
    rBox <- this.FindName("radiusr") :?> TextBox
    lBox <- this.FindName("ratiol")  :?> TextBox

    blueButton   <- this.FindName("buttonBlue")   :?> RadioButton
    redButton    <- this.FindName("buttonRed")    :?> RadioButton
    randomButton <- this.FindName("buttonRandom") :?> RadioButton

    RBox.Text <- myModel.MyR.ToString()
    rBox.Text <- myModel.Myr.ToString()
    lBox.Text <- myModel.Myl.ToString()

    myR <- myModel.MyR
    myr <- myModel.Myr
    myl <- myModel.Myl
  
    blueButton.IsChecked   <- new System.Nullable<bool>(myModel.MyColor = MBlue)
    redButton.IsChecked    <- new System.Nullable<bool>(myModel.MyColor = MRed)
    randomButton.IsChecked <- new System.Nullable<bool>(myModel.MyColor = MRandom)
   
    myColor <- myModel.MyColor
    enableParameterFields(not (myColor = MRandom))

  let whenClosing _ =
    // Show the actual spirograph parameters in a message box at close. Note the 
    // \n in the sprintf gives us a linebreak in the MessageBox. This is mainly
    // for debugging, and it can be deleted.
    let s = sprintf "R = %A\nr = %A\nl = %A\nColor = %A" 
                    myModel.MyR myModel.Myr myModel.Myl myModel.MyColor
    System.Windows.MessageBox.Show(s, "Spirograph") |> ignore
    ()
  
  let whenClosed _ =
    () 
  
  do 
    this.Loaded.Add whenLoaded
    this.Closing.Add whenClosing
    this.Closed.Add whenClosed

  override this.buttonBlueClick(sender: obj, 
                                eArgs: System.Windows.RoutedEventArgs) =
    myColor <- MBlue
    enableParameterFields(true)
    () 
  
  override this.buttonRedClick(sender: obj, 
                               eArgs: System.Windows.RoutedEventArgs) =
    myColor <- MRed      
    enableParameterFields(true)
    () 
  
  override this.buttonRandomClick(sender: obj, 
                                  eArgs: System.Windows.RoutedEventArgs) =
    myColor <- MRandom
    enableParameterFields(false)
    () 
  
  override this.okButton_Click(sender: obj,
                               eArgs: System.Windows.RoutedEventArgs) =
    // Only change the spirograph parameters in the model if we hit OK in the 
    // dialog box.
    if myColor = MRandom
    then myModel.Randomize
    else myR <- RBox.Text |> int
         myr <- rBox.Text |> int
         myl <- lBox.Text |> float

         myModel.MyR   <- myR
         myModel.Myr   <- myr
         myModel.Myl   <- myl
         model.MyColor <- myColor

    // Note that setting the DialogResult to nullable true is essential to get
    // the OK button to work.
    this.DialogResult <- new System.Nullable<bool> true         
    () 

Ein Großteil des Codes dient dazu, sicherzustellen, dass die Spirograph-Parameter in Spirograph.fs mit denen in diesem Dialogfeld übereinstimmen. Beachten Sie, dass keine Fehlerprüfung erfolgt: Wenn Sie einen Gleitkommawert für die in den beiden oberen Parameterfeldern erwarteten Ganzzahlen eingeben, stürzt das Programm ab. Bitte fügen Sie Fehlerprüfung in Ihren eigenen Aufwand hinzu.

Beachten Sie auch, dass die Parametereingabefelder deaktiviert sind. In den Optionsschaltflächen wird die Farbe Zufällig ausgewählt. Es ist hier nur um zu zeigen, wie es geht.

Um Daten zwischen dem Dialogfeld und dem Programm hin und her zu verschieben, benutze ich System.Windows.Element.FindName (), um das entsprechende Steuerelement zu suchen, um es in das Steuerelement umzuwandeln, das es sein soll, und dann die entsprechenden Einstellungen von der Steuerung. Die meisten anderen Beispielprogramme verwenden Datenbindung. Ich habe es aus zwei Gründen nicht getan: Erstens konnte ich nicht herausfinden, wie ich es schaffen kann, und zweitens bekam ich, wenn es nicht funktionierte, keine Fehlermeldung. Vielleicht kann mir jemand, der dies auf StackOverflow besucht, erklären, wie die Datenbindung verwendet wird, ohne eine ganze Reihe neuer NuGet-Pakete hinzuzufügen.

Fügen Sie den Code hinter MainWindow.xaml hinzu

namespace Spirograph

type MainWindow(app: App, model: Model) as this =
  inherit MainWindowXaml()

  let myApp   = app
  let myModel = model
  
  let whenLoaded _ =
    ()
  
  let whenClosing _ =
    ()
  
  let whenClosed _ =
    () 
  
  let menuExitHandler _ = 
    System.Windows.MessageBox.Show("Good-bye", "Spirograph") |> ignore
    myApp.Shutdown()
    () 
  
  let menuParametersHandler _ = 
    let myParametersDialog = new DialogBox(myApp, myModel, this)
    myParametersDialog.Topmost <- true
    let bResult = myParametersDialog.ShowDialog()
    myModel.DrawSpirograph
    () 
  
  let menuDrawHandler _ = 
    if myModel.MyColor = MRandom then myModel.Randomize
    myModel.DrawSpirograph
    () 
  
  let menuAboutHandler _ = 
    System.Windows.MessageBox.Show("F#/WPF Menus & Dialogs", "Spirograph") 
    |> ignore
    () 
  
  do          
    this.Loaded.Add whenLoaded
    this.Closing.Add whenClosing
    this.Closed.Add whenClosed
    this.menuExit.Click.Add menuExitHandler
    this.menuParameters.Click.Add menuParametersHandler
    this.menuDraw.Click.Add menuDrawHandler
    this.menuAbout.Click.Add menuAboutHandler

Hier ist nicht viel los: Wir öffnen bei Bedarf das Dialogfeld "Parameter" und können den Spirographen mit den aktuellen Parametern neu zeichnen.

Fügen Sie App.xaml und App.xaml.fs hinzu, um alles miteinander zu verknüpfen

<!-- All boilerplate for now -->
<Application 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"               
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      
    <Application.Resources>      
    </Application.Resources>  
</Application>

Hier ist der Code dahinter:

namespace Spirograph

open System  
open System.Windows 
open System.Windows.Controls

module Main = 
  [<STAThread; EntryPoint>]
  let main _ =
    // Create the app and the model with the "business logic", then create the
    // main window and link its Canvas to the model so the model can access it.
    // The main window is linked to the app in the Run() command in the last line.
    let app = App()
    let model = new Model()
    let mainWindow = new MainWindow(app, model) 
    model.MyCanvas <- (mainWindow.FindName("myCanvas") :?> Canvas)         
    
    // Make sure the window is on top, and set its size to 2/3 of the dimensions 
    // of the screen.
    mainWindow.Topmost <- true
    mainWindow.Height  <- 
      (System.Windows.SystemParameters.PrimaryScreenHeight * 0.67)
    mainWindow.Width   <- 
      (System.Windows.SystemParameters.PrimaryScreenWidth * 0.67) 
    
    app.Run(mainWindow) // Returns application's exit code.

App.xaml ist hier nur eine Zwischenablage, hauptsächlich um zu zeigen, wo Anwendungsressourcen wie Icons, Grafiken oder externe Dateien deklariert werden können. Der Begleiter App.xaml.fs fasst Model und MainWindow zusammen, formatiert MainWindow auf zwei Drittel der verfügbaren Bildschirmgröße und führt es aus.

Wenn Sie dies erstellen, müssen Sie sicherstellen, dass die Build-Eigenschaft für jede XAML-Datei auf Resource gesetzt ist. Dann können Sie entweder den Debugger ausführen oder eine Exe-Datei erstellen. Beachten Sie, dass Sie dies nicht mit dem F # -Interpreter ausführen können: Das FsXaml-Paket und der Interpreter sind nicht kompatibel.

Hier hast du es. Ich hoffe, Sie können dies als Ausgangspunkt für Ihre eigenen Anwendungen nutzen und können dadurch Ihr Wissen über das hier gezeigte hinaus erweitern. Alle Anmerkungen und Vorschläge werden geschätzt.