如何使用MVVM手動增加/減少WPF進度欄

Question

我已經在WPF中使用進度條在Google中進行了搜索，該進度條將使用加號和減號按鈕進行手動遞增和遞減。 但是，仍然沒有找到與我想要的東西相似的東西。

如何實現將以MVVM方式手動增加或減少（使用按鈕）的WPF進度條。 下面的屏幕截圖顯示了模擬UI設計。

該圖顯示，當用戶單擊加號按鈕時，進度條將增加10分鍾。 另一方面，單擊減號按鈕會使進度條減少10分鍾。

我才剛剛開始學習WPF和MVVM。 任何幫助是極大的贊賞。

Answer 1

我創建了一個簡單的示例，該示例使用WPF和MVVM演示如何使用不同的視圖顯示一個模型。 在xaml中，我將其放在一個Slider和ProgressBar窗體上-它們是我們ViewModel的視圖。 我們需要的屬性（最小，最大值，值）已綁定到ViewModel的屬性。 “加號”和“減號”按鈕的屬性“命令”也綁定到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控件代替進度條來解決該問題。 該鏈接可以為您提供幫助： http : //www.codescratcher.com/wpf/custom-slider-control-in-wpf/