WPFのMVVMで電卓づくり（２）

起動時に電卓画面が表示されるようにデザインします

下準備

Visual Studio 2019にて プロジェクトテンプレートは「WPF App(.NET Core)」を使用します

上図はソリューションエクスプローラーの構成です
初期状態ではApp.xamlとMainWindow.xamlが表示されています

MVVM形式で作成するため MainWindow.xamlの
ファイル名をMainView.xaml、クラス名をMainViewに変更しました

併せてApp.xamlにて、ApplicationタグのStartupUriを"MainView.xaml"に設定し
起動時にMain()から呼び出されるクラスをMainView.xamlに変更しました

電卓画面の作成

起動時の挙動の設定が終わりましたので 電卓画面を作成していきます
MainView.xamlを下図のように編集しました

<Window x:Class="Dentaku.MainView"
        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:Dentaku"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!--出力画面の様式-->
        <Style TargetType="TextBlock">
            <Setter Property="TextAlignment" Value="Right"/>
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="FontStyle" Value="Normal"/>
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontFamily" Value="arial"/>
        </Style>
        <!--ボタンの様式-->
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="FontStyle" Value="Normal"/>
            <Setter Property="Background" Value="Black"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontFamily" Value="arial"/>
        </Style>
    </Window.Resources>
    <Grid>
        <!--行数-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <!--列数-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!--出力画面-->
        <TextBlock Grid.ColumnSpan="6" Text=""/>
        <!--数字ボタン-->
        <Button Grid.Row="3" Grid.Column="1" Content="1" />
        <Button Grid.Row="3" Grid.Column="2" Content="2" />
        <Button Grid.Row="3" Grid.Column="3" Content="3" />
        <Button Grid.Row="2" Grid.Column="1" Content="4" />
        <Button Grid.Row="2" Grid.Column="2" Content="5" />
        <Button Grid.Row="2" Grid.Column="3" Content="6" />
        <Button Grid.Row="1" Grid.Column="1" Content="7" />
        <Button Grid.Row="1" Grid.Column="2" Content="8" />
        <Button Grid.Row="1" Grid.Column="3" Content="9" />
        <Button Grid.Row="4" Grid.Column="1" Content="0" />
        <Button Grid.Row="4" Grid.Column="2" Content="00" />
        <!--四則演算ボタン-->
        <Button Grid.Row="3" Grid.Column="4" Content="＋" 
                Grid.RowSpan="2"/>
        <Button Grid.Row="3" Grid.Column="5" Content="－" />
        <Button Grid.Row="2" Grid.Column="4" Content="×" />
        <Button Grid.Row="2" Grid.Column="5" Content="÷" />
        <Button Grid.Row="5" Grid.Column="6" Content="＝" />
    </Grid>
</Window>

起動結果