0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UWP、WPF、Windows フォームでアプリを作成する

Posted at

#自己紹介 と 余談

 こんにちわ。ホワイトハッカーになりたい高校生ですお。
そういえば、ハッカーの定義ってだんだんおかしくなってるよね。
Python、PHP、HTMLは結構できます。VBS、Arduinoはまあまあって感じです。

 Qitta ってこんな感じで編集してるって知らなかったのよ。
しっかりタグも使えるのですね♡

 メモ程度で書いているのでそこまで硬く読まないでください。(そもそも読む人おらんやろって話)

#アプリ作成の基本

 どうやら、Windowsでは簡単にデスクトップアプリを作ることが出来るらしい。
https://docs.microsoft.com/ja-jp/learn/modules/write-your-first-windows10-app/

これから学ぶうえで必要となるものがこれらしい。
 ・最新のリリースの Windows 10 を実行中のコンピューター。
 ・Visual Studio 2017 がインストールされているコンピューター。
 ・C# またはこれに類似するプログラミング言語に関する知識。   ←ないwww

 ここではマイクロソフトのドキュメントに沿って自分に対して解説しながら読み解いて行きます。
ということで進めていきましょう。

#環境

 Windows10 home
 Visual Studio 2019
 ユニバーサルWindowsプラットフォーム開発(拡張)
 .NETデスクトップ環境(拡張)
 ASP.NET と Web 開発(拡張)

 拡張を追加するときは、インストーラーをもう一度開いて「変更」をクリックすることでインストールできます。
拡張についてはよくわかりませんでしたが、将来的に使うだろうということでいろいろ入れときました。

 詳細についてはこちらを参照してください。
https://www.buildinsider.net/enterprise/uwpapp/01

#専門用語 UWP

 参考にした。詳しく書かれていました。
https://www.buildinsider.net/enterprise/uwpapp/01

引用
UWPとは何かというと、マイクロソフトの新しいOSだと思ってほしい。開発者視点では、そう考えておくとスッキリ分かるのだ。

 とりあえずは、ただWindows上にある共通の環境ってことでいいのかな?(違ったら教えてください)

#専門用語 WPF

 マイクロソフト公式のサイトです。使い方などが書かれていました。
https://docs.microsoft.com/ja-jp/visualstudio/designers/getting-started-with-wpf?view=vs-2019

引用
Windows Presentation Foundation (WPF) は、デスクトップ クライアント アプリケーションを作成する UI フレームワークです。 
WPF の開発プラットフォームは、<略>さまざまなアプリケーション開発機能の一式をサポートします。 

 とのことです。実に分かりやすい。
おおざっぱに言うと、GUIを構築するものってことでしょうか?

#GUIハローワールドをする
 こちらに沿ってハローワールドをします。
https://docs.microsoft.com/ja-jp/learn/modules/write-your-first-windows10-app/1-writing-uwp-app

引用
Visual Studio を開き、メニューから [ファイル] > [新規作成] > [プロジェクト] を選択します。 
次に、プロジェクト言語として [Visual C#] を選択します。
次に、[空のアプリ (ユニバーサル Windows)] というプロジェクトの種類を選び、[名前] フィールドに、「SayHello」などのわかりやすい名前を入力します。 
操作が終わったら、[OK] を選択します。

なんか見つからないと思ってましたが、日本語表記になっています。
image.png

 UWPがサポートする最小プラットフォームなんたらこんたら...はそのままの値でやりました。

 こんな感じのが出てくる。
image.png

引用
[ソリューション エクスプローラー] に、操作する 2 つのファイルの名前 (MainPage.xaml と、その分離コード ファイルである MainPage.xaml.cs) が表示されていることを確認します。
 [MainPage.xaml] を選択して開きます。

 自分のはツールボックス(左端)にツールが入っていなかったので追加する
「表示」>「デザイナー」で出てくる

右からMainPage.xamlを選んできて編集します。

 ボタンを作ったら、ボタンのオブジェクトをクリックして、名前とクリックされた時の名前(?)を決める。
要するにそのイベントが起きたら...ってことを書きたいので、そのイベントに名前を付けます。

 テキストボックスも同様に名前をつけてやります。

 右下に雷マークがありますん。それをクリックすると編集できますん。のです。
自分は「Click」を「hello_world_Button_Click」とつけました。
image.png

 次はコードを書いていきます。
C#の知識ゼロですが、ちゃんとできるかな?ドキドキ💓

引用
ここで、UI からアプリのコードに移ります。 ここで、MainPage.xaml.cs ファイルを再び開きます。
 (これを行うには、メイン ビューまたは [ソリューション エクスプローラー] でその名前を選択します。)

 ただ、開きます。
開くとこんな感じでしょう。(修正後の写真)
image.png

 usingステートメントの編集をします。外部リソースを自動開放するそうです。
Pythonでいうところのimport、Cだとincludeですかね~?

引用
必要な using ステートメントがすべてあることを確認しましょう。 
以下のものがあることを確認し、ない場合はそれを追加します。 
特に、using Windows.UI; ステートメントがあることを確認します。 
必要に応じて、プロジェクトの作成時に Visual Studio によって追加された不要な using ステートメントを削除できます。
 (未使用の名前空間は灰色で表示されます。)

 自分のコードには「using Windows.UI;」が欠如していましたので、修正しました(上の写真)
その結果です。

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

アプリケーションのメインとなる「ボタンをクリックされたときに何かをする」という制御するお。

引用
アプリでは、ボタンが選択されるたびに hello テキストがランダムな色で レンダリングされます。
そのため、グローバルな Random オブジェクトと、RGB 設定として使用される値をランダムに入力する GetRandomBytes メソッドを追加する必要があります。 
次のコードをコピーして貼り付けるか、自分で入力して、MainPage クラス が次のようになるようにします。
MainPage.xaml.cs
namespace helloworld
{
    public sealed partial class MainPage : Page    //ここのクラス以外からは見えなくする
    {
        Random rand;
        public MainPage()
        {
            this.InitializeComponent();
            rand = new Random();    //変数生成
        }

        private byte[] GetRandomBytes(int n)    //関数GetRandomBytes
        {
            var randomBytes = new byte[n];    //バイト単位の配列を"n"にランダムな数として入れる
            rand.NextBytes(randomBytes);    //randomBytesとして乱数を生成する
            return randomBytes;    //randomBytesを返す
        }

        private void Button_Click(object sender, RoutedEventArgs e)    //ボタンがクリックされた時の処理
        {    //いまはhello_world_Button_Clickが起こった時の処理をしたいから使わない
        }    //何個かボタンがあって押されたら全部同じ動きをするときとかに使う

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

 最後にクリックされた時の挙動を制御します。
private void hello_world_Button_Click(object sender, RoutedEventArgs e)の中に書き加えるだけです。

MainPage.xaml.cs
namespace helloworld
{
    public sealed partial class MainPage : Page    //ここのクラス以外からは見えなくする
    {
        Random rand;
        public MainPage()
        {
            this.InitializeComponent();
            rand = new Random();    //変数生成
        }

        private byte[] GetRandomBytes(int n)    //関数GetRandomBytes
        {
            var randomBytes = new byte[n];    //バイト単位の配列を"n"にランダムな数として入れる
            rand.NextBytes(randomBytes);    //randomBytesとして乱数を生成する
            return randomBytes;    //randomBytesを返す
        }

        private void Button_Click(object sender, RoutedEventArgs e)    //ボタンがクリックされた時の処理
        {    //いまはhello_world_Button_Clickが起こった時の処理をしたいから使わない
        }    //何個かボタンがあって押されたら全部同じ動きをするときとかに使う

        private void hello_world_Button_Click(object sender, RoutedEventArgs e)    //hello_world_Button_Clickが起こった時の処理
        {
            byte[] rgb = GetRandomBytes(3);    //関数GetRandomBytesを引数3で呼び出す。
            var randomColorBrush = new SolidColorBrush(Color.FromArgb( 255, rgb[0], rgb[1], rgb[2]) );    //変数SolidColorBrushを作成する
            textbox1.BorderBrush = randomColorBrush;    //テキストの色を変更
            textbox1.Foreground = randomColorBrush;    //テキストの背景を変更
        }
    }
}

 最終的に全体像はこんな感じです。
image.png

 最後に実行しようよー!この瞬間がドキドキしますよね~

引用
Visual Studio で、[デバッグ] メニューから [デバッグなしで開始] を選択します<省略>。
または単純に F5 キーを選択します。 

 っす、すごい!超簡単に完成しました。
なんらかんら4時間近くはかかったけど、記事書くのに正直、半分くらいかけてたから実質2時間!
2時間でC#習得しましたwww
image.png

#振り返り
 初めてにしては濃い内容を提供できたと自負します。
コードでもないのに文章がとっ散らかっていて、頭の悪さが見え見えですwww

 これからこんな感じで勉強を進めながら記事を書きますということをメモしました。
「これからこんな感じで勉強を進めながら記事を書きますメモ」です。名前かわいくない?

「これからこんな感じで勉強を進めながら記事を書きますメモ」
・Pythonの基本文法
・Selemiumでなんたらこんたら、自動化 Python版
・Selemiumでなんたらこんたら、自動化 C版
・C#の基本文法
・PHPの基本文法
・Webアプリ関係
・アプリ開発をしてみる的ななにか
・コードインジェクション
・BOF
・マルウェア解析
・Webアプリの脆弱制解析 DVWAとか
・Kali使って遊んでみた的な何か
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?