WPF学习(二):自定义Button控件
- 将主窗口设置为纯透明:
Background="{x:Null}" WindowStyle="None" AllowsTransparency="True"
- 自定义圆Button:
xaml文件中:
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="OneBt">
<Border x:Name="OneBorder" CornerRadius="150" Background="Aqua" Margin="2">
<Border.Effect>
<DropShadowEffect Opacity="1" Color="Red" Direction="10" BlurRadius="10" ShadowDepth="20"></DropShadowEffect>
</Border.Effect>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="OneBorder" Value="Aquamarine"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="OneBorder" Property="Background" Value="Brown"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Button x:Name="OneButton" Grid.Row="0" Grid.Column="0" Template="{StaticResource OneBt}"></Button>
- 自定义斜矩形控件:
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="TwoBt">
<Path x:Name="twoButton" Data="M0 75 75 0 150 75 75 150 0 75 Z" Fill="Green"></Path>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="twoButton" Property="Fill" Value="Chartreuse"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="twoButton" Property="Fill" Value="Chocolate"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Button x:Name="TwoButton" Grid.Row="0" Grid.Column="1" Template="{StaticResource TwoBt}"></Button>
- 全部xaml代码如下:
<Window x:Class="WpfApp3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="系统登录" Height="300" Width="300"
WindowStartupLocation="CenterScreen" ResizeMode="NoResize"
Background="{x:Null}" AllowsTransparency="True" WindowStyle="None">
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="OneBt">
<Border x:Name="OneBorder" CornerRadius="150" Background="Aqua" Margin="2">
<Border.Effect>
<DropShadowEffect Opacity="1" Color="Red" Direction="10" BlurRadius="10" ShadowDepth="20"></DropShadowEffect>
</Border.Effect>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="OneBorder" Value="Aquamarine"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="OneBorder" Property="Background" Value="Brown"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate TargetType="Button" x:Key="TwoBt">
<Path x:Name="twoButton" Data="M0 75 75 0 150 75 75 150 0 75 Z" Fill="Green"></Path>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="twoButton" Property="Fill" Value="Chartreuse"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="twoButton" Property="Fill" Value="Chocolate"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Border CornerRadius="10" Background="{x:Null}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="OneButton" Grid.Row="0" Grid.Column="0" Template="{StaticResource OneBt}"></Button>
<Button x:Name="TwoButton" Grid.Row="0" Grid.Column="1" Template="{StaticResource TwoBt}"></Button>
<Button x:Name="ThreeButton" Grid.Row="1" Grid.Column="0"></Button>
<Button x:Name="FourButton" Grid.Row="1" Grid.Column="1"></Button>
</Grid>
</Border>
</Window>