Styles, Templates, Skins & Themes
Co jest co? Style zgrupowane ustawienia właściwości Template nowe Visual Tree dla kontrolki Skin zestaw styli dla całej aplikacji Theme schemat wyglądu obowiązujący w systemie operacyjnym
Style <StackPanel.Resources> <Style x:key = "buttonstyle"> <Setter Property = "Button.Background" Value = "Purple"/> <Setter Property = "Button.Foreground" Value = "White"/> <Setter Property = "Button.RenderTransform"> <Setter.Value> <RotateTransform Angle = "10"/> </Setter.Value>
Style c.d. </Setter> </Style> </StackPanel.Resources> <Button Style = "{ StaticResource buttonstyle }"> Przycisk 1 </Button> <Button Style = "{ StaticResource buttonstyle }"> Przycisk 2 </Button> <Button Style = "{ StaticResource buttonstyle }"> Przycisk 3 </Button>
Style.BasedOn <Style x:key = "buttonstylewithbold" BasedOn = "{ StaticResource buttonstyle}"> <Setter Property = "Button.FontWeight" Value = "Bold" /> </Style>
Style dla różnych kontrolek <StackPanel.Resources> <Style x:key = "controlstyle"> <Setter Property = "Control" Control.FontSize" Value = "22"/> </Style> </StackPanel.Resources> <Button Style = "{ StaticResource controlstyle }"> Przycisk 1 </Button> <ComboBox Style="{StaticResource controlstyle}">
Strange but true... controlstyle działa dla "niekontrolek" Zmiana Button na Control jest niepotrzebna Niektóre właściwości "nie działają" dla niektórych kontrolek (TextBlock.Background)
Style.TargetType <Style x:key = "buttonstyle" TargetType = "{x:type Button}"> <Setter Property = "FontSize" Value = "22"/> <Setter Property = "Background" Value="Purple"/> <Setter Property = "Foreground" Value = "White"/> <Setter Property = "Height" Value = "50"/> <Setter Property = "Width" Value = "50"/> </Style>
Style.TargetType c.d. <Application.Resources> <Style TargetType = "{ x:type Button }">... </Style> </Application.Resources>... <Button Content = "OK" /> <Button Content = "Anuluj" />
Nie tylko właściwość "Style" FocusVisualStyle ItemContainerStyle <Style x:key = "{x:static ToolBar.ButtonStyleKey}" </Style> TargetType = "{x:type Button}">
Triggery Property triggers Data triggers Event triggers
Property triggers <Style TargetType = "{ x:type Button }"> <Style.Triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter Property = "Foreground" Value = "Black" /> <Setter Property = "Background" Value = "White" /> </Trigger> </Style.Triggers>
Property triggers c.d. <Style x:key="alter" TargetType="{x:Type Control}"> <Style.Triggers> <Trigger Property = "ItemsControl.AlternationIndex" Value="1"> <Setter Property = "Background"... <Setter Property = "Foreground"... </Trigger> </Style.Triggers> </Style>
Property triggers c.d. <ListBox AlternationCount = "2" Margin = "10" ItemContainerStyle = "{ StaticResource Alter }"> <ListBoxItem> Item 1 </ListBoxItem> <ListBoxItem> Item 2 </ListBoxItem> <ListBoxItem> Item 3 </ListBoxItem> <ListBoxItem> Item 4 </ListBoxItem> <ListBoxItem> Item 5 </ListBoxItem> </ListBox>
Data triggers <Style.Triggers> <DataTrigger Binding = "{ Binding RelativeSource = { RelativeSource Self }, Path = Text}" Value = "disabled"> <Setter Property="IsEnabled" Value="False"/> </DataTrigger> </Style.Triggers>
Multi(Data)Trigger <Style.Triggers> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property = "IsMouseOver" Value = "True" /> <Condition Property = "IsFocused" Value = "True" /> </MultiTrigger.Conditions> <Setter Property="Foreground" Value="Red"/> <MultiTrigger>
Control templates <ControlTemplate x:key = "buttontemplate"> <Grid> <Ellipse Width = "100" Height = "100"> <Ellipse.Fill> <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1"> <GradientStop Offset= 0 Color= Blue /> <GradientStop Offset= 1 Color= Red /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>
Control templates c.d. <ControlTemplate x:key = "buttontemplate" TargetType = "{x:type Button}"> <ControlTemplate.Triggers> <Trigger Property = "IsMouseOver" Value = "True"> <Setter TargetName = "circle" Property = "Fill" Value = "Orange"/> </Trigger> </ControlTemplate.Triggers>
Uwzględnianie właściwości <ControlTemplate x:key = "buttontemplate"> <Grid> <Ellipse Width = "100" Height = "100"> <Ellipse.Fill> <SolidColorBrush Color = "Blue"/> </Ellipse.Fill> </Ellipse> <Viewbox> <ContentPresenter Margin = "20" Content="{TemplateBinding Content}"/> </Viewbox>
Uwzględnianie właściwości <ControlTemplate x:key = "buttontemplate"> <Grid> <Ellipse Width = "100" Height = "100"> <Ellipse.Fill> <SolidColorBrush Color = "{ Binding RelativeSource = { RelativeSource TemplatedParent }, Path = Background.Color }"/> </Ellipse.Fill> </Ellipse>
Templates & Styles <Style TargetType = "{ x:type Button }" > <Setter Property = "Template"> <Setter.Value> <ControlTemplate TargetType = "{ x:type Button }">... </ControlTemplate> </Setter.Value> </Setter> </Style>
Skórki Zestawy styli i szablonów Nie są wspierane dodatkowo w WPF Wystarczy stworzyć.xaml ze stylami... i dodać opcję wczytywania do zasobów
Tematy Ustawienia wyglądu dla całego systemu {DynamicResource {x:static SystemColors... Podkatalog "themes" w katalogu projektu... + pliki typu Aero.NormalColor.xaml [assembly:themeinfo ( ResourceDictionaryLocation...
Tematy themes\generic.xaml themes\aero.normalcolor.xaml themes\luna.normalcolor.xaml themes\luna.homestead.xaml themes\luna.metallic.xaml themes\royale.normalcolor.xaml themes\classic.xaml themes\zune.normalcolor.xaml