2

Существует последовательность фигур определённого цвета, которая создаётся динамически при нажатии кнопки, а так же добавляется в WrapPanel.

private void BoxGenerator(int length)
    {
        Path boxpath = new Path();
        PathGeometry boxgeom = new PathGeometry();
        PathFigure boxfigure = new PathFigure();

        LineSegment ln1 = new LineSegment();
        LineSegment ln2 = new LineSegment();
        LineSegment ln3 = new LineSegment();

        
       


        boxfigure.StartPoint = new Point(0, 5);
        ln1.Point = new Point(0, -5 * length);
        ln2.Point = new Point(20, -5 * length);
        ln3.Point = new Point(20, 5);
        boxfigure.IsClosed = true;
        boxfigure.Segments.Add(ln1);
        boxfigure.Segments.Add(ln2);
        boxfigure.Segments.Add(ln3);
        boxgeom.Figures.Add(boxfigure);

        boxpath.Data = boxgeom;
        boxpath.Stroke = Brushes.Green;
        boxpath.StrokeThickness = 5;
        boxpath.Fill = new SolidColorBrush(Color.FromRgb(0, 0, 0));           
        PanelBoxes.Children.Add(boxpath);

    } 
private void InitialBut_Click(object sender, RoutedEventArgs e)
    {

        PanelBoxes.Children.Clear();
        string text = NumberBox.Text.Trim().ToString();
        text = Regex.Replace(text, "[ ]+", " ");

        bool error = false;
        if (text == "")
        {
            ErrorLabel.Content = "Заполните ячейку ввода цифр";
            return;
        }
        foreach (char symbol in text)
        {
            
            if(!Char.IsDigit(symbol) && (symbol != 32) && (symbol != 45))
            {
                error = true;
                
            }
        }
        if (error)
        {
            ErrorLabel.Content = "В наборе содержатся лишние символы, повторите ввод.";
            NumberBox.Text = "";
            return;
        }else
        {
            ErrorLabel.Content = "Полученная последовательность:"+text;
            
        }
        
        
        foreach (int elem in text.Split(' ').Select(int.Parse))
        {
            unsortList.Add(elem);
            BoxGenerator(elem);
        }
        
        
    }

Далее, по нажатию кнопки я пытаюсь изменить цвет некоторых блоков, но мне не удаётся получить к ним доступ, т.к. они находятся в WrapPanel. Вопрос: Как получить к ним доступ и как изменить у определённых элементов цвет? Пытался сделать так, но безуспешно

Path box = PanelBoxes.Children.OfType<Path>().First();
        box.Fill = new SolidColorBrush(Color.FromRgb(100, 100, 0));

Должно быть так: При нажатии кнопки(выделена красным), менялся цвет блока (выделено синим)Изменение цвета блока

2
  • Должно быть так - а как сейчас? Вы уверены, что обработчик события нажатия кнопки прицеплен к той кнопке, от которой ожидается действие? Ваша проблема за пределами показанного кода. Кстати, если расскажете, в чем смысл приложения, и какую задачу вы решаете, возможно подскажу, как решить это в WPF правильно, потому что пока видно, что вы не знакомы с инструментами WPF, а решаете "в лоб".
    – aepot
    20 авг 2020 в 8:20
  • 2
    Я пытаюсь визуально показать как работают сортировки, т.е. каждый блок это какое-то число, которое вводит пользователь в строку. После нажатия кнопки(например пузырьком) должна по шагам демонстрироваться перестановка блоков(сортировка). Все блоки изначально не отсортированы. Далее выбранный блок подсвечивается(меняется на другой цвет) и переставляется на нужную позицию
    – GamesBro
    20 авг 2020 в 8:31

1 ответ 1

2

Несмотря на то, что вопрос явно не содержит источника проблемы, которую вы пытаетесь победить, задача выглядит интересно, и я покажу ее решение. Проблема скорее всего в том, что в процессе сортировки вы исполняете синхронный код, и интерфейс просто не обновляется до тех пор, пока метод не закончит свою работу. Для исправления данной проблемы лучше использовать асинхронный подход к реализации (см. Асинхронное программирование).

Второй момент заключается в том, что вы используете подход, не являющийся эффективным в WPF. Так как в процессе написания кода вам приходится взаимодействовать напрямую с контролами, а интерфейс контролов не оптимизирован для такого взаимодействия в WPF, он просто неудобен. Такой способ реализации больше подходит к WinForms.

