WPF勉強会 第5回 テンプレート/WPFStudy5

WPF勉強会 第5回 テンプレート

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

Transcript

1. WPFษڧձ ୈ5ճ ςϯϓϨʔτ
2. ࠓ೔֮͑ͯ΄͍͜͠ͱ ςϯϓϨʔτΛ࡞Βͳͯ͘ࡁΉͳΒશ ྗͰಀ͛Δ Ұ͔ΒControlTemplateΛ࡞Βͳ͍ʂ DataTemplateͱControlTemplate͸༻్ ͕ҧ͏
3. ςϯϓϨʔτͱ͸ WPFͷControl͸TemplateϓϩύςΟΛ࣋ͬͯ ͍Δ طఆͷςϯϓϨʔτΛಠࣗʹσβΠϯͨ͠ς ϯϓϨʔτͱࠩ͠ସ͑Δͱɺ֎؍Λࣗ༝ʹม ͑ΒΕΔʂ ςϯϓϨʔτΛม͑ͯ΋ɺϚ΢εॲཧͳͲ ͷجຊػೳ͸มΘΒͳ͍
4. طଘͷςϯϓϨʔτΛݟ ͯΈΔ TemplateϓϩύςΟ͔Β ControlTemplateΛऔΓग़͢ [υΩϡϝϯτΞ΢τϥΠϯ]͔ΒӈΫ ϦοΫ - [ςϯϓϨʔτͷฤू] - [ίϐʔ ͯ͠ฤू]
5. ࢖͍ํ ControlTemplateΛXAMLͰఆٛͯ͠ɺ TemplateϓϩύςΟʹηοτ͢Ε͹֎؍ Λ͕ΒΓͱม͑ΒΕΔʂ ͍͍ͨͯ͸Styleͱͯ͠ఆٛ͢Δ
6. ஫ҙ఺ ControlTemplateΛ࡞Γ࢝Ίͨ࣌఺Ͱɺطఆͷςϯ ϓϨʔτ͸׬શʹͳ͘ͳΔ ݟͨ໨͸ۭʹͳΔ Ϛ΢εΦʔόʔ࣌΍ΫϦοΫ࣌ͷมԽͳͲ΋͢ ΂ͯͳ͘ͳΔ Ұ౓࡞Γ࢝ΊͨΒɺҰ௨Γ࡞Γ௚͞ͳ͍ͱ͔͑ͬ ͯΈ͢΅Β͘͠ͳΔʂ
7. खΛ෇͚ͳ͍༐ؾ΋ඞཁ ຊ౰ʹςϯϓϨʔτΛ͍͡Βͳ͍ͱ͍ ͚ͳ͍ͷ͔ৼΓฦΖ͏ ςʔϚͷద༻ͰࡁΉͳΒͦΕͰࡁ·ͤΑ ͏
8. ߹͍ݴ༿͸ ςϯϓϨʔτΛ͍͡ΔͳΒ࠷ޙ·Ͱ͋ ͖ΒΊͳ͍ʂ
9. ςʔϚͬͯʁ WPFඪ४Ͱ࢖༻Ͱ͖ΔશͯͷControlʹରͯ͠ɺ౷ҰతͳσβΠϯΛ ࢪͨ͠Styleͷू߹ମʢϦιʔεʣ େ఍શ෦ͷControlͷContentTemplateΛ͍͍ͬͯ͡Δ ੲ͸ςʔϚͱ͍͏ݴ͍ํͰϦιʔεσΟΫγϣφϦͷϑΝΠϧ͕ެ ։͞Ε͍͕ͯͨɺݱࡏͩͱ౷߹తͳݟͨ໨ʴศརͳಠࣗControl͕ ηοτʹͳͬͨҎԼͷΑ͏ͳϥΠϒϥϦΛΠϯετʔϧͯ͠࢖͏͜ ͱ͕ଟ͍ɻ Material Design in XAML Toolkit MahApps.Metro
10. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̍ จࣈ৭Λม͍͑ͨ
11. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̍ จࣈ৭Λม͍͑ͨ ͍Γ·ͤΜʂ <Button Content="Button" Foreground="#FFC70BDA"/>
12. ϓϩύςΟΛ௚઀͍͡Ε ͹͍͍ύλʔϯ ϓϩύςΟͷ஋Λม͑Ε͹ࡁΉ͜ͱͳ ΒͦΕͰOK MSDNΛಡΜͰϓϩύςΟΛ୳ͦ͏ʂ ΋ͪΖΜStyleͰઃఆͯ͠΋Α͍
13. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̎ ϘλϯͷதʹϘλϯ͕͋Δ
14. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̎ ϘλϯͷதʹϘλϯ͕͋Δ ͍Γ·ͤΜʂ <Button> <Grid> <TextBlock TextWrapping="Wrap" Text="Button" FontSize="36" HorizontalAlignment="Center"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button Content="Button" Margin="3,12,3,0" VerticalAlignment="Center"/> <Button Content="Button" Margin="3,12,3,0" VerticalAlignment="Center"/> </StackPanel> </Grid> </Button>
15. ContentΛ͍͡Ε͹͍͍ ύλʔϯ ContentϓϩύςΟΛ͍࣋ͬͯΔͳΒɺ ࢠཁૉͱͯ͠ͲΜͳControlͰ΋ೖΕΒ ΕΔ Content͸୯Ұཁૉ͔͠ೖΕΒΕͳ͍ ͔Βɺ͍Ζ͍Ζ഑ஔ͍ͨ͠৔߹͸ύ ωϧʹ͘ΔΉ
16. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̏ ListBoxͷߦΛΧελϚΠζ͍ͨ͠
17. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̏ ListBoxͷߦΛΧελϚΠζ͍ͨ͠ ͍Γ·ͤΜʂ <ListBox Grid.Column="1"> <ListBox.ItemTemplate> <DataTemplate DataType="System:String"> <Grid> <Border BorderThickness="8,2,2,2" BorderBrush="Red"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding}"/> <ProgressBar Width="60" Value="45"/> </StackPanel> </Border> </Grid> </DataTemplate> </ListBox.ItemTemplate> <System:String>͢Ϳͨ</System:String> <System:String>ͪΌʔ͸Μ</System:String> <System:String>͸ͬΆ͏͍͞</System:String> </ListBox>
18. DataTemplateΛ࢖͑͹͍ ͍ύλʔϯ ίϨΫγϣϯΛදࣔ͢ΔControlͳΒɺද ࣔ͢Δத਎͸DataTemplateͰม͑ΒΕΔ DataTemplate͸ɺ΋ͱ΋ͱදࣔͷ࢓ํ͕ ఆٛ͞Εͯͳ͍΋ͷΛఆٛ͢Δ΋ͷ ControlTemplate͸΋ͱ΋ͱఆٛ͞Εͯ ͍Δ΋ͷΛ͋͑ͯ࠶ఆٛ͢Δ΋ͷ
19. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̐ Ϛ΢εΦʔόʔ࣌ͷݟͨ໨ͷมԽΛม͑ ͍ͨ
20. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̐ Ϛ΢εΦʔόʔ࣌ͷݟͨ໨ͷมԽΛม͑ ͍ͨ ͨͿΜ͍Γ·͢ʂ
21. τϦΨʔΛม͍͑ͨύ λʔϯ StyleͰτϦΨʔΛ଍͢͜ͱ͸Ͱ͖Δ ͕ɺطఆͷಈ࡞ΛόοςΟϯά͢ΔՄ ೳੑ΋͋Δ ςϯϓϨʔτΛ࡞ͬͨํ͕҆৺͔΋͠ Εͳ͍
22. ͜Ε͸ςϯϓϨʔτඞ ཁʁ̑ Ϙλϯ͕ପԁܗ νΣοΫϘλϯͷ࢛֯ͷதʹจࣈྻ ͜Ε·Ͱʹແ͍UIͷεΫϩʔϧόʔ
23. ͦ΋ͦ΋ͷ֎؍Λม͑ͨ ͍ύλʔϯ ͜Ε͸΋͏ςϯϓϨʔτͷग़൪ʂ
24. ςϯϓϨʔτͷ࡞Γํ ςϯϓϨʔτͷXAMLΛҰ͔Βࣗ෼Ͱॻ ͘ͷ͸ແཧʂ طఆͷςϯϓϨʔτ΍ɺςʔϚͷதʹ ͋ΔςϯϓϨʔτΛվ଄͠Α͏ʂ
25. ෳࡶͳςϯϓϨʔτ ΋ͱ΋ͱෳࡶͳίϯτϩʔϧ͸ ControlTemplate΋ෳ߹ܕͰෳࡶ
26. ͋ͱ͸…… MSDNΛཔΓʹ͕Μ͹Γ·͠ΐ͏ʂ