WPF Style and Template, WPFStyleTemplate

WPF Style and Template, WPFStyleTemplate

Style in WPF is similar to CSS in Web applications. It is a property of a control and a type of resource.

Difference between ControlTemplate and DataTemplate:

ControlTemplate is used to change the original shape of the control (generally defined in the Style, put a new shell on the control, change the control'sAppearance), While DataTemplate does not change the original shape of the control (addDataIs equivalent to displaying the content that the control wants to display (there may be a combination of multiple controls )).

Generally, the Style is defined in Resources as follows:

<Windows.Resources>  <Style  x:Key="btnstyle"  TargetType="Button">     <Setter Property="Width" Value="80"/>     <Setter Property="Height" Value="50"/>     <Setter Property="Foreground" Value="Pink"/>     <Setter Property="FontSize" Value="20"/>     <Style.Triggers>        <Trigger Property="IsMouseOver" Value="true">           <Setter Property="Background" Value="pink"/>        </Trigger>        <MultiTrigger>          <MultiTrigger.Conditions>             <Condition Property="IsMouseOver" Value="false"/>             <Condition Property="FontSize" Value="20"/>          </MultiTrigger.Conditions>          <MultiTrigger.Setters>             <Setter Property="Background" Value="Gold"/>          </MultiTrigger.Setters>        </MultiTrigger>     </Style.Triggers>  </Style><Window.Resources>

　　

<Button x:Name="button1" Style="{StaticResource btnstyle}" Content="button1"  >

　　

button1.style=(style)Resources["btnstyle"];

　　

If you only need to slightly modify the control (adjust the size, position, Font, color, etc.), you can use the style; if you need to change the appearance and behavior of the control, use controlTemplate (shape, event triggering, such as mouse stop effect, etc ). In actual projects, the Template is often defined in the Style, and the Template attribute of the control is set through the Property in the Style.

All COntrol controls in WPF have the Template attribute. The following code shows commonly used templates in WPF.

<Window x:Class="WPFXAMLTest.WindowControlTemplate"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="WindowControlTemplate" Height="300" Width="300">    <Grid Background="Yellow">        <Button Width="200" Height="60" Background="Cyan">            <Button.Template>                <ControlTemplate TargetType="Button">                    <Grid>                        <Rectangle Width="180" Height="50" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"/>                        <ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" RecognizesAccessKey="True"/>                    </Grid>                </ControlTemplate>            </Button.Template>                <Button.Content>                <Grid>                    <Ellipse Fill="Red" Width="160" Height="40"/>                    <TextBlock Text="DebugLZQ" VerticalAlignment="Center" HorizontalAlignment="Center"/>                </Grid>            </Button.Content>        </Button>        <Button  HorizontalAlignment="Left" Margin="105,190,0,0" VerticalAlignment="Top" Width="75">           <Button.Template>               <ControlTemplate >                    <TextBlock Text="DebugLZQ" VerticalAlignment="Center" HorizontalAlignment="Center"/>                </ControlTemplate>           </Button.Template>        </Button>    </Grid></Window>

<Style x: key = "btnstyle" TargetType = "Button"> <Setter Property = "Width" Value = "80"/> <Setter Property = "Height" Value = "50"/> <setter Property = "Foreground" Value = "Pink"/> <Setter Property = "FontSize" Value = "20"/> <Setter Property = "Template"> <! -- All Control controls have the Style and Template attributes. The former is used to Control the original properties of the Control. The latter is used to define the internal structure of the Control and change the Control appearance and shape. --> <Setter. value> <ControlTemplate TargetType = "Button"> <! -- ControlTemplate describes the behavior and style of the control --> <Grid Width = "80" Height = "50"> <Image Source = "Images/1.png" Stretch =" Fill "/> <! ----> <ContentPresenter HorizontalAlignment = "Center" verticalignment = "Center"/> </Grid> <ControlTemplate. triggers> <Trigger Property = "IsMouseOver" Value = "true"> <Setter Property = "Effect"> <Setter. value> <DropShadowEffect ShadowDepth = "4"/> </Setter. value> </Setter> </Trigger> </ControlTemplate. triggers> </ControlTemplate> </Setter. value> </Setter> </Style>

　　

<Button x:Name="button1" Style="{StaticResource btnstyle}" Content="button1"    Click="Button_Click"  Margin="30,23,393,238"/>

　　

<Style x: key = "btnstyle2" TargetType = "Button"> <Setter Property = "Width" Value = "80"/> <Setter Property = "Height" Value = "50"/> <setter Property = "ContentTemplate"> <! -- 2. ContentTemplate, without changing the control behavior, only changes the control content --> <Setter. Value> <DataTemplate> <! -- The returned value is DataTemplate --> <Grid> <Image Source = "Images/1.png" Stretch =" Fill "/> <TextBlock Text =" {TemplateBinding Content} "FontSize =" 20 "HorizontalAlignment = "Center" verticalignment = "Center" Foreground = "Pink"/> </Grid> </DataTemplate> </Setter. value> </Setter> </Style>

　　

<Button x:Name="button2" Style="{StaticResource btnstyle2}" Content="button2" Margin="30,117,392,144" />

　　

<Style x:Key="lstboxstyle" TargetType="ListBox">            <Setter Property="ItemTemplate">                <Setter.Value>                    <DataTemplate>                        <StackPanel>                            <Image Source="{Binding ImgPath}" Width="70" Height="70" Margin="0"/>                            <TextBlock Text="{Binding ImgTxt}" HorizontalAlignment="Center" Margin="5"/>                        </StackPanel>                    </DataTemplate>                </Setter.Value>            </Setter>        </Style>

　　

<ListBox Style="{StaticResource lstboxstyle }" Height="214" HorizontalAlignment="Left" Margin="226,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="153" />

　　

//Binding ListBox            ArrayList list = new ArrayList();            list.Add(new { ImgPath="Images/1.png",ImgTxt="DebugLZQ1"});            list.Add(new { ImgPath = "Images/1.png", ImgTxt = "DebugLZQ2" });            list.Add(new { ImgPath = "Images/1.png", ImgTxt = "DebugLZQ3" });            listBox1.ItemsSource = listBox2.ItemsSource = list;

　　

 

<Style x: Key = "lstboxstyle2" TargetType = "ListBox"> <Setter Property = "ItemsPanel"> <Setter. Value> <ItemsPanelTemplate> <! -- ItemsPanelTemplate specifies the layout style, Combox, TreeView, DataGrid, and TabelControl of the control subitem. --> <StackPanel Orientation = "Horizontal"/> </ItemsPanelTemplate> </Setter. value> </Setter> <Setter Property = "ItemTemplate"> <! -- ItemTemplate defines the appearance of a subitem --> <Setter. Value> <DataTemplate> <! -- Return Value DataTemplate --> <StackPanel> <Image Source = "{Binding ImgPath}" Width = "70" Height = "70" Margin = "0"/> <TextBlock Text =" {Binding ImgTxt} "HorizontalAlignment =" Center "Margin =" 5 "Foreground =" Pink "/> <! -- Change here --> </StackPanel> </DataTemplate> </Setter. Value> </Setter> <Setter Property = "ItemContainerStyle"> <! -- Can also be changed here, or directly in TextBlock --> <Setter. value> <Style TargetType = "ListBoxItem"> <Setter Property = "FontSize" Value = "20"/> </Style> </Setter. value> </Setter> </Style>

　　

 

<ListBox Style="{StaticResource lstboxstyle2 }" Height="131" HorizontalAlignment="Left" Margin="42,256,0,0" Name="listBox2" VerticalAlignment="Top" Width="417" />