WPF DataGrid Design Effect

Question

У меня есть WPF DataGrid в моем приложении, и я хочу добавить эффект щелчка, чтобы генерировать больше данных и вставлять их в сетку.

Так вот мой DataGrid:

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

Мне интересно, возможно ли это?

Answer 1

Я бы сгруппировал элементы пользовательского интерфейса для «Select Episode» и «Select Chapter», чтобы изменить отображение из одной группы в другую с помощью анимации.

Я не могу дать вам полный пример кода, но я хотел бы попробовать это:

• Создание Grid управления с двумя колоннами и один ряд
• Возьмите вас существующие элементы пользовательского интерфейса и поставить в левой колонке
• Поместите элементы пользовательского интерфейса для отображения деталей эпизода (главы) в правой колонке Grid
• Изначально ширина левого столбца равна 100%, а правая колонка равна 0%
• Предполагая, что «стрелка» с первого изображения является кнопкой «Детали эпизода»: добавьте триггер события для кнопки (см. пример кода ниже)
• Внутри триггера события: запустите анонимность с BeginStoryboard, который меняет ширину двух столбцов за короткий промежуток времени. A DoubleAnimation должен делать. В раскадровке вы как-то нужно обратиться к целевому элементу, который вы хотите изменить (ширину столбцов в Grid)
• Добавить новое свойство SelectedEpisode к вашей модели представления, которая включает в себя список глав
• Когда кнопки детали эпизода нажата: Установить SelectedEpisode свойства в модели представления
• в правой колонке: Привязка элементов пользовательского интерфейса для отображения глав в суб-свойства SelectedEpisode собственности в модели представления

Если визуальный эффект с двумя столбцами выглядит не очень хорошо, возможно, другой идеей было бы использовать анимацию для изменения x координат двух групп элементов в сочетании с Canvas.

Вот пример для Button с EventTrigger и некоторым фиктивным кодом для анимации:

<Button> 
     <Button.Triggers> 
      <EventTrigger RoutedEvent="Button.Click" > 
       <BeginStoryboard> 
        <StoryBoard TargetName="..." TargetProperty="..."> 
       ... change column with here 
        </StoryBoard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Button.Triggers> 
    </Button>