nprogram’s blog

気ままに、プログラミングのトピックについて書いていきます

ObservableCollectionを使用した簡単なバインディング [C#][WPF]

ObservableCollectionを使用すれば、簡単にバインディングを実現できます。

以下のサイトを参考にさせていただきました。

www.youtube.com

実行結果

f:id:nprogram:20180115214758p:plain

コード

[Palyer.cs]

namespace WpfApp3
{
    public class Player
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

[MainWindow.xaml]

<Window x:Class="WpfApp3.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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <ListBox Name="Player" ItemsSource="{Binding}" Height="200" Width ="300">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="2">
                        <TextBlock Text ="ID : " Margin="2"/>
                        <TextBlock Text ="{Binding Id}" Margin="2"/>
                        <TextBlock Text ="Name : " Margin="2"/>
                        <TextBlock Text ="{Binding Name}" Margin="2"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Button" Canvas.Left="90" Canvas.Top="233" Width="75" Click="Button_Click"/>
    </Canvas>
</Window>

[MainWindow.xaml.cs]

using System.Windows;
using System.Collections.ObjectModel;


namespace WpfApp3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {

        ObservableCollection<Player> Players = new ObservableCollection<Player>();

        public MainWindow()
        {
            InitializeComponent();

            DataContext = this.GetPlayer();
        }


        public ObservableCollection<Player> GetPlayer()
        {
            Players.Add(new Player() { Id = 1, Name = "Ronaldo" });
            Players.Add(new Player() { Id = 2, Name = "Messi" });
            Players.Add(new Player() { Id = 3, Name = "Neymar" });

            return Players;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Players.Add(new WpfApp3.Player() { Id = 4, Name = "Bale" });
        }
    }
}