WPF勉強会 第4回 スタイルの初歩/WPFStudy4

WPF勉強会 第4回 スタイルの初歩

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

Transcript

1. WPFษڧձ ୈ̐ճ ελΠϧͷॳา
2. ࠓ೔֮͑ͯ΄͍͜͠ͱ ελΠϧͱ͸CSSͷΑ͏ͳ΋ͷͰ͋Δ ఆٛͷ৔ॴͰద༻ൣғ͕ܾ·Δ x:Key͕෇͔͘෇͔ͳ͍͔Ͱશવҧ͏ ελΠϧʹ͸λʔήοτ͕ඞਢʂ
3. ελΠϧͱ͸ ͍͔ͭ͘ͷϓϩύςΟ஋Λ·ͱΊͨ΋ͷ ݸผʹɺશମʹɺෳ਺ͷཁૉʹద༻͢ ΔͨΊͷศརͳํ๏ ͭ·ΓCSSతͳ΋ͷͰ͢
4. CSSͱࣅ͍ͯΔͱ͜Ζ ఆٛ͢Δ৔ॴͰద༻ൣғ͕มΘΔ ผϑΝΠϧʢϦιʔεσΟΫγϣφϦʣ> Application಺ > Window಺ > Page಺ > ύωϧ಺ʢGridͱ͔ʣ > 1ͭͷ ίϯτϩʔϧ಺ > Template಺ ఆ͕͔ٛͿͬͨ৔߹͸࠷ޙʹએݴͨ͠΄͏͕উͭ ݟͨ໨ͱϩδοΫΛ෼཭Ͱ͖Δ XAML͚ͩͰݟͨ໨Λࣗ༝ʹม͑ΒΕΔ
5. StyleͰઃఆͰ͖Δ΋ͷ ϓϩύςΟ஋ എܠ৭ͱ͔ɺઢͷଠ͞ͱ͔ TemplateϓϩύςΟʹControlTemplateΛηοτ͢Δ͜ͱ΋Ͱ͖Δ طଘͷίϯτϩʔϧͷࢹ֮తߏ଄ɾಈ࡞Λ࠶ఆٛͰ͖Δຐվ଄ ࣍ճѻ͍·͢ TriggerʢϓϩύςΟτϦΨʔʣ ͜ͷϓϩύςΟ஋͕͜ΕʹͳͬͨΒ͜ͷϓϩύςΟΛ͜ͷ஋ʹ͢Δ EventTrigger MouseEnterΠϕϯτ͕ൃੜͨ͠Β0.2ඵ͔͚ͯOpacityΛ0.8ʹ͢Δͱ͔
6. ؆୯ͳྫ ඞͣTargetType͕ඞཁ C#͔ͩΒܕ͸ݫີͳͷͰ͢ <Page.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="AliceBlue"/> <Setter Property="FontSize" Value="14"/> </Style> </Page.Resources> <Grid> <UniformGrid> <Button Content="Button1"/> <Button Content="Button2"/> <Button Content="Button3"/> </UniformGrid> </Grid>
7. x:Keyଐੑॏཁʂ x:Keyଐੑ͕ແ͍ͱɺTargetTypeͰࢦఆͨ͠ܕશ෦ʹద༻ x:Keyଐੑ͕͋ΔͱɺͦͷΩʔΛࢦఆͨ͠΋ͷ͚͕ͩద ༻ <Page.Resources> <Style x:Key="BlueButtonStyle" TargetType="Button"> <Setter Property="Background" Value="AliceBlue"/> <Setter Property="FontSize" Value="14"/> </Style> </Page.Resources> <Grid> <UniformGrid> <Button Content="Button1"/> <Button Content="Button2" Style="{StaticResource BlueButtonStyle}"/> <Button Content="Button3"/> </UniformGrid> </Grid>
8. BasedOnͰܧঝͰ͖·͢ ผͷελΠϧΛج ʹɺελΠϧͷ௥Ճ ͕Ͱ͖Δ <Page.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="AliceBlue"/> <Setter Property="FontSize" Value="14"/> </Style> <Style x:Key="AmazingButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"> <Setter Property="RenderTransform"> <Setter.Value> <RotateTransform Angle="10"/> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid> <UniformGrid> <Button Content="Button1"/> <Button Content="Button2" Style="{StaticResource AmazingButtonStyle}"/> <Button Content="Button3"/> </UniformGrid> </Grid>
9. ελΠϧͱ͸࠶ར༻Λ໨ తͱͨ͠΋ͷ XAMLϦιʔεͱ͍͏֓೦Ͱ؅ཧ ϦιʔεʹελΠϧʴϒϥγ ϦιʔεσΟΫγϣφϦͱ͍͏ผϑΝΠ ϧʹ͢ΔͱɺΞϓϦέʔγϣϯؒͰڞ ༗Ͱ͖Δ
10. ϒϥγ͸Ϧιʔεʹ͠ͱ ͘ͱศར ࢖͍ճ͕͠Ͱ͖ΔͷͰɺޙͰશମͷ৭ຯΛม ͑΍͍͢ Πϯελϯε͕1ݸͰࡁΉ <Page.Resources> <SolidColorBrush x:Key="ButtonBackColor" Color="AliceBlue"/> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="{StaticResource ButtonBackColor}"/> <Setter Property="FontSize" Value="14"/> </Style> </Page.Resources>
11. ͔͠͠ͳΜ͔ͩΜͩݴͬ ͯ…… ελΠϧͷϝΠϯ͸ContentTemplate ࣍ճ͕Μ͹Γ·͠ΐ͏ʂ