1

Есть XAML анимация для кастомного текстбокса:

<EventTrigger RoutedEvent="MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color"
                                To="#FFE24647" Duration="0:0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

Эта анимация запустится при нажатии кнопки мыши. Есть какой-то способ вручную запустить анимацию, прописанную в XAML разметке через код?

Я прописал вот так:

`<Border.Triggers>
      <EventTrigger> 
          <DataTrigger Binding="{Binding IsOpen}" Value="true">
            тут анимация 
          </DataTrigger> 
      </EventTrigger> 
</Border.Triggers>`

Но он ругается

5
  • 1
    Делаете в коде свойство, например public bool IsOpen {get; set;}, реализуете этому свойству INotifyPropertyChanged, ну и привязываете его туда, куда вам надо, например триггре: <DataTrigger Binding="{Binding IsOpen}" Value="true">вызов анимации</DataTrigger>.
    – EvgeniyZ
    18 июл 2020 в 18:14
  • Не могли бы вы скинуть как это бы выглядело в XAML?
    – VeNNoM
    18 июл 2020 в 19:38
  • Я же скинул как это в XAML было бы.
    – EvgeniyZ
    18 июл 2020 в 19:39
  • Дополнил вопрос
    – VeNNoM
    18 июл 2020 в 19:59
  • VeNNoM, обращайтесь к собеседнику через @, иначе оповещение о вашем сообщении он не увидит. @EvgeniyZ
    – aepot
    18 июл 2020 в 20:59

1 ответ 1

2

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

Давайте предположим, что у нас есть некий список серверов, который мы хотим мониторить, выводя на экран название сервера и его статус, а также красиво это обыграем анимацией. Чем будет являться один сервер у нас программе? Верно, классом, так давайте его сделаем:

public class Server
{
    public Server(string name) => Name = name;

    public string Name { get; }
    public bool IsOnline { get; set; }
}

Тут нечего сложного, всего лишь два публичных свойства (помним, что привязка работает только к публичным свойствам!) и конструктор.

Теперь для примера сделаем коллекцию этих серверов, заполним и привяжем. Коллекцией может быть что угодно, зависит от задачи. Если надо просто отобразить, то List<T> или обычный массив самое то, а если надо следить за добавлением нового, то ObservableCollection<T>.

public partial class MainWindow : Window
{
    public List<Server> Servers { get; }

    public MainWindow()
    {
        InitializeComponent();

        Servers = new List<Server>
        {
            new Server("Первый сервер"),
            new Server("Второй сервер")
        };

        DataContext = this;
    }
}

Заметьте, я сделал всю логику в окне - это не есть хорошо, лучше вынести все в отдельный класс, но для примера самое то.
Тут вроде все понятно - есть публичное свойство коллекции серверов, оно заполняется в конструкторе. Также задается DataContext окну, это по сути говорит "Окно, если будешь привязываться, то бери данные из этого класса", this - само окно.

Дальше у нас есть допустим такая разметка:

<ItemsControl ItemsSource="{Binding Servers}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Padding="10 5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding IsOnline, StringFormat={}[{0}]}" />
                    <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Тут нечего дико сложного нет, просто два TextBlock, которые привязаны к своим свойствам из класса Server, ну и ItemsControl, который отображает свойство коллекции так, как нам захочется.

Можем запустить проект и увидеть следующее:

Result UI

Хорошо, с базовыми понятиями привязок и прочего разобрались, теперь сама суть вопроса - запустить анимацию через код. Создадим для начала ее. Я лично в примере буду анимировать текст [true]/[false], который выводится в интерфейсе, вы же можете что угодно анимировать. Немного дописываем стиль и получаем такое:

<ItemsControl ItemsSource="{Binding Servers}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Padding="10 5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="statusText" Foreground="#FFE24647" Grid.Column="0" Text="{Binding IsOnline, StringFormat={}[{0}]}" />
                    <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                </Grid>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsOnline}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="statusText" Storyboard.TargetProperty="Foreground.Color"
                                                To="#FF4DE246" Duration="0:0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="statusText" Storyboard.TargetProperty="Foreground.Color"
                                                To="#FFE24647" Duration="0:0:0:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Тут в Triggers был добавлен новый DataTrigger, который позволяет привязаться к свойству и на его основе сделать нужные визуальные изменения. Также у него есть два своих события EnterActions и ExitActions, благодаря которым можно удобно сделать анимацию в обратное направление.
Если брать ваш код, который вы привели в вопросе, то проблема заключается в том, что <Border.Triggers> не содержит в себе нужного триггера, он есть только тогда, когда переопределяете стиль, а значит по вашему примеру должно быть так:

<Border>
    <Border.Style>
        <Style TargetType="Border">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsOpen}" Value="true">
                    тут анимация
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

Собственно возвращаемся к примеру, запускаем и видим... что нечего не обновляется, как бы мы не меняли значение свойству. Дело все в том, что UI не видит изменения, его надо оповестить о том, что они были сделаны. Для этого существует INotifyPropertyChanged, реализуем его и переписываем нужные свойства:

public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string? propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    protected bool SetField<T>(ref T field, T value, [CallerMemberName] string? propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) return false;
        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

Сам класс Server будет теперь таким:

public class Server : BaseViewModel
{
    public Server(string name) => Name = name;

    public string Name { get; }

    private bool isOnline;
    public bool IsOnline {
        get => isOnline;
        set => SetField(ref isOnline, value);
    }
}

Вот и все, теперь будет работать как надо и запускать анимацию сразу как только изменится свойство. Для теста я сделаю простой метод. который будет брать случайный сервер и менять ему статус:

async void Test()
{
    var rand = new Random();
    while (true)
    {
        var server = Servers[rand.Next(Servers.Count)];
        server.IsOnline = !server.IsOnline;

        await Task.Delay(1500);
    }
}

Ну и результат:

Animation Result

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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