Как отделить логику от дизайна у кнопок? Как забиндить коллекцию кнопок в View?

Question

Подскажите,пожалуйста, у меня имеется класс кнопки:

    public class Button : INotifyPropertyChanged
    {
        public int Left { get; }
        public int Top { get; }
        public Button(int left, int top)
        {
            Left = left;
            Top = top;
        }
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName]string prop = "")
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
        private bool isState;
        public bool IsState
        {
            get
            {
                return isState;
            }
            set
            {
                isState = value;
                OnPropertyChanged("IsState");
            }
        }
    }

Имеется VM для кнопок, в котором находятся а)список с инициализацией восьми кнопок:

        public ObservableCollection<Button> Buttons { get; } = new ObservableCollection<Button>
        {
            new Button(437, 153), // Button[0]
            new Button(396, 248), // Button[1]
            new Button(558, 250), // Button[2]
            new Button(661, 253), // Button[3]
            new Button(267, 246), // Button[4]
            new Button(873, 252), // Button[5]
            new Button(667, 505), // Button[6]
            new Button(875, 506), // Button[7]
        };

б) одна команда для изменения состояния каждой кнопки, в зависимости какую нажать:

        private RelayCommand stateCommand;
        public RelayCommand StateCommand
        {
            get
            {
                return stateCommand ??
                  (stateCommand = new RelayCommand(obj =>
                  {
                      ChangeState((Button)obj);
                  }));
            }
        }

в) сам метод ChangeState, который меняет состояние кнопки:

        void ChangeState(Button button)
        {
            button.IsState = !button.IsState;
        }

А реализация коллекции кнопок в View сделана таким образом:

            <ItemsControl ItemsSource="{Binding Buttons}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding Left}"/>
                        <Setter Property="Canvas.Top" Value="{Binding Top}"/>
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Button Width="48" Command="{Binding DataContext.StateCommand, ElementName=mainWindow}" CommandParameter="{Binding}">
                                        <Image Style="{StaticResource image}" Height="22"/>
                                    </Button>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>

У кнопки есть вложенная Image, к ней подсоединен стиль:

    <Style x:Key="image">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsState}" Value="False">
                <Setter Property="Image.Source" Value="Resources/image1.png" />
            </DataTrigger>
            <DataTrigger Binding="{Binding IsState}" Value="True">
                <Setter Property="Image.Source" Value="Resources/image2.png" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

В итоге код функционирует как и от него требовалось, а именно: кликаем на любую кнопку из списка восьми кнопок, и на кликнутой кнопке меняется картинка. Всё замечательно, за исключением, как видите, я ручками вставляю значения Canvas.Top и Canvas.Left, так как при такой компоновке кнопки не отображаются во время разработки в окне макета, а появляются только при запуске программы (это так же является минусом, от которого хочется избавиться).

Вопрос: как написать код так, чтобы у меня также на все 8 кнопок осталась одна команда, которая понимает у какой конкретно кнопки надо поменять состояние, но при этом, чтоб каждую кнопку я мог выводить в View xaml коде отдельно и менять у каждой кнопки свойства, ну как обычно, что-то типа такого:

            <Button x:Name="button1" Width="41" Height="38" command="тут бинд команды" Opacity="1" Canvas.Left="100" Canvas.Top="146">
                <Image Style="{StaticResource image}" Height="22"/>
            </Button>
            <Button x:Name="button2" Width="50" Height="12" command="тут бинд команды" Opacity="1" Canvas.Left="200" Canvas.Top="346">
                <Image Style="{StaticResource image}" Height="22"/>
            </Button>

и т.д., тобишь, чтоб кнопки были отображены на макете?

Answer 1

Предположим, что у нас есть ViewModel челвоека:

class Person
{
    public Person(string name, int age)
        => (Name, Age) = (name, age);

    public string Name { get; set; }
    public int Age { get; set; }
}

В главной VM мы например делаем список людей:

class MainViewModel
{
    public List<Person> Persons { get; set; } = new List<Person>
    {
        new Person("Вася", 13),
        new Person("Петя", 6)
    };
}

В XAML привязываем все и задаем нужный нам вид:

<ItemsControl ItemsSource="{Binding Persons}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name, StringFormat=Имя: {0}}"/>
                <TextBlock Text="{Binding Age, StringFormat=Возраст: {0}}" Margin="5 0 0 0"/>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

При запуске данные есть:

А в дизайнере пустой, белый лист:

Вопрос, как отобразить данные в дизайнере? Да все довольно просто:

В View слое (XAML), задаем DataContext для дизайнера, указав ему нужный тип данных:

d:DataContext="{d:DesignInstance {x:Type vm:MainViewModel}}"

И после этого студия начнем нам выдавать подсказки по именам, а также отобразит тестовые данные в дизайнере:

Мы можем немного усовершенствовать это все, включив у DesignInstance свойство IsDesignTimeCreatable, тогда получим следующий вид строки:

d:DataContext="{d:DesignInstance {x:Type vm:MainViewModel}, IsDesignTimeCreatable=True}"

В таком случае студия не будет делать свои "фейковые" данные, а попытается создать объект для отображения с заготовленными для нее данными, в моем случае данные статичны, они прописаны при инициализации коллекции и студия их примет:

Если вам нужны данные для динамичного объекта, то стоит почитать этот ответ.