【C#/WPF実践入門編(4)】WPFの主要コントロール入門 ～ListView、ComboBox、TabControl、Image等の使い方～

<ListView x:Name="ItemListView">
    <ListViewItem Content="項目1"/>
    <ListViewItem Content="項目2"/>
</ListView>

<ListView x:Name="MyListView">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="名前" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="年齢" DisplayMemberBinding="{Binding Age}"/>
        </GridView>
    </ListView.View>
</ListView>

...
 public partial class MainWindow : Window
 {
     public MainWindow()
     {
         InitializeComponent();

         // データを作成
         var people = new List<Person>
             {
                 new Person { Name = "田中", Age = 30 },
                 new Person { Name = "佐藤", Age = 25 }
             };

         // ListViewにデータを設定
         MyListView.ItemsSource = people;
     }
 }

 public class Person
 {
     public string Name { get; set; }
     public int Age { get; set; }
 }
...

<ComboBox x:Name="CategoryComboBox">
    <ComboBoxItem Content="仕事"/>
    <ComboBoxItem Content="個人" IsSelected="True"/>
</ComboBox>

<TabControl>
    <TabItem Header="メモ">
        <!-- メモ入力画面 -->
    </TabItem>
    <TabItem Header="設定">
        <!-- 設定画面 -->
    </TabItem>
</TabControl>

 <Image Source="images/prota.png"/>

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 上部：ロゴとタイトル -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,10">

            <!-- Image: アプリロゴ -->
            <Image Source="images/logo.png" Width="40" Height="40" Margin="0,0,10,0"/>

            <!-- Label: アプリタイトル -->
            <Label Content="リスト型メモ帳アプリ" FontSize="18" FontWeight="Bold" 
                VerticalAlignment="Center"/>

        </StackPanel>

        <!-- TabControl: メインエリア -->
        <TabControl Grid.Row="1">

            <!-- メモ入力・表示タブ -->
            <TabItem Header="メモ">
                <Grid Margin="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- 入力エリア -->
                    <StackPanel Grid.Row="0" Margin="0,0,0,10">

                        <!-- Label: 入力ラベル -->
                        <Label Content="新しいメモ:" FontWeight="Bold"/>

                        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
                            <!-- TextBox: メモ入力 -->
                            <TextBox x:Name="MemoTextBox" Width="180" Margin="0,0,10,0" 
                                  Text="ここにメモを入力"/>

                            <!-- ComboBox: カテゴリ選択 -->
                            <ComboBox x:Name="CategoryComboBox" Width="70" Margin="0,0,10,0">
                                <ComboBoxItem Content="仕事" IsSelected="True"/>
                                <ComboBoxItem Content="個人"/>
                                <ComboBoxItem Content="買い物"/>
                            </ComboBox>

                            <!-- Button: 追加ボタン -->
                            <Button Content="追加" Click="OnAddButtonClick"/>
                        </StackPanel>

                    </StackPanel>

                    <!-- ListView: メモ一覧 -->
                    <ListView x:Name="MemoListView" Grid.Row="1">
                        <ListViewItem Content="サンプルメモ1 (仕事)"/>
                        <ListViewItem Content="サンプルメモ2 (個人)"/>
                    </ListView>

                </Grid>
            </TabItem>

            <!-- 設定タブ -->
            <TabItem Header="設定">
                <StackPanel Margin="20">

                    <!-- Label: 設定タイトル -->
                    <Label Content="アプリ設定" FontSize="14" FontWeight="Bold"/>

                    <CheckBox Content="起動時にメモを自動読み込み" IsChecked="True" Margin="0,10,0,5"/>
                    <CheckBox Content="終了時に確認ダイアログを表示" IsChecked="False" Margin="0,5,0,10"/>

                </StackPanel>
            </TabItem>

        </TabControl>

    </Grid>
</Window>

...
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    // イベントハンドラ: ボタンがクリックされたときに呼び出される
    private void OnAddButtonClick(object sender, RoutedEventArgs e)
    {
        // TextBox: 入力されたメモを取得
        string memo = MemoTextBox.Text;

        // ComboBox: 選択されたカテゴリを取得
        string? category = (CategoryComboBox.SelectedItem as ComboBoxItem)?.Content.ToString();

        if (!string.IsNullOrWhiteSpace(memo))
        {
            // ListView: 新しいメモを追加
            MemoListView.Items.Add($"{memo} ({category})");

            // TextBox: 入力欄をクリア
            MemoTextBox.Clear();
        }
    }
}
...

...
└─WpfApp1
    │  App.xaml
    │  App.xaml.cs
    │  AssemblyInfo.cs
    │  MainWindow.xaml
    │  MainWindow.xaml.cs
    │  WpfApp1.csproj
    │
    ├─images
    │      logo.png
...

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net9.0-windows</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
	<Content Include="images\*.*">
	  <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
	</Content>
  </ItemGroup>

</Project>