Question

我使用WPF中的进度条在Google中搜索，该进度条将使用加号和减号按钮手动递增和递减。但是，无济于事并没有找到一个与我想要的相似的东西。

如何实现WPF进度条，该进度条将以MVVM方式手动递增或递减（使用按钮）。下面的屏幕截图显示了模拟UI设计。

图像显示，当用户单击加号按钮时，进度条将增加10分钟。另一方面，单击减号按钮会将进度条减少10分钟。

我刚开始学习WPF和MVVM。非常感谢任何帮助。

Answer 1

我创建了一个简单的示例，它使用WPF和MVVM来显示如何使用不同的视图显示一个模型。在xaml中，我放置了一个表单Slider和ProgressBar - 它们是我们的ViewModel的视图。我们需要的属性（最小值，最大值，值）绑定到ViewModel的属性。 “Plus”和“Minus”按钮的属性“Command”也绑定到ViewModel中的相应道具（IncreaseCommand，DecreaseCommand）。

<Window>
    <StackPanel Orientation="Horizontal">
        <Button Width="50" Height="40" Content="-" Command="{Binding DecreaseCommand}"/>
        <StackPanel Width="400" Orientation="Vertical">
            <Slider Height="40" Margin="0,50,0,0" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding Value}"/>
            <ProgressBar Height="40" Margin="0,100,0,0" Minimum="{Binding Minimum}" Maximum="{Binding Maximum}" Value="{Binding Value}"/>
            <TextBlock TextAlignment="Center" Margin="0,50,0,0" Text="{Binding Value}"/>
        </StackPanel>
        <Button  Width="50" Height="40" Content="+" Command="{Binding IncreaseCommand}"/>
    </StackPanel>
</Window>

要在ViewModel中实现命令功能，您需要创建ICommand接口的实现：

public class RelayCommand : ICommand
{
    private Predicate<object> _canExecute;
    private Action<object> _execute;

    public RelayCommand(Predicate<object> canExecute, Action<object> execute)
    {
        _canExecute = canExecute;
        _execute = execute;
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }
}

这是ViewModel类，它实现了INotifyPropertyChanged接口以保持视图更新。

public class ViewModel:INotifyPropertyChanged
{
    public ViewModel()
    {
        _value = 0;
        _minimum = 0;
        _maximum = 180;
        _step = 10;
    }

    private int _step;
    private int _minimum;
    private int _maximum;

    private ICommand _increaseCommand;
    public ICommand IncreaseCommand
    {
        get
        {
            if (_increaseCommand == null)
            {
                _increaseCommand = new RelayCommand(
                p => _value + _step <= _maximum,
                Increase);
            }
            return _increaseCommand;
        }
    }

    private ICommand _decreaseCommand;
    public ICommand DecreaseCommand
    {
        get
        {
            if (_decreaseCommand == null)
            {
                _decreaseCommand = new RelayCommand(
                p => _value - _step >= _minimum,
                Decrease);
            }
            return _decreaseCommand;
        }
    }


    private void Increase(object param)
    {
        Value = Value + _step;
    }

    private void Decrease(object param)
    {
        Value = Value - _step;
    }

    private int _value;
    public int Value
    {
        get { return _value; }
        set { _value = value; InvokePropertyChanged(new PropertyChangedEventArgs("Value")); }
    }

    public int Minimum
    {
        get { return _minimum; }
    }

    public int Maximum
    {
        get { return _maximum; }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void InvokePropertyChanged(PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, e);
    }
}

最后一件事就是创建新的ViewModel并将DataContext窗口设置为此模型：

public MainWindow()
{
    InitializeComponent();
    var model = new ViewModel();
    DataContext = model;
}

Answer 2

我认为你应该通过使用WPF的自定义Slider控件代替Progress bar来解决这个问题。此链接可以帮助您：http://www.codescratcher.com/wpf/custom-slider-control-in-wpf/

如何使用MVVM手动递增/递减WPF进度条

2 个答案: