WPF learning path (14) style and template, wpf path style Template

WPF learning path (14) style and template, wpf path style Template

Style 

 

Instance:

<Window.Resources>    <Style x:Key="BtnStyle">        <Setter Property="Button.Height" Value="50" />        <Setter Property="Button.Margin" Value="30" />        <Setter Property="Button.Background" Value="Beige" />        <Setter Property="Button.RenderTransform">            <Setter.Value>                <RotateTransform Angle="45" />            </Setter.Value>        </Setter>    </Style></Window.Resources><WrapPanel x:Name="wrappanel" Margin="10">    <Button Content="btn1" Style="{StaticResource BtnStyle}" />    <Button Content="btn2" Style="{StaticResource BtnStyle}" />    <Button Content="btn3" Style="{StaticResource BtnStyle}" /></WrapPanel>

If you do not set a style, you need to add duplicate code to each control, which is cumbersome.

 

You can set the TargetType of the Style. If you do not set x: Key, it will be applied to the conforming control by default. Note that Scope will take effect in the defined Scope.

<Style TargetType="{x:Type Button}">    <Setter Property="Height" Value="50" />    <Setter Property="Margin" Value="30" />    <Setter Property="Background" Value="Beige" />    <Setter Property="RenderTransform">        <Setter.Value>            <RotateTransform Angle="45" />        </Setter.Value>    </Setter></Style>

 <Button Content="btn1" />

 

Style has an Inheritance Mechanism

If you want to share some style settings for different types of space, you can use BasedOn to implement

<Window.Resources>        <Style TargetType="{x:Type Control}">            ...        </Style>        <Style BasedOn="{StaticResource {x:Type Control}}" TargetType="{x:Type Button}">            ...        </Style>        <Style BasedOn="{StaticResource {x:Type Control}}" TargetType="{x:Type RadioButton}">            ...        </Style>    </Window.Resources>

 

Trigger

Style has a Trigger set. The following example shows an attribute Trigger.

 <Style.Triggers>                <Trigger Property="IsMouseOver" Value="True">                    <Setter Property="Foreground" Value="Red"></Setter>                </Trigger></Style.Triggers>

 

WPF has 3 trigger

Property trigger. when the property is changed, the Setter set in the trigger is executed.

Data triggers,. net attributes, not only dependent on attribute changes

Event trigger, executed when a route event is triggered

 

 

Implement a ListBox

<Page.Resources>    <XmlDataProvider x:Key="InventoryData" XPath="Inventory/Book">        <x:XData>            <Inventory xmlns="">                <Book>                    <Chapter Number="1">                        <Title>Chapter A</Title>                    </Chapter>                    <Chapter Number="2">                        <Title>Chapter B</Title>                    </Chapter>                    <Chapter Number="3">                        <Title>Chapter C</Title>                    </Chapter>                    <Chapter Number="4">                        <Title>Chapter D</Title>                    </Chapter>                    <Chapter Number="5">                        <Title>Chapter E</Title>                    </Chapter>                </Book>            </Inventory>        </x:XData>    </XmlDataProvider></Page.Resources>    <StackPanel Margin="20">    <ListBox HorizontalAlignment="Center" Padding="2">        <ListBox.ItemsSource>            <Binding Source="{StaticResource InventoryData}" XPath="*" />        </ListBox.ItemsSource>        <ListBox.ItemTemplate>            <DataTemplate>                <TextBlock FontSize="20" Margin="5">                    <TextBlock.Text>                        <Binding XPath="Title" />                    </TextBlock.Text>                </TextBlock>            </DataTemplate>        </ListBox.ItemTemplate>    </ListBox></StackPanel>

 

Add an animation from transparent to clear to The ListBox, which is implemented through the event trigger.

<ListBox.Triggers>    <EventTrigger RoutedEvent="ListBox.Loaded">        <BeginStoryboard>            <Storyboard>                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:5" />            </Storyboard>        </BeginStoryboard>    </EventTrigger></ListBox.Triggers>

Set the color based on the Number attribute

<Style TargetType="{x:Type ListBoxItem}">    <Setter Property="Margin" Value="2" />    <Setter Property="Padding" Value="2" />    <Style.Triggers>        <DataTrigger Binding="{Binding XPath=@Number}" Value="3">            <Setter Property="TextBlock.Foreground" Value="Red" />        </DataTrigger>        <DataTrigger Binding="{Binding XPath=@Number}" Value="4">            <Setter Property="TextBlock.Foreground" Value="Blue" />        </DataTrigger>    </Style.Triggers></Style>

 

 

 

 

 

 

 

To be continue...