MVVMを使用してWPFプログレスバーを手動で増減する

Question

私は、WPFのプログレスバーを使ってGoogleで検索しましたが、プラスとマイナスのボタンを使って手動で増減します。しかし、無駄に私がしたいものに似ているものは見つかりませんでした。

MVVMの方法で（ボタンを使用して）手動で増分または減分するWPFプログレスバーを実装する方法を教えてください。以下の画面キャプチャはモックアップUIデザインを示しています。

ユーザーがプラスボタンをクリックすると、プログレスバーが10分ずつ増加されることをイメージショー。一方、マイナスボタンをクリックすると、プログレスバーが10分減少します。

私はWPFとMVVMを学び始めました。どんな助けでも大歓迎です。

Answer 1

WPFとMVVMを使用して、1つのモデルをさまざまなビューでどのように表示できるかを示す簡単な例を作成しました。ここでxamlで私はフォームSliderとProgressBarに置いた - 彼らは私たちのViewModelのビューです。必要なプロパティ（最小値、最大値、値）は、ViewModelのプロパティにバインドされます。 "Plus"と "Minus"ボタンのプロパティ "Command"もViewModel（IncreaseCommand、DecreaseCommand）内の対応するPropsにバインドされています。

<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); 
    } 
} 

そして取得するための最後には、すべての作業は、新しいビューモデルを作成することで、このモデルにウィンドウのDataContextを設定します。リンクを共有するための

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

Answer 2

私はあなたがWPFのカスタムSliderコントロールを使用して解決するべきだと思う。 http://www.codescratcher.com/wpf/custom-slider-control-in-wpf/