Вот как один из вариантов с привязками и MVVM*:
Создадим базовый класс для реализации INotifyPropertyChanged
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Создадим VM нашего числа, которая будет содержать в себе само число, цвет и простой метод для сброса цвета на стандартное:
public class Number : BaseViewModel
{
public Number(int numb)
{
Numb = numb;
Color = Brushes.Black;
}
private int numb;
private Brush color;
public int Numb
{
get => numb;
set
{
numb = value;
OnPropertyChanged();
}
}
public Brush Color
{
get => color;
set
{
color = value;
OnPropertyChanged();
}
}
public void ClearColor() => Color = Brushes.Black;
}
Далее нам нужна сама коллекция, которую мы заполним нашими цифрами:
public ObservableCollection<Number> Numbers { get; set; } = new ObservableCollection<Number>
{
new Number(1),
new Number(2),
new Number(3),
new Number(4)
};
Я лично размещаю эту коллекцию прям в MainWindow
(но лучше все разделять на отдельные VM слои) и по этому как DataContext
я укажу окно:
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
Далее нам нужен функционал кнопки. Для изменения значений по очереди, нам понадобится какой нибудь счетчик, простое число. Также для удобства (что бы не вычислять позже) мы вынесем отдельно еще и предыдущее, "покрашенное" нами число:
private int current;
private Number prev;
Теперь код самого действия:
- Вычисляем необходимую нам цифру. Я лично сделаю это с помощью LINQ, а именно метода
Skip()
(который пропустит определенное число объектов) и FirstOrDefault()
(который возьмет первый, подходящий нам элемент).
- Если сохраненная нами предыдущая цифра не равна
null
, то выполняем сброс цвета.
- Если наша следующая цифра не равна
null
(то есть найдена), меняем ей цвет и сохраняем ее для будущего изменения.
- Ну и сам счетчик, если он меньше объектов в нашей коллекции, то прибавляем, иначе сбрасываем на ноль.
Код всего MainWindow
в итоге будет следующим:
public partial class MainWindow : Window
{
public ObservableCollection<Number> Numbers { get; set; } = new ObservableCollection<Number>
{
new Number(1),
new Number(2),
new Number(3),
new Number(4)
};
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private int current;
private Number prev;
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var next = Numbers.Skip(current).FirstOrDefault();
prev?.ClearColor();
if (next != null)
{
next.Color = Brushes.Red;
prev = next;
}
current = current < Numbers.Count-1 ? current + 1 : 0;
}
}
- Все, осталось сделать нам XAML разметку. Она до безобразия проста:
StackPanel
, которая позволяет нам разместить рядом контролы. В нее помещаем кнопку и ItemsControl
.
ItemsControl
- простейший вывод нашей коллекции так, как нам захочется. С помощью ItemsPanel
задаем отображение элементов построчно, а с помощью ItemTemplate
мы задаем вид каждого элемента.
В итоге получаем следующее:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<ItemsControl ItemsSource="{Binding Numbers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Numb}" Foreground="{Binding Color}" FontSize="25"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Content="Сменить" Click="ButtonBase_OnClick"/>
</StackPanel>
Запускаем и любуемся результатом:

*Я не буду реализовывать тут команды и отдельный VM для основной логики. Так что это почти правильный MVVM. В реальном проекте стоит задуматься над реализацией команд, а не использовать Click
!
ItemsControl
или его аналог... Если же у вас статичные цифры, то сделайтеTextBlock
, который будет содержать внутриRun
со своим текстом и цветом. – EvgeniyZ 1 сен '18 в 12:50