WPF Graphics: Drawing a square using code behind

This entry is part 7 of 8 in the series WPF Graphics

Notice in the code below, how the rectangle class was created.  Once the rect class is defined, we can define the Stroke and the Fill color.

MainWindow.xaml.cs:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

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

            System.Windows.Shapes.Rectangle rect;

            rect = new System.Windows.Shapes.Rectangle();
            rect.Stroke = new SolidColorBrush(Colors.Black);
            rect.Fill = new SolidColorBrush(Colors.AliceBlue);
            rect.Width = 200;
            rect.Height = 200;
            Canvas.SetLeft(rect, 0);
            Canvas.SetTop(rect, 0);
            canvas.Children.Add(rect);
        }
    }
}

MainWindow.xaml:

<Window x:Class="WpfApplication13.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:WpfApplication13"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="200" Width="200" Name="canvas" Grid.Row="1" Grid.Column="0">
    </Canvas>
</Window>

square_c

Drawing line, circle and rectangle

This is a relatively simple JavaFX program that draws out a line, a circle and a rectangle.

package javafxapplication7;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class JavaFXApplication7 extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        initUI(primaryStage);
    }

    public void initUI(Stage stage) {
        Pane root = new Pane();

        Rectangle rect = new Rectangle(50, 100, 100, 100);
        rect.setFill(Color.CADETBLUE);

        Line line = new Line(90, 40, 300, 40);
        line.setStroke(Color.BLACK);

        Circle circle = new Circle(230, 230, 30);
        circle.setFill(Color.CHOCOLATE);

        root.getChildren().addAll(rect, line, circle);

        Scene scene = new Scene(root, 400, 300, Color.WHITESMOKE);

        stage.setTitle("Absolute layout");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

drawing

JavaFX: Putting drawings into group

This entry is part 49 of 55 in the series JavaFX

A group is an ObservableList and will take on the collective bounds of its children and is not directly resizable.

In another words, will will be able to set the absolute positions of the drawings if we put them into group.  So this allows us to better control the positions of the drawings.

package drawing;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

public class Drawing extends Application {

    @Override
    public void start(Stage stage) {

        Group group = new Group();

        Rectangle rect = new Rectangle(150, 100, 200, 150);
        rect.setStroke(Color.BLACK);
        rect.setFill(null);
        rect.setStrokeWidth(1);
        group.getChildren().add(rect);

        Circle circle = new Circle(150, 250, 75);
        circle.setStroke(Color.BLACK);
        circle.setFill(null);
        circle.setStrokeWidth(3);
        group.getChildren().add(circle);

        Scene scene = new Scene(group, 400, 400);
        stage.setScene(scene);
        stage.setTitle("Codecrawl.com");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

group

 

WPF: Creating overlapping rectangles using canvas

This entry is part 53 of 54 in the series Learn WPF

The following example produces three Rectangle elements, each element 100 pixels. The first Rectangle is red, and its upper-left (x, y) position is specified as (0, 0). The second Rectangle is green, and its upper-left position is (100, 100), which is just below, and to the right of, the first square. The third Rectangle is blue, and its upper-left position is (50, 50).

MainWindow.xaml
<Window x:Class="Ellipse.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas Height="400" Width="400">
        <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
        <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
        <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
    </Canvas>
</Window>

canvas_rect

 

 

HTML5 Canvas: Drawing and styling a rectangle or square in a canvas

This entry is part 4 of 17 in the series HTML5 Canvas

Using fillRect(pos-x, pos-y, width, height), we can draw a rectangle or square.

This next example will create a 100 pixel by 100 pixel square and place it in the top-left corner
(0,0) of the canvas

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas rectangle</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.fillStyle='red';
    canvas.fillRect(0, 0, 100, 100);
</script>
</body>
</html>

The canvas.fillStyle=’red’ will fill the square red.