Styles, Templates, Skins & Themes

Wielkość: px

Rozpocząć pokaz od strony:

Download "Styles, Templates, Skins & Themes"

Helena Domagała
8 lat temu
Przeglądów:

1 Styles, Templates, Skins & Themes

2 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

3 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>

4 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>

Przycisk 1 </Button> <Button Style = "{ StaticResource buttonstyle

5 Style.BasedOn <Style x:key = "buttonstylewithbold" BasedOn = "{ StaticResource buttonstyle}"> <Setter Property = "Button.FontWeight" Value = "Bold" /> </Style>

6 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}">

Control.FontSize" Value = "22"/> </Style> </StackPanel.

7 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)

8 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>

9 Style.TargetType c.d. <Application.Resources> <Style TargetType = "{ x:type Button }">... </Style> </Application.Resources>... <Button Content = "OK" /> <Button Content = "Anuluj" />

10 Nie tylko właściwość "Style" FocusVisualStyle ItemContainerStyle <Style x:key = "{x:static ToolBar.ButtonStyleKey}" </Style> TargetType = "{x:type Button}">

11 Triggery Property triggers Data triggers Event triggers

12 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>

13 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>

14 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>

StaticResource Alter }"> <ListBoxItem> Item 1 </ListBoxItem> <ListBoxItem>

15 Data triggers <Style.Triggers> <DataTrigger Binding = "{ Binding RelativeSource = { RelativeSource Self }, Path = Text}" Value = "disabled"> <Setter Property="IsEnabled" Value="False"/> </DataTrigger> </Style.Triggers>

16 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>

<Condition Property = "IsFocused" Value = "True" /> </MultiTrigger.

17 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>

Fill> <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1">

18 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>

19 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>

Fill> <SolidColorBrush Color = "Blue"/> </Ellipse.

20 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>

Fill> <SolidColorBrush Color = "{ Binding RelativeSource = {

21 Templates & Styles <Style TargetType = "{ x:type Button }" > <Setter Property = "Template"> <Setter.Value> <ControlTemplate TargetType = "{ x:type Button }">... </ControlTemplate> </Setter.Value> </Setter> </Style>

22 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

23 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...

24 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

Podobne dokumenty

!!" % & $ ( # # ( ( # ( ( TalentowiSKO talenty dodajemy, mnoīymy, potċgujemy. e-mail: TalentowiSKO@bankbps.pl tel. +48 22 53 95 231 TalentowiSKO.

!! % & $ ( # # ( ( # ( ( TalentowiSKO talenty dodajemy, mnoīymy, potċgujemy. e-mail: TalentowiSKO@bankbps.pl tel. +48 22 53 95 231 TalentowiSKO. !!" #$ % &!! "! # $ %! "! # # # % & '( ( '( ) $ "! $ $ "! #'$ ( * ( $ # +, - ( ( ( (( (# $ (#. (. $ ( ' ( $ ( '. ' ( / ( # ( ( ( $(## ( 0 $ '( $ $ $ $ (# ( ( (# * ' / ( $ #)$ & " 0 ) ( (... (. % *. / (.()