C#按钮样式设置XMAL

2024-06-02 22:37
c#, css, 前端, html, javascript
17人已看

统一按钮样式

<Window.Resources> <!--按钮样式统一设置，个别按钮单独定义样式的话则需要在定义按钮位置单独设置-->
    <Style TargetType="Button">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="300"/>

    </Style>
</Window.Resources>

设置多个样式，并引用。

    <Window.Resources> <!--按钮样式统一设置，个别按钮单独定义样式的话则需要在定义按钮位置单独设置-->
        <Style x:Key="LoginStyle" TargetType="Button">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="300"/>
        </Style>
        
        <Style x:Key="QuitStyle"  TargetType="Button">
            <Setter Property="Background" Value="Red"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Width" Value="300"/>
        </Style>

    </Window.Resources>
    
    
    
    
    <StackPanel>
        <Button Style="{StaticResource LoginStyle}" Content="登陆" Width="200" Height="50" FontSize="20"/>
        <Button Style="{StaticResource QuitStyle}" Content="退出" Width="200" Height="50" FontSize="20"/>
    </StackPanel>

设置button的基础样式样式，然后继承基础样式，构建多个不同的样式

   <Window.Resources> 
        <Style TargetType="Button"> <!--设定一个基础的样式：属于全局应用-->
            <Setter Property="Background" Value="WhiteSmoke"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Margin" Value="20,10,20,10"/>
        </Style>

        <!--继承基础样式的基础生成新的样式1-->
        <Style x:Key="LoginStyle" TargetType="Button" BasedOn = "{StaticResource {x:Type Button} }">
            <Setter Property="Background" Value="Green"/>
        </Style>

        <!--继承基础样式的基础生成新的样式2-->
        <Style x:Key="QuitStyle" TargetType="Button" BasedOn = "{StaticResource {x:Type Button} }">
            <Setter Property="Background" Value="Red"/>
        </Style>



    </Window.Resources>

    <StackPanel>
        <Button  Style="{StaticResource LoginStyle}" Content="登陆" Width="200" Height="50" FontSize="20"/>
        <Button  Style="{StaticResource QuitStyle}" Content="退出" Width="200" Height="50" FontSize="20"/>
    </StackPanel>

自定义按钮，并且设置按钮的触发事件

 <Button Content="自定义按钮" FontSize="35" Height="120" Width="200" Background="Aquamarine" >
     <Button.Template>
         <ControlTemplate TargetType="Button">
             <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="CadetBlue" BorderThickness="4" CornerRadius="10" HorizontalAlignment="Center" VerticalAlignment="Center">
                 <ContentPresenter/>
             </Border>
             <!--设置按钮的触发-->
             <ControlTemplate.Triggers>

                 <Trigger Property="IsMouseOver" Value="True"><!--鼠标放在上方的触发方式-->
                     <Setter TargetName="border" Property="Background" Value="red"/>
                 </Trigger>

                 <Trigger Property="IsPressed" Value="True"><!--鼠标点击的触发方式-->
                     <Setter TargetName="border" Property="Background" Value="Green"/>
                 </Trigger>

             </ControlTemplate.Triggers>
             
         </ControlTemplate>
     </Button.Template>
 </Button>