模版 和样式

 

模版和样式的区别

1  作用范围不同

模板(Template)用于定义单个控件的整体外观和行为,包括控件的视觉结构、布局和交互逻辑等。每个控件只能应用一个模板。
样式(Style)可以应用于多个控件,用于设置控件的一些通用属性,如前景色、背景色、字体等。2
2  控制力度不同

模板提供了对控件的完全控制权,可以完全重新定义控件的外观和行为。
样式只能设置控件的部分属性,无法完全重新定义控件的外观和行为。
3  创建方式不同

模板通常使用 XAML 代码来定义,可以包含多个视觉元素和事件处理程序。
样式可以使用 XAML 或代码来定义,通常只包含属性设置

样式中包含模版，所以一般推荐使用样式，个人观点

样式运用 Style

1  、新建一个资源文件 BtnStyle222.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="btnStyle" TargetType="Button">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Height" Value="40"></Setter>
        <Setter Property="Width" Value="80"></Setter>
        <Setter  Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Border CornerRadius="6"  Background="#007DFA">
                            <!--控件显示-->
                            <ContentControl 
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="{TemplateBinding Foreground}"
                                Content="{TemplateBinding Content }" />
                        </Border>
                          <!--这个一定要在后面否则没效果-->
                        <Border  Background="#22ffffff" Name="back"  Visibility="Hidden" CornerRadius="10" />
                    </Grid>
                   <!--触发器-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter  Property="Visibility" Value="Visible" TargetName="back" />
                            <Setter  Property="Foreground" Value="Red"   />
                            <Setter Property="Opacity" Value="0.9"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 2、将文件添加到app.xaml 资源文件中

<Application x:Class="Oge.IOTPlat.BLEProductFactory.UI.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:conver="clr-namespace:Oge.IOTPlat.BLEProductFactory.UI.Convers"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             ShutdownMode="OnExplicitShutdown" >
    <Application.Resources>
        <ResourceDictionary>
                <ResourceDictionary  Source="/Style/BtnStyle222.xaml"/>
        </ResourceDictionary>
    </Application.Resources>
</Application>

3 、运用

      <Button  Content="登录" 
                         Command="{Binding  LoginClick}"  CommandParameter="{Binding ElementName=wlogin}" 
                         Margin="20,0"
                         Grid.Row="3" Style="{StaticResource  btnStyle}"  
                          FontSize="16">
                    </Button>

鼠标放上去效果

模版运用 Template

1 、创建一个资源文件

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ControlTemplate TargetType="Button" x:Key="btnBlue">
        <Grid>
            <Border  Background="#22ffffff" Name="back" Visibility="Hidden"  CornerRadius="4"/>
            <!--//#007DFA-->
            <Border Background="White" CornerRadius="5">
                <ContentControl  Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}"/>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger  Property="IsMouseOver" Value="TRUE">
                <Setter  Property="Visibility" TargetName="back"  Value="Visible"/>
            </Trigger>
        </ControlTemplate.Triggers>
       
    </ControlTemplate>
</ResourceDictionary>

2 、 将文件添加到app.xaml 资源文件中

 3、运用  Template

<Button  Content="登录" 
                         Command="{Binding  LoginClick}"  CommandParameter="{Binding ElementName=wlogin}" 
                         Margin="20,0"
                         Grid.Row="3" Template="{StaticResource   btnBlueAllBulue}"  
                         Height="40" Foreground="White"  FontSize="16">