WPF εφαρμογή σχεδίασης γωνιών με C# (μέρος 1/2)

WPF εφαρμογή σχεδίασης γωνιών

Σε αυτό το άρθρο – οδηγό, θα δημιουργήσουμε μια WPF εφαρμογή σχεδίασης γωνιών. Αυτή η εφαρμογή θα παίρνει μια τιμή σε μοίρες από τον χρήστη και θα εμφανίζει ένα καινούριο παράθυρο στο οποίο θα σχεδιάζει:

Τροχιά πρώτου πλανήτη (εσωτερική).
Τροχιά δεύτερου πλανήτη (εξωτερική).
Το άστρο του ηλιακού συστήματος.
Την θέση του πρώτου πλανήτη (εσωτερικού).
Την θέση του δεύτερου πλανήτη (εξωτερικού).
Την γωνία μεταξύ εσωτερικού πλανήτη, άστρου και εξωτερικού πλανήτη.
Το εσωτερικό τόξο της γωνίας.

Μπορείτε να κατεβάσετε τον πηγαίο κώδικα τις εφαρμογής από εδώ.

WPF εφαρμογή σχεδίασης γωνιών: Κατασκευή του UI μέσω XAML.

Για τις ανάγκες αυτού του οδηγού θα κατασκευάσουμε ένα απλό περιβάλλον χρήστη μέσω της γλώσσας XAML που χρησιμοποιούν οι WPF εφαρμογές.

Το περιβάλλον αυτό θα αποτελείται από 2 παράθυρα (Window). Στο πρώτο (αρχικό) παράθυρο θα δημιουργήσουμε ένα πλέγμα (Grid), μια στοίβα (StackPanel), ένα control εισαγωγής κειμένου (Textbox) και ένα κουμπί (Button). Στο δεύτερο παράθυρο θα δημιουργήσουμε μόνο ένα control για σχεδιασμό (Canvas), όλα τα υπόλοιπα controls θα τα δημιουργούμε με την C# όποτε ο χρήστης πατάει το κουμπί .

Για το πρώτο παράθυρο

<Window x:Class="Phase_Angle_Drawing.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Phase_Angle_Drawing"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="350">
    <Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        
        <TextBox x:Name="textBox" 
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Height="23" Width="5"  MinWidth="140"
                 HorizontalContentAlignment="Center"
                 VerticalContentAlignment="Center" />
        
        <Button x:Name="button" Content="Draw the angle" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center"
                Height="18" MinHeight="23"
                Click="button_Click"/>

    </StackPanel>
    </Grid>
</Window>

Το αποτέλεσμα του παραπάνω κώδικα είναι αυτό:

Για το δεύτερο παράθυρο

<Window x:Class="Phase_Angle_Drawing.PhaseAngleWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Phase_Angle_Drawing"
        mc:Ignorable="d"  Height="650" Width="650"
        Title="PhaseAngleWindow" ResizeMode="NoResize" Background="Black">
    <Canvas x:Name="DrawCanvas" Width="600" Height="600" >
        
    </Canvas>
</Window>

Το αποτέλεσμα του παραπάνω κώδικα είναι αυτό (μαύρος καμβάς της εφαρμοφής):

WPF εφαρμογή σχεδίασης γωνιών: Χτίσιμο κώδικα C#

Δημιουργούμε το event που θα ενεργοποιείται κατά το πάτημα του κουμπιού

private void button_Click(object sender, RoutedEventArgs e)
{
}

Μέσα στο παραπάνω event γράφουμε όλο το υπόλοιπο κομμάτι κώδικα.

Δημιουργούμαι ένα καινουριο παράθυρο του ίδιου τύπου με αυτό που δημιουργήσαμε στην XAML και ορίζουμε τις μεταβλητές που θα κρατάνε:

Την γωνία ρε Radiants
Την γωνία σε μοίρες
Το ύψος του κανβά
Το πλάτος του κανβά
Την εισαγωγή του χρήστη

Επιπλέον ελέγχουμε την εισαγωγή του χρήστη για τυχόν λανθασμένα δεδομένα με την μέθοδο TryParse() και μετατρέπουμε την γωνία σε radiants από μοίρες.

PhaseAngleWindow window = new PhaseAngleWindow();
double angle, AngleDegrees;
double output = 0;
double WindowWidth = window.DrawCanvas.Width;
double WindowHeight = window.DrawCanvas.Height;

double.TryParse(textBox.Text, out output);
AngleDegrees = output;
angle = AngleDegrees * Math.PI / 180;//convert to rads

Στο επόμενο μέρος αυτό του οδηγού θα παρακολουθήσουμε την δημιουργία μέσο C# όλων των υπόλοιπων Controls που θα προστεθούν στον Canvas του δευτέρου παραθύρου.

WPF εφαρμογή σχεδίασης γωνιών με C# (μέρος 1/2)