В WPF для максимального удобства при написании кода лучше всего использовать привязки Binding, команды ICommand и отделить логику работы программы от самого интерфейса приложения, оповещая его с помощью реализации интерфейса INotifyPropertyChanged. А арихитектурно эти методики удобнее всего использовать в рамках шаблона программирования MVVM. Этот шаблон программирования очень популярен в WPF и UWP приложениях, и если интересно, вы сможете найти очень много примеров его применения, в том числе здесь на StackOverflow на русском.

Я написал демонстрационное приложение, которое делает примерно то, что вы задумали.

Часть 1. Вспомогательные классы

Эти классы предназначены для удобства при использовании команд и оповещения интерфейса.

NotifyPropertyChanged.cs

public class NotifyPropertyChanged : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Я буду наследоваться от этого класса там, где мне надо оповещать интерфейс об изменениях свойства, чтобы сам интерфейс себя обновил. Делать это смогу с помощью простого вызова OnPropertyChanged() (см. код ниже).

RelayCommand.cs

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Predicate<object> _canExecute;

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
        => (_execute, _canExecute) = (execute, canExecute);

    public bool CanExecute(object parameter)
        => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter)
        => _execute(parameter);
}

Родной API команд в WPF не то чтобы максимально удобен, и чтобы сделать реализацию команд в коде максимально простой, я буду использовать этот класс для создания экземпляра команды. Если кратко, то команды - это то что я буду использовать вместо обработчиков события Click в кнопках, но их много где в WPF можно использовать.

Часть 2. Реализация квадратика

Square.cs

public class Square : NotifyPropertyChanged
{
    private bool _isActive;

    public int Number { get; } // сюда привязано число внутри квадратика

    public int Size => 20 + Number * 5; // сюда привязан размер квадратика

    public bool IsActive // сюда привязан цвет фона квадратика
    {
        get => _isActive;
        set
        {
            _isActive = value;
            OnPropertyChanged();
        }
    }

    public Square(int number)
    {
        Number = number;
    }
}

Эта модель позволяет интерфейсу нарисовать квадрат нужного размера и вписать в него нужное число.

Часть 3. View Model

MainViewModel.cs

public class MainViewModel : NotifyPropertyChanged
{
    private static readonly Random _rnd = new Random();

    private ObservableCollection<Square> _numbers;
    private ICommand _shuffleItems;
    private ICommand _sortItems;
    private bool _buttonsEnabled = true;

    // задержка анимации квадратиков в миллисекундах
    public int Delay { get; set; } = 250;

    // сюда привязана кнопка, перемешивающая квадратики
    public ICommand ShuffleItems => _shuffleItems ?? (_shuffleItems = new RelayCommand(parameter =>
    {
        ShuffleNumbers();
    }));

    // сюда привязана кнопка, сортирующая квадратики
    public ICommand SortItems => _sortItems ?? (_sortItems = new RelayCommand(parameter =>
    {
        SortNumbers();
    }));

    // коллекция квадратиков
    public ObservableCollection<Square> Numbers
    {
        get => _numbers;
        set
        {
            _numbers = value;
            OnPropertyChanged();
        }
    }

