I have two buttons in DataTemplate. It is necessary to bind them to an int property so that, by pressing one button, the variable increases, while the other decreases. Dear experts, I ask for help.

<DataTemplate x:Key="PriceItems"> <StackPanel Background ="Azure" Orientation="Horizontal" Margin="10,10"> <Button x:Name="IncrementBtn" Content="+" FontSize="18" Width="80" /> <Label x:Name="CntLabel" Content="{Binding DataContext.TicketCnt, RelativeSource={RelativeSource TemplatedParent}}" VerticalContentAlignment="Center" HorizontalAlignment="Center" FontSize="16"/> <Button x:Name="DecrementBtn" Content="-" FontSize="18" Width="80" Margin="10,10"/> </StackPanel> </DataTemplate>
  • Make a ViewModel with 2 commands and an int field, bind buttons to commands. - tym32167
  • I’m new to WPF, I’m writing without MVVM, how can I do more in detail? - MS24
  • Example - github.com/ReedCopsey/Gjallarhorn.Bindable/tree/master/samples/… - user227049
  • you can do without additional libraries, but the code will be much simpler and clearer with them - user227049
  • The bottom line is this: you can solve this particular problem without MVVM, but it will be a crutch code. If you want to work with WPF in the way it was intended by developers, then you should study MVVM and its application to WPF. The benefit of information on this topic is complete. - tym32167

1 answer 1

Suppose you display in the window a certain collection of elements. Let the type of these elements Item :

 class Item : INotifyPropertyChanged { ... int v; public int Value { get => v; set { v = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Value))); } } }

I will not scare you MVVM, I just tie the collection of these elements in the window designer:

 public MainWindow() { InitializeComponent(); IC.ItemsSource = new[] { new Item { Value = 10 }, new Item { Value = 12 }, new Item { Value = 15 }, new Item { Value = 22 }, new Item { Value = 27 } }; }

Markup:

 <ItemsControl Name="IC"> <ItemsControl.ItemTemplate> <DataTemplate> <Grid Margin="2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="24"/> <ColumnDefinition Width="20"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Value}" VerticalAlignment="Center" HorizontalAlignment="Right"/> <Button Content="+" Grid.Column="1" Margin="2,0" Click="Plus_Click"/> <Button Content="-" Grid.Column="2" Click="Minus_Click"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

Event Handlers:

 private void Plus_Click(object sender, RoutedEventArgs e) { ((Item)(sender as Button).DataContext).Value++; } private void Minus_Click(object sender, RoutedEventArgs e) { ((Item)(sender as Button).DataContext).Value--; }

1000

  • Works! ) But I didn’t understand a bit how we access the collection using this code: ((Item) (sender as Button) .DataContext) .Value--; After all, the button is not attached to anything? - MS24
  • This is done by ItemsControl , it installs a DataContext for its elements - Andrey NOP
  • Thank you very much! I wanted to do it in a similar way, but for some reason I thought that for each control there will be a DataContext. - MS24 September
  • Yes, access is not to the collection, but to a specific element of this collection, each button is tied to its element - Andrey NOP