XAMLとC#を使って簡単なアプリを作成する方法

WPFアプリケーションを開発する場合、画面側はXAMLで、処理側はC#やVB.NETでコーディングすることになります。サンプルコードを参照しながら簡単なアプリケーションの開発を行ってみましょう。

プログラマー

WPFアプリケーションを開発しようと思ってます！画面までは作成できたのですが、C#はどこにコーディングすれば良いんですか？

プロジェクト
マネージャー

初心者の方がよくつまずくところですね。ここでXAMLとC#を使用して、Hello Worldを出力する簡単なアプリケーションを開発しますので参考にしてみてください。

画面に配置したテキストボックスにHello Worldを出力するサンプルコード

1. 画面にボタンを配置します。ツールボックスからボタンとテキストボックスを選択し、ドラッグ＆ドロップで配置します。

   

2. プロパティを利用して、ボタンとテキストボックスに名称を付与します。今回はボタンには「Buttun_test」を、テキストボックスには「Text_test」を付与してサンプルテストを実施します。

   ◆ボタン
   

   ◆テキストボックス
   

3. ボタンの名称を変更したい場合などは、XAMLからも変更することができます。

   

   テキストボックスにHello Worldを出力1（XAML）

   <Window x:Class="WpfApp2.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:WpfApp2" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="20*"/> <ColumnDefinition Width="79*"/> </Grid.ColumnDefinitions> <Button x:Name="Buttun_test" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="76,67,0,0" VerticalAlignment="Top" Width="75" Click="Buttun_test_Click"/> <TextBox x:Name="Text_test" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="76,169,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/> </Grid> </Window>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <Window x:Class="WpfApp2.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:WpfApp2"         mc:Ignorable="d"         Title="MainWindow" Height="450" Width="800">     <Grid>         <Grid.ColumnDefinitions>             <ColumnDefinition Width="20*"/>             <ColumnDefinition Width="79*"/>         </Grid.ColumnDefinitions>         <Button x:Name="Buttun_test" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="76,67,0,0" VerticalAlignment="Top" Width="75" Click="Buttun_test_Click"/>         <TextBox x:Name="Text_test" Grid.Column="1" HorizontalAlignment="Left" Height="23" Margin="76,169,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>       </Grid> </Window>

4. ボタンをクリックした場合の処理をC#でコーディングします。画面に配置したボタンをダブルクリックすると、対象のファイルに遷移し、自動でボタンクリック時の処理が生成されます。

   

5. ボタンクリック処理の中に、テキストボックスにHello Worldを出力する処理をコーディングします。

   

   テキストボックスにHello Worldを出力2

   C#

   using System.Windows; namespace WpfApp2 { /// <summary> /// MainWindow.xaml の相互作用ロジック /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Buttun_test_Click(object sender, RoutedEventArgs e) { Text_test.Text = "Hello World"; } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   using System.Windows;   namespace WpfApp2 {     /// <summary>     /// MainWindow.xaml の相互作用ロジック     /// </summary>     public partial class MainWindow : Window     {         public MainWindow()         {             InitializeComponent();         }           private void Buttun_test_Click(object sender, RoutedEventArgs e)         {             Text_test.Text = "Hello World";         }     } }

6. 最後にビルドを行い、Visual Studioの開始ボタンを押下すると、アプリが起動します。

   

7. ボタンを押下すると、テキストボックスの内容が「Hello World」に変わります。

   

C＃ の案件・求人はこちら

メッセ―ジボックスでHello worldと表示するサンプルコード

1. 上記と同じように画面にボタンを配置してください。

   

2. コーディング対象のファイルを開き、ボタン押下処理に「MessageBox.Show(“Hello world”);」と記述します。

   

3. コーディングが完了後、ビルドを行い実行します。

   

4. ボタンを押下すると、メッセージボックスが表示されます。

   

プログラマー

画面と処理にロジックが分かれていますが、設定した名称でやり取りできるのは簡単ですね。早速、自分でもプログラミングしてみます。

プロジェクト
マネージャー

そうですね。プログラミングは自分でコーディングした方が理解度も深まりますから、どんどん積極的にコーディングしていきましょう。

C＃ の案件・求人はこちら

プログラミング上達の近道は自分でコーディングすること

XAMLとC#を活用してプログラミングをすることは、初心者の方には少し敷居が高いかもしれません。しかし、プログラミング技術を習得するには自分でサンプルプログラムなどを作成することが一番の近道です。Visual Studioを活用して、まずは簡単なアプリケーション作成からでも積極的に行っていきましょう。

C＃ の案件・求人はこちら