WPF-控件样式设置

1、控件样式设置

  • 1.1、内嵌式为相同控件设置样式
  • `
复制代码
  <Window.Resources>
   <Style  TargetType="Button">
       <Setter Property="Background" Value="Yellow"></Setter>
       <Setter Property="Width" Value="60"></Setter>
       <Setter Property="Height" Value="80"></Setter>
       <Setter Property="FontSize" Value="18"></Setter>
   </Style>    
   </Window.Resources> 
   <Button  Content="通用"></Button>`
    <!--为指定key设置样式-->
            <Style x:Key="loginStyle" TargetType="Button">
       <Setter Property="Background" Value="Red"></Setter>
       <Setter Property="Width" Value="60"></Setter>
       <Setter Property="Height" Value="80"></Setter>
       <Setter Property="FontSize" Value="18"></Setter>
   </Style>
    <Button Style="{StaticResource loginStyle}" Content="登录"></Button>
            <!--动态资源可以通过方法更改相关信息-->
   <Button  Style="{DynamicResource loginStyle }" Content="动态资源" Click="Button_Click"></Button>

1.2、外联式

csharp 复制代码
BaseButtonStyle.xaml文件
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--设置一个基础样式-->
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="18"></Setter>
        <Setter Property="Margin" Value="20,30"></Setter>
    </Style>
    <!--为指定button设置样式并且继承基础样式-->
    <Style x:Key="quitStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Background" Value="Yellow"></Setter>
        <Setter Property="Width" Value="60"></Setter>
        <Setter Property="Height" Value="80"></Setter>
    </Style>
</ResourceDictionary>

     <!--使用BaseButtonStyle里全局样式-->
    <StackPanel>
        <Button  Content="登录"></Button>
        <Button Style="{StaticResource quitStyle}" Content="退出"></Button>
        <Button  Content="通用"></Button>
    </StackPanel>

1.3、控制内置模板(触发器Triggers)

csharp 复制代码
<Grid>
    <!--<Button Width="100" Height="50" Content="自定义按钮" Background="Red" Foreground="Wheat"></Button>-->
    <Button Width="100" Height="50"  Content="自定义按钮" Background="Red" Foreground="Wheat">
        <Button.Template>
           <ControlTemplate TargetType="Button">
                <!--等价 <ControlTemplate TargetType="{x:Type Button}">-->
                <!-- border 属性都可以,如颜色也可以这么写Background="{TemplateBinding Background}"-->
                <Border x:Name="border" Background="Red" BorderBrush="Black" BorderThickness="2" CornerRadius="10">
                    <!-- <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Content="自定义内容">                            
                    </ContentPresenter>-->
                    <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Border>
               <!--触发器鼠标放上去改变属性-->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Black"></Setter>
                        
                    </Trigger>
                </ControlTemplate.Triggers>
                
            </ControlTemplate>
        </Button.Template>
    </Button>

    <!-- 延伸CornerRadius 假如CornerRadius属性也想使用绑定,但是Button是没有CornerRadius属性的,可以采用自定义一个Button,然后定义一个依赖属性,来实现-->

</Grid>
事件触发器
      <Style.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                                            To="Green" Duration="0:0:0.5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>

1.4、抽离模板(控件模板)

    <!--将第三个模板提取出来-->
    <Window.Resources>
        <ControlTemplate x:Key="ButtonTemplated" TargetType="{x:Type Button}">
            <Border Name="Border" BorderThickness="2" CornerRadius="3" BorderBrush="AliceBlue" Background="Aqua" TextBlock.Foreground="White">
                <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="Center" VerticalAlignment="Center" >
                </ContentPresenter>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True" >
                    <Setter TargetName="Border"   Property="Background" Value="Red"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Border"   Property="Background" Value="White"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>

        </ControlTemplate>
    </Window.Resources>
    <StackPanel Margin="5">
        <Button Margin="5" Padding="3">Normal Button</Button>
        <Button Name="mybutton" Margin="5" Padding="3" Template="{StaticResource ResourceKey=ButtonTemplated}">Templated Button</Button>
  </StackPanel>
   <!--数据模板-->
 <DataTemplate x:Key="CustomItemTemplate">
     <StackPanel Orientation="Horizontal">
         <TextBlock Text="{Binding name}" Width="100"/>
         <TextBlock Text="{Binding age}" Width="100"/>
     </StackPanel>            
 </DataTemplate>
  <ListBox x:Name="listBox" ItemTemplate="{StaticResource CustomItemTemplate}"></ListBox>

2.1点击事件

csharp 复制代码
 <Button Width="50" Height="50" Background="Red" Content="点击" Click="Button_Click"></Button>
     public partial class Window5 : Window
    {
        public Window5()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {

        }
    }
相关推荐
mudtools12 小时前
.NET驾驭Word之力:玩转文本与格式
c#·.net
唐青枫16 小时前
C#.NET 数据库开发提速秘籍:SqlSugar 实战详解
c#·.net
mudtools1 天前
.NET驾驭Word之力:理解Word对象模型核心 (Application, Document, Range)
c#·.net
侃侃_天下2 天前
最终的信号类
开发语言·c++·算法
echoarts2 天前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Aomnitrix2 天前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
大飞pkz2 天前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
每天回答3个问题2 天前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
伍哥的传说2 天前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小莞尔2 天前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机