使用button按钮实现点击发送后倒计时60s,并且此期间button不可点击。
1.简易版
点击button按钮后,按钮背景颜色改变(变灰色),按钮实时显示60s倒计时,在此期间按钮不可再点,直到结束后按钮恢复原来的颜色(蓝色)。
XAML设计:
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Width="100" Height="80" Command="{Binding ButtonCommand}" >
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPress}" Value="true">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Content" Value="{Binding Time}"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsPress}" Value="false">
<Setter Property="IsEnabled" Value="True"/>
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Content" Value="{Binding Time}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>
ViewModel源代码:需要开一个线程来读秒倒计时,设置60s后线程自动结束。button按钮回到初始化状态。
using Prism.Commands;
using Prism.Mvvm;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
namespace WpfApp2
{
internal class ViewModel:BindableBase
{
public ViewModel()
{
Time = "send";
ButtonCommand = new DelegateCommand(ClickCommand);
}
private string _time;
public string Time
{
get { return _time; }
set { SetProperty(ref _time, value); }
}
private bool _isPress;
public bool IsPress
{
get { return _isPress; }
set { SetProperty(ref _isPress, value); }
}
public DelegateCommand ButtonCommand { get; set; }
public void ClickCommand()
{
CancellationTokenSource cts = new CancellationTokenSource(60*1000);
Task.Factory.StartNew(() =>
{
IsPress = true;
int i = 60;
while (!cts.IsCancellationRequested)
{
Time = i.ToString();
Task.Delay(1000).Wait();
i--;
}
IsPress = false;
Time = "send";
}, cts.Token);
}
}
}
实现的效果如图:
未点击时:
点击后:
读完60秒后自动恢复。
2.改变button原样式实现实现该功能。
在XAML界面设计中,重写button样式,把按钮变成圆形or椭圆,这里使用border来完成。
XMAL代码设计如下:
<Window x:Class="WpfApp2.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:WpfApp2"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Width="100" Height="80" Command="{Binding ButtonCommand}" >
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value >
<ControlTemplate TargetType="Button">
<Border BorderBrush="Black" BorderThickness="2" Width="100" Height="80" CornerRadius="20">
<ContentPresenter Content="{Binding Time}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPress}" Value="true">
<Setter Property="Background" Value="LightGray"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsPress}" Value="false">
<Setter Property="Background" Value="LightBlue"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsPress}" Value="true">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsPress}" Value="false">
<Setter Property="IsEnabled" Value="True"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
</Window>
这里注意:IsEnabled是button的属性,在设置触发器时需要将此功能放在button style下,而不是上面的borderstyle。
ViewModel代码和上面一样,不改变。
效果如图: