An introduction for WPFists
<div>You've clicked <span data-bind='text: numberOfClicks'> </span> times</div>
<TextBlock>
<TextBlock.Inlines>
<Run>You've clicked </Run>
<Run Text="{Binding NumberOfClicks.Value}"/>
<Run> times</Run>
</TextBlock.Inlines>
</TextBlock>
<button
data-bind='click: registerClick, disable: hasClickedTooManyTimes'>
Click me
</button>
WPF
<Button Command="{Binding RegisterClickCommand}"> Click me</Button>
public ICommand RegisterClickCommand
{
get { return new RelayCommand(
RegisterClick, () => !HasClickedTooManyTimes.Value); }
}
<div data-bind='visible: hasClickedTooManyTimes'>
That's too many clicks! Please stop before you wear out your fingers.
<button data-bind='click: resetClicks'>Reset clicks</button>
</div>
WPF
<StackPanel Orientation="Horizontal">
<StackPanel.Visibility>
<Binding Path="HasClickedTooManyTimes.Value">
<Binding.Converter>
<BooleanToVisibilityConverter />
</Binding.Converter>
</Binding>
</StackPanel.Visibility>
<TextBlock>That's too many clicks! Please stop before you wear out your fingers.</TextBlock>
<Button Command="{Binding ResetClicks}">Reset clicks</Button>
</StackPanel>
var ClickCounterViewModel = function() {
this.numberOfClicks = ko.observable(0);
this.registerClick = function() {
this.numberOfClicks(this.numberOfClicks() + 1);
};
this.resetClicks = function() {
this.numberOfClicks(0);
};
this.hasClickedTooManyTimes = ko.computed(function() {
return this.numberOfClicks() >= 3;
}, this);
};
ko.applyBindings(new ClickCounterViewModel());
public partial class MainWindow : Window
{
public MainWindow()
{
DataContext = new MainWindowViewModel();
InitializeComponent();
}
}