WPF勉強会 第3回 コレクションへのデータバインディング/WPFStudy3

WPF勉強会 第3回 コレクションへのデータバインディング

説明後に実演するライブコーディングのコードはこちら。
https://github.com/hachiilcane/WpfStudy

Transcript

1. WPFษڧձ ୈ̏ճ ίϨΫγϣϯ΁ͷ σʔλόΠϯσΟϯά
2. ࠓ೔֮͑ͯ΄͍͜͠ͱ ItemsSourceΛ࣋ͭίϯτϩʔϧ͕ίϨΫ γϣϯΛѻ͑Δ ObservableCollection<T>ɺͱʹ͔͘࢖ͬ ͱ͚ ίϨΫγϣϯͷཁૉͷݟͤํΛܾΊΔͷ ͕DataTemplete
3. σʔλόΠϯσΟϯά͸ ͬ͘͟Γ̎ύλʔϯ Ұͭͷ஋ʹରͯ͠ ίϨΫγϣϯʹରͯ͠ ࠓճ͸ͬͪ͜
4. ͍ͭίϨΫγϣϯͷόΠ ϯσΟϯάΛ࢖͏ͷ͔ ෳ਺ϨίʔυͷσʔλΛදࣔ͢Δͱ͖ ͸΄΅͢΂ͯ ࢝Ί͸σʔλ͕̌ݸͱ͔ɺޙ͔Βσʔ λ͕૿͑Δͱ͔ɺͥΜͥΜOKʂ
5. ίϨΫγϣϯͱݴ͑Ͳ΋ ͋͘·ͰϓϩύςΟͱϓϩύςΟͰόΠ ϯσΟϯά͢Δجຊ͸มΘΒͳ͍ όΠϯσΟϯάιʔεଆͷϓϩύςΟͷ ܕ͕ίϨΫγϣϯܕ͚ͬͯͩ
6. ࢖༻Ͱ͖ΔUIίϯτϩʔ ϧ͸ݶΒΕ͍ͯΔ ItemsSourceϓϩύςΟɺίϨΫγϣϯ ΛόΠϯσΟϯάͰ͖Δͷ͸ʢ΄΅ʣ͜ ͍͚ͭͩ
7. ItemsSourceϓϩύςΟ Λ࣋ͭίϯτϩʔϧͷྫ ListBox ListView TreeView DataGrid ItemsControl Menu C1.WPF.C1Cha rt.ChartData
8. ΋ͬͱ΋؆୯ͳྫ ListBoxʹObservableCollection<string>Λ όΠϯυͤ͞Δ ViewModelΫϥε ObservableCollection<string> AnimalList ViewΫϥε(XAML) ItemsSourceϓϩύςΟ όΠϯσΟϯάιʔε όΠϯσΟϯάλʔήοτ ←͜Μͳͷ͕Ͱ͖Δ DataContext ListBox
9. Listͷදࣔͷ࢓ํ͸ܾ ·͍ͬͯͳ͍ ίϨΫγϣϯͷத਎ҰͭҰͭͷදࣔͷ ࢓ํ͸DataTemplateͰࢦఆ͢Δ
10. DataTemplateద༻ྫ <ListBox x:Name="SimplyListBox" ItemsSource="{Binding SimplyList}"> <ListBox.ItemTemplate> <DataTemplate> <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1"> <Grid Margin="3" Width="100"> <TextBlock Text="{Binding}"/> </Grid> </Border> </DataTemplate> </ListBox.ItemTemplate> </ListBox> public class AnimalsViewModel : ViewModelBase { public ObservableCollection<string> SimplyList { get; set; }
11. ߹͍ݴ༿͸ ItemsSourceϓϩύςΟͱ DataTemplateɺηοτͰ͓τΫʂ
12. ίϨΫγϣϯͰ͋ͬͯ΋ ௨஌ʂ ίϨΫγϣϯͷ৔߹ɺ௥Ճɺมߋɺ࡟আΛ۠ ผͯ͠ෳࡶͳ௨஌ΛߦΘͳ͚Ε͹ͳΒͳ͍ ObservableCollection<T>͸ͦͷลΛࣗಈͰ ΍ͬͯ͘ΕΔʂ ObservableCollection<T>ͷT΋มԽ͢ΔͳΒ T͸INotifyPropertyChanged͕ඞཁ
13. ίϨΫγϣϯ΁ͷόΠϯ σΟϯά͸·ͱΊΔͱ ViewModelΫϥε ObservableCollection<T>ͷϓϩύςΟ ViewΫϥε(XAML) ItemsSourceϓϩύςΟ όΠϯσΟϯάιʔε όΠϯσΟϯάλʔήοτ DataTemplate ListBoxͱ͔ DataContext
14. DataTemplateͷͳ͔Ͱ͸ DataContext͕มΘΔ͜ͱʹ஫ҙ <ListBox ItemsSource="{Binding SimplyList}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text=“{Binding Species}"/> <TextBlock Text=“{Binding Name}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> public class AnimalsViewModel : ViewModelBase { public ObservableCollection<AnimalViewModel> SimplyList { get; set; } } public class AnimalViewModel : ViewModelBase { public string Species { get; set; } // ←INotifyPropertyChangedΛ࣮૷͍ͯ͠ͳ͍ͷͰ public string Name { get; set; }ɹ // ·͕ͪͬͨྫ͕ͩΠϝʔδͩͱࢥ͍ͬͯͩ͘͞ } public particle class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new AnimalsViewModel(); } } ViewModelଆ Viewଆ ͜Ε͸DataContextͷઃఆͷ࢓ํͱͯ͋͠·Γ ͍͍ྫͰ͸ͳ͍͕ɺ΋ͬͱ΋؆୯ͳ΍Γํ
15. Ԡ༻ྫɿDataGrid ྻͷఆٛͷͳ͔ͰόΠϯυ͢Δ͜ͱ͕ଟ͍ <DataGrid ItemsSource="{Binding ServiceStatusList}" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="αʔϏε" Width="160" DisplayIndex="0" Binding="{Binding Name}"> </DataGridTextColumn> <DataGridTextColumn Header="Քಇঢ়ଶ" Width="80" DisplayIndex="1" Binding="{Binding Status}"> <DataGridTextColumn.ElementStyle> <Style TargetType="{x:Type TextBlock}" > <Setter Property="Margin" Value="2" /> <Setter Property="TextAlignment" Value="Center" /> </Style> </DataGridTextColumn.ElementStyle> </DataGridTextColumn> </DataGrid.Columns> </DataGrid>
16. Ԡ༻ྫɿDataGridͱ DataTable ԿͷྻΛԿݸදࣔ͢Δͷ͔ܾ·ͬͯແ ͍ ͋Β͔͡ΊϓϩύςΟΛఆ͓ٛͯ͠ ͘͜ͱ͕Ͱ͖ͳ͍ ͦΜͳͱ͖͸DataTableΛDataContextʹ όΠϯυͤ͞Δ
17. DataGridͱDataTableͷ ૬ੑ DB͔Βऔͬͨ஋Λͦͷ··ͲʔΜʂ DataTable dt = null; string connectionString = this.serverConnectionInfo.CreateBuilder().ConnectionString; using (SqlConnection con = new SqlConnection(connectionString)) { string query = “select * from aaaTable"; SqlCommand command = new SqlCommand(query, con); SqlDataAdapter a = new SqlDataAdapter(command); DataSet ds = new DataSet(); a.Fill(ds); dt = ds.Tables[0]; } this.LayoutRootGrid.DataContext = dt; <DataGrid ItemsSource="{Binding}"> </DataGrid>
18. ίπ DataTemple͸ෳ਺༻ҙͰ͖Δ ίϨΫγϣϯͷܕʹΑͬͯ࢖͍෼͚Δ ˠDataTypeϓϩύςΟΛ࢖͏ ಛఆͷϓϩύςΟͷ஋ʹΑͬͯ࢖͍෼͚Δ ˠDataTemplateSelectorΛ࢖͏ DataTemplateͷதʹDataTriggerͷࢦఆ΋Ͱ͖Δ
19. ͜Μͳ΋ͷΛߟ͑ͯΈ· ͠ΐ͏