    // сюда привязана доступность кнопок, для защиты от повторного нажатия
    public bool ButtonsEnabled
    {
        get => _buttonsEnabled;
        set
        {
            _buttonsEnabled = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel() // конструктор
    {
        Numbers = new ObservableCollection<Square>(NumberSequence(1, 10));
    }

    // меняет цвет фона перемещаемого квадратика и меняет его местами с другим квадратиком
    private async Task ExchangeNumberAsync(int oldIndex, int newIndex)
    {
        if (oldIndex == newIndex) 
            return;

        Numbers[oldIndex].IsActive = true; // перекрашивает квадратик в красный

        if (Delay > 0) 
            await Task.Delay(Delay);

        Square item = Numbers[oldIndex];
        Numbers[oldIndex] = Numbers[newIndex];
        Numbers[newIndex] = item;

        if (Delay > 0) 
            await Task.Delay(Delay);

        Numbers[newIndex].IsActive = false; // перекрашивает квадратик в черный

        if (Delay > 0) 
            await Task.Delay(Delay);
    }

    // перемешивает квадратики
    private async void ShuffleNumbers()
    {
        ButtonsEnabled = false;
        try
        {
            for (int i = 0; i < Numbers.Count; i++)
            {
                await ExchangeNumberAsync(i, _rnd.Next(0, Numbers.Count));
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
        finally
        {
            ButtonsEnabled = true;
        }
    }

    // сортирует квадратики пузырьком
    private async void SortNumbers()
    {
        ButtonsEnabled = false;
        try
        {
            for (int i = 0; i < Numbers.Count; i++)
            {
                for (int j = i + 1; j < Numbers.Count; j++)
                {
                    if (Numbers[i].Number > Numbers[j].Number)
                    {
                        await ExchangeNumberAsync(i, j);
                    }
                }
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
        finally
        {
            ButtonsEnabled = true;
        }
    }

    // если не в курсе, то обязательно поинтересуйтесь, как работают энумераторы
    private IEnumerable<Square> NumberSequence(int start, int length)
    {
        for (int i = start; i < start + length; i++)
        {
            yield return new Square(i);
        }
    }
}

Часть 4. View

А вот и полная разметка интерфейса.

MainWindow.xaml

<Window x:Class="SortTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SortTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/><!-- здесь подключается View Model -->
    </Window.DataContext>
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="10,5"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <StackPanel>
            <Button Content="Перемешать" IsEnabled="{Binding ButtonsEnabled}" Command="{Binding ShuffleItems}"/>
            <Button Content="Сортировать" IsEnabled="{Binding ButtonsEnabled}" Command="{Binding SortItems}"/>
        </StackPanel>
        <ItemsControl Grid.Column="1" ItemsSource="{Binding Numbers}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Width="{Binding Size}" Height="{Binding Size}" BorderBrush="Green" BorderThickness="2" Margin="3">
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Background" Value="Black"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsActive}" Value="True">
                                        <Setter Property="Background" Value="Red"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <TextBlock Text="{Binding Number}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontWeight="Bold"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Window>

Вот, собственно и всё. В классе MainWindow у меня ничего нет, там пусто.

MainWindows.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

введите сюда описание изображения

P.S. Опытные разработчики, не ругайте меня за async void, здесь он использован безопасно, использовал его для упрощения примера. Для автора вопроса: в статье по ссылке в начале ответа рассказано, почему async void - плохо. Так же способ указания DataContext здесь самый простой, но не оптимальный, подробнее можно узнать здесь.

5
  • Целиком проект доступен по ссылке - yadi.sk/d/fnW36nGGxM_wsg (ссылка временная)
    – aepot
    20 авг 2020 в 12:02
  • 1
    Я вас поругаю за 3 вещи: 1. Зачем вы везде засовываете INPC? Например, Numbers, это свойство не меняется у вас, оно статично. 2. DataContext в XAML плохо!. 3. MessageBox не лучший вариант для отображения диалогов напрямую, ибо как минимум это View слой и по сути нарушение MVVM, если нужен MessageBox, то стоит сделать его как некий сервис и использовать интерфейс, не связанный с основной реализацией.
    – EvgeniyZ
    20 авг 2020 в 12:31
  • @EvgeniyZ согласен по всем пунктам, но это и не чистый MVVM, я всего-лишь руководствовался им как подходом к реализации. Здесь по-хорошему Model еще должна быть, а ее нет. Отмажусь: 1) Для демонстрации, я даже выкинул INPC из Square.Number, вспоминая как вы меня ругали. 2) Для простоты, я бы не хотел ради такой простой задачи переопределять OnStartup() и принципиально не хотел модифицировать xaml.cs. 3) Можно было StatusPanel в UI засунуть, но тоже не стал в сторону упрощения. :) Спасибо за замечания, все по делу. Но для новичка здесь и так куча информации, я урезал как мог.
    – aepot
    20 авг 2020 в 12:57
  • Я понимаю, да, но это стоит изначально указывать в ответе, ибо новичок возьмет это за истину и будет дальше так и делать, не понимая, что нарушает тем самым MVVM. Вы можете глянуть мои ответы и увидите там например, что я пишу прям в конструкторе MainWindow, нарушая тем самым MVVM, но я всегда указываю "это не правильно, так не стоит делать" и вот было бы хорошо, если вы это тоже делали.
    – EvgeniyZ
    20 авг 2020 в 13:05
  • @EvgeniyZ согласен, обновил хвост ответа.
    – aepot
    20 авг 2020 в 13:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.