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

Ваш ответ

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

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