ITservice雄飛 プロモーションビデオ

2020年5月4日月曜日

C# WPF(XAML) 超入門!

こんばんは、ITservice雄飛です。

今回は、C#での実演動画を作ってみました。
使用するIDEは、VisualStudio2019、
プロジェクトは、.Net FrameWork(Core)を使いました。

初めてWPF触る方や、私の様に他言語から移った場合、
少なからず悩むと思います。

その、最初の初歩の初歩(Hello Word)をGUIでやってみました。

以下が動画です。

先ず、VisualStudio2019を起動し、WPFプロジェクトを立ち上げます。

アセットから、ボタンを配置します。
で、ボタンをダブルクリックします。

どうでしょうか?
イベントハンドラの生成が上手く行きませんね。

WPFでは、フォーム側とソース側が完全に分かれています。

その為、ソース側とデザイン画面下のコードウインドウで、
XAMLを編集して様々な処理の手続きを行います。

基本は、アセットからフォームに配置して、それを下部のXAMLの編集画面で操作し、様々なイベント等の記述をします。

<Window x:Class="WpfApp7.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:WpfApp7"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Name="Btn1" Click="Btn1_Click"  Content="Button" HorizontalAlignment="Left" Margin="96,113,0,0" VerticalAlignment="Top" Height="90" Width="202" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-9.372"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>
        <Button Name="Btn2" Click="Btn2_Click"  Content="Button" Margin="484,122,175,213" RenderTransformOrigin="0.5,0.5">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="-3.099"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>

    </Grid>
</Window>

このような感じ。
下線部を追加します。
Click="Btn1、Click="Btn2を、コード補完でイベントハンドラを作ります。
デザイナ側はこんな感じです。

次に、コードビハインド(ソースコードエディタ画面)を開きます。


sing System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp7
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        string Hello_s = "Hello,World!";
        
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Btn1_Click(object sender, RoutedEventArgs e)
        {
           //メッセージボックス出します
            System.Windows.MessageBox.Show(Hello_s);
            //メッセージボックスの値を、Btn1のContentに代入します
            Btn1.Content = "OK," + Hello_s;
        }

        private void Btn2_Click(object sender, RoutedEventArgs e)
        {
            //Btn1のContentをBtn2のContentに代入します。
            Btn2.Content = Btn1.Content;
        }
    }
}

コードビハインド側では、この様に記述します。
記述したのは、下線部ですね。

今回は、こんな感じでしょうか?

判ってしまえば簡単で、ソースコードとデザインが、完全に分離されています。
なので、デザインのコード画面で、イベントハンドラとコードビハインドで、
互いにコードレベルで連携しながらソースと画面を連結させていきます。

個人的には、判ってしまえば簡単でいいなと思いました。

次回は、FunctionやProcedureを使ってみたいと思います。

それでは。

0 件のコメント:

コメントを投稿