Tool

ウインドウにツールを貼り付ける方法を説明します。
ツールボックスから Tool を選択して張り付ける方法と、直接ソースコードを編集する方法があります。
ツールの貼り付けは C# と C/C++ は同じ要領です。

前田稔の超初心者のプログラム入門

ツールボックスから張り付ける

  1. ツールボックスから Button を張り付けます。
    1. ソリューションエクスプローラーの MainPage.xaml をダブルクリックしてデザイン画面を表示します。
      ツールボックスから Button をダブルクリック(またはドラッグ)してウインドウに貼り付けます。
      ウインドウに貼り付けられた Button をマウスで操作して位置とサイズを整えます。
      画像が小さいときは、倍率を大きくして下さい。

    2. Visual Studio によっては、ツールを抜粋して表示している場合があります。
      ツールが見つからない時は[>>アセット]をクリックするとツールボックスの一覧が表示されます。
      一覧から見つからない時は、検索ボックスに例えば "Image" とタイプします。
      目的のツールをダブルクリックすると、アセットの下にコピーされます。
      コピーされたツールをダブルクリックまたはドラッグで張り付けて位置とサイズを整えます。

    3. 一般的に Button をクリックするとイベントが発生します。
      イベントの設定は Button を選択して稲妻アイコンをクリックします。
      Click にイベントハンドラの名前をタイプすると MainPage.xaml.cs に関数が追加されます。

  2. ツールボックスから TextBox を張り付けます。
    TextBox と TextBlock があるのですが、両者には基本的な違いは無いようです。
    使用例を見ると、データのタイプ入力や印字には TextBox が使われ、見出しなどには TextBlock が使われることが多いようです。
    1. TextBox の貼り付けは、基本的に Button と同じです。

    2. TextBox はプログラムから参照することが多く、その場合は名前(textbox)を付けます。

  3. ツールボックスから TextBlock を張り付けます。
    TextBox と TextBlock があるのですが、両者には基本的な違いは無いようです。
    1. TextBlock の貼り付けは、基本的に TextBox と同じです。
    2. TextBlock は見出しなどに使われることが多く、プロパティの Text にメッセージ(見出し)を設定します。
      場合によってフォントサイズを設定して下さい。

  4. ツールボックスから Image を張り付けます。
    1. Image の貼り付けは、基本的に TextBox と同じです。
    2. Image には画像を設定することが多く、プロパティの Source からプロジェクトに加えた画像を選択します。
      一覧に「画像ファイル」が表示されない(選択出来ない)ときは、プロジェクトに登録されていません。
      画像ファイルをプロジェクトのフォルダーに格納して、ソリューションエクスプローラで App1 を右クリックして[追加][既存項目]から加えて下さい。

      プロジェクトに取り込んだ画像をポイントすると、小さく表示されて登録を確認することが出来ます。

    3. Image はプログラムから参照する場合もあり、その場合は名前(imagename)を付けます。

ソースコードを編集

  1. 慣れてくると MainPage.xaml をエディッタで直接編集する方が手っ取り早いかも知れません。
    ツールは MainPage.xaml の <Grid> と </Grid> の間で定義します。
    Width= がツールの幅で、Height= が高さです。
    Margin= でツールの座標を設定します。
    Button の幅を 80 に、Image の幅を 1200 に高さを 800 に設定しています。

        <Grid>
            <Button x:Name="button" Content="Button" Margin="10,10,0,0"
                VerticalAlignment="Top" Width="80" Click="Button_Click"/>
            <Image x:Name="image" HorizontalAlignment="Center" Height="800"
                Margin="0,70,0,0" VerticalAlignment="Top" Width="1200"/>
        </Grid>
    
  2. TextBox と Button を貼り付ける例です。

        <Grid>
            <TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="40,60,0,0" Text="TextBox"
                VerticalAlignment="Top" Height="40" Width="130"/>
            <Button x:Name="button" Content="Button" Margin="230,60,0,0" VerticalAlignment="Top" Click="Button_Click"/>
            <TextBox x:Name="textBox1" HorizontalAlignment="Left" Margin="360,60,0,0" Text="TextBox"
                VerticalAlignment="Top" Height="40" Width="120"/>
        </Grid>
    
  3. MainPage.xaml で図形を表示することも出来ます。
    Ellipse Fill が円で、Rectangle Fill が矩形です。

        <Grid>
            <Ellipse Fill="Red" Width="50" Height="50" Margin="10,10,0,10"/>
            <Rectangle Fill="Green" Width="60" Height="60" Margin="200,10,0,10"/>
        </Grid>
    
  4. ListView と Frame を貼り付けます。
    Frame はナビゲーションをサポートするコンテンツコントロールです。
        <Grid>
            <ListView x:Name="listView" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"
                Height="240" Width="200" SelectionChanged="PageChange" IsItemClickEnabled="True"/>
            <Frame x:Name="frame" Content="Frame" HorizontalAlignment="Left" Margin="0,170,0,0"
                VerticalAlignment="Top" Height="420" Width="600"/>
        </Grid>
    
  5. StackPanel で Button を規則正しく並べます。

        <Grid>
            <StackPanel HorizontalAlignment="Left" Height="132" Margin="10,0,0,0"
                VerticalAlignment="Top" Width="118">
                <Button x:Name="button" Content="Button-1" HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" Click="Button_Click1"/>
                <Button x:Name="button1" Content="Button-2" HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" Click="Button_Click2"/>
                <Button x:Name="button2" Content="Button-3" HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch" Click="Button_Click3"/>
            </StackPanel>
        </Grid>
    

プロパティの設定

  1. Button の枠を "Blue" に設定します。
        <Button x:Name="button" Content="計算" HorizontalAlignment="Left" VerticalAlignment="Top"
          Width="80" Height="50" Margin="180,180,0,0" BorderBrush="Blue" Padding="10" Click="Button_Click"/>
    
  2. TextBox に色を設定します。
        <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="48" TextWrapping="Wrap"
          Text="DATA-1" VerticalAlignment="Top" Width="100" Margin="100,100,0,0" Background="LightGreen"/>
    

  3. TextBox のフォントサイズを大きくします。
        <TextBox HorizontalAlignment="Left" Margin="524,179,0,0" TextWrapping="Wrap" Text="TextBox 表示テスト "
            VerticalAlignment="Top" Height="151" Width="508" Background="#FFDED52A" FontSize="50"/>
    
  4. Button の角を丸くして "pink" 色に設定します。
        <Button Margin="180,180,0,0" VerticalAlignment="Top" Click="Button_Click"
          HorizontalAlignment="Left" Height="50" Width="100">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="pink" CornerRadius="30" Padding="10">
                        <TextBlock Text="計算" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>
    

  5. Button を "LightBlue" の楕円形に設定します。
    Button の文字は TextBlock で楕円形の上から書いています。
        <Button Margin="180,180,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Ellipse Fill="LightBlue" Width="80" Height="30"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
    
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="計算"
          VerticalAlignment="Top" Margin="210,187.301,0,0" Width="80.417" Height="40"/>
    

超初心者のプログラム入門(C# Frame Work)