{"id":69,"date":"2011-11-27T17:41:00","date_gmt":"2011-11-27T17:41:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2011\/11\/27\/style\/"},"modified":"2016-01-31T00:41:30","modified_gmt":"2016-01-31T00:41:30","slug":"style","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2011\/11\/27\/style\/","title":{"rendered":"Style"},"content":{"rendered":"<p>Style jest to mechanizm wprowadzony w WPF-ie, a nast\u0119pnie w Silverlighcie, dzi\u0119ki kt\u00f3remu w \u0142atwy spos\u00f3b mo\u017cna ujednolici\u0107 wygl\u0105d element\u00f3w naszej aplikacji.<br \/>\nStyle z regu\u0142y definiowane s\u0105 w zasobach. Mog\u0105 to by\u0107 zar\u00f3wno zasoby ca\u0142ej aplikacji, danego okna lub nawet wybranej kontrolki.<br \/>\nPrzyk\u0142adowy styl mo\u017ce wygl\u0105da\u0107 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre lang=\"xml\">\r\n<Style x:Key=\"przycisk\">\r\n    <Setter Property=\"Button.FontSize\" Value=\"22\" \/>\r\n    <Setter Property=\"Button.Background\" Value=\"Orange\" \/>\r\n    <Setter Property=\"Button.Width\" Value=\"60\" \/>\r\n<\/Style>\r\n<\/pre>\n<p>Ka\u017cdy styl jest rozpoznawany dzi\u0119ki unikalnemu kluczowi &#8211; parametr <span style=\"font-style: italic;\">x:Key<\/span>. Mo\u017cliwe jest pomini\u0119cie klucza, w przypadku gdy ustawiona zostanie w\u0142a\u015bciw\u015b\u0107 <span style=\"font-style: italic;\">TargetType<\/span>. Jednak\u017ce zdefiniowanie w\u0142a\u015bciwo\u015bci <span style=\"font-style: italic;\">TargetType<\/span> spowoduje, \u017ce dany styl b\u0119dzie automatycznie zastosowany do wszystkich kontrolek danego typu. W przypadku gdyby\u015bmy jednak chcieli wy\u0142\u0105czy\u0107 dany styl dla pojedynczej kontrolki mo\u017cemy zawsze przypisa\u0107 mu warto\u015b\u0107 <span style=\"font-style: italic;\">x:Null<\/span><br \/>\nJak wida\u0107 styl posiada kolekcj\u0119 obiekt\u00f3w typu <span style=\"font-style: italic;\">Setter<\/span>. Najwa\u017cniejszymi propertisami ka\u017cdego <span style=\"font-style: italic;\">Settera <\/span>s\u0105:<\/p>\n<ul>\n<li><span style=\"font-style: italic;\">Property <\/span>&#8211; okre\u015bla nazw\u0119 w\u0142a\u015bciwo\u015bci, kt\u00f3r\u0105 dany styl b\u0119dzie modyfikowa\u0107,<\/li>\n<li><span style=\"font-style: italic;\">Value <\/span>&#8211; okre\u015bla warto\u015b\u0107 w\u0142a\u015bciwo\u015bci okre\u015blonej w elemencie <span style=\"font-style: italic;\">Property<\/span><\/li>\n<\/ul>\n<p>Dla przyk\u0142ady &#8211; nast\u0119puj\u0105cy styl:<\/p>\n<pre lang=\"xml\">\r\n<Style x:Key=\"przycisk\">\r\n    <Setter Property=\"Button.FontSize\" Value=\"22\" \/>\r\n<\/Style>\r\n<\/pre>\n<p>ustawi rozmiar czcionki na buttonie na 22 pkt. Jako, \u017ce nie zosta\u0142a ustawiona w\u0142a\u015bciwo\u015b\u0107 <span style=\"font-style: italic;\">TargetType <\/span>dla stylu, musimy podawa\u0107 pe\u0142n\u0105 nazw\u0119 w\u0142a\u015bciwo\u015bci(czyli nazw\u0119 klasy oraz nazw\u0119 w\u0142a\u015bciwo\u015bci).<br \/>\nOczywi\u015bcie mo\u017cemy r\u00f3wnie\u017c ustawia\u0107 bardziej skomplikowane w\u0142a\u015bciwo\u015bci<\/p>\n<pre lang=\"xml\">\r\n<Style TargetType{x:Type Button}>\r\n    <Setter Property=\"RenderTransform\">\r\n        <Setter.Value>\r\n            <SkewTransform CenterX=\".5\" CenterY=\".5\" AngleX=\"-10\" AngleY=\"15\" \/>\r\n        <\/Setter.Value>\r\n    <\/Setter>\r\n<\/Style>\r\n<\/pre>\n<p>W przypadku gdyby\u015bmy pisali w Silverlighcie w\u0142a\u015bciwo\u015b\u0107 <span style=\"font-style: italic;\">TargetType<\/span> ustawia si\u0119 troszeczk\u0119 inaczej. Mianowicie zamiast<br \/>\n<span style=\"font-style: italic;\">TargetType{x:Type Button} <\/span>piszemy <span style=\"font-style: italic;\">TargetType{Button}<\/span><\/p>\n<p>W\u0142a\u015bciwo\u015b\u0107 <span style=\"font-style: italic;\">TargetType <\/span>okre\u015bla nam dla jakiego typu obiekt\u00f3w(kontrolek) dany typ jest przeznaczony. Styl z pierwszego przyk\u0142adu mo\u017cna zapisa\u0107 nast\u0119puj\u0105co:<\/p>\n<pre lang=\"xml\">\r\n<Style  TargetType={x:Type Button}>\r\n    <Setter Property=\"FontSize\" Value=\"22\" \/>\r\n<\/Style>\r\n<\/pre>\n<p>Dzi\u0119ki u\u017cyciu w\u0142a\u015bciwo\u015bci <span style=\"font-style: italic;\">TargetType<\/span>, kompilator wie, \u017ce dany styl jest przeznaczony dla Buttona, dlatego te\u017c mo\u017cemy w Setterze u\u017cy\u0107 skr\u00f3conej nazwy w\u0142a\u015bciwo\u015bci(FontSize zamiast Button.FontSize). Ponadto dzi\u0119ki u\u017cyciu <span style=\"font-style: italic;\">TargetType<\/span>, mo\u017cemy pomin\u0105\u0107 definiowanie klucza po jakim nasz styl b\u0119dzie rozpoznawany. Od tej chwili wszystkie buttony b\u0119d\u0105 renderowane z u\u017cyciem powy\u017cszego stylu (oczywi\u015bcie je\u017celi styl ten b\u0119dzie w resourcach danej kontrolki).<\/p>\n<p><span style=\"font-weight: bold;\">Dziedziczenie styli<\/span><\/p>\n<p>Style mog\u0105 by\u0107 dziedziczone. Oznacza to tyle, \u017ce styl pochodny b\u0119dzie rozszerza\u0142 styl bazowy. W przypadku gdy styl bazowy ma zdefiniowany <span style=\"font-style: italic;\">TargetType<\/span>, styl dziedzicz\u0105cy nie mo\u017ce go zmieni\u0107. W celu zdefiniowania dziedziczenia u\u017cywa si\u0119 w\u0142a\u015bciwo\u015bci <span style=\"font-style: italic;\">BasedOn<\/span>. Przyk\u0142adowe dziedziczenie styli pokazano poni\u017cej<\/p>\n<pre lang=\"xml\">\r\n<Style x:Key=\"baseStyle\">\r\n    <Setter Property=\"FontSize\" Value=\"12\" \/>\r\n    <Setter Property=\"Background\" Value=\"Orange\" \/>\r\n<\/Style>\r\n<Style x:Key=\"boldStyle\" BasedOn=\"{StaticResource baseStyle}\">\r\n    <Setter Property=\"FontWeight\" Value=\"Bold\" \/>\r\n<\/Style>\r\n<\/pre>\n<p>W stylu dziedzicz\u0105cym mo\u017cna przes\u0142ania\u0107 w\u0142a\u015bciwo\u015bci ze stylu bazowego. W przypadku gdy nie zostan\u0105 one przes\u0142oni\u0119te, u\u017cyte zostan\u0105 propertisy ze stylu bazowego.<br \/>\nW celu zaaplikowania stylu do jakiej\u015b kontrolki pos\u0142ugujemy si\u0119 nast\u0119puj\u0105c\u0105 sk\u0142adni\u0105<\/p>\n<pre lang=\"xml\">\r\n<Button Style=\"{StaticResource myStyle}\"><\/Button>\r\n<\/pre>\n<p><span style=\"font-weight: bold;\">myStyle<\/span> &#8211; klucz stylu zdefiniowanego w zasobach.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Style jest to mechanizm wprowadzony w WPF-ie, a nast\u0119pnie w Silverlighcie, dzi\u0119ki kt\u00f3remu w \u0142atwy spos\u00f3b mo\u017cna ujednolici\u0107 wygl\u0105d element\u00f3w naszej aplikacji. Style z regu\u0142y definiowane s\u0105 w zasobach. Mog\u0105 to by\u0107 zar\u00f3wno zasoby ca\u0142ej aplikacji, danego okna lub nawet wybranej kontrolki. Przyk\u0142adowy styl mo\u017ce wygl\u0105da\u0107 w nast\u0119puj\u0105cy spos\u00f3b: Ka\u017cdy styl jest rozpoznawany dzi\u0119ki unikalnemu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,149,45],"tags":[190,277,191],"class_list":["post-69","post","type-post","status-publish","format-standard","hentry","category-silverlight","category-styles","category-wpf","tag-silverlight","tag-styles","tag-wpf"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":3,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/69\/revisions\/513"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}