Архитектура ... слайд-шоу

Question

Я знаю, это звучит глупо, и я мог бы использовать какое-то нестандартное решение, но я действительно хочу создать свое собственное простое слайд-шоу изображений. Я занимаюсь разработкой приложений в Silverlight / WPF в течение некоторого времени, но по какой-то причине я не могу обдумать это.

• У меня есть наблюдаемая коллекция SlideshowItem
• Каждый SlideshowItem имеет Source, который указывает, где находится изображение для него
• Я показываю полупрозрачную рамку для каждого SlideshowItem (горизонтальный список с использованием панели стека), и когда вы щелкаете, вы должны перейти к этому слайду

Итак, вот моя проблема: если у меня есть этот список с шаблоном стека и под списком находится изображение, занимающее размер холста, я могу привязать контекст изображения к выбранному SlideshowItem. Это все хорошо. Но когда я нажимаю / изменяю выбранный индекс в списке, я хочу сделать плавный переход или слайд между двумя изображениями.

Как мне представить это в Silverlight? Должна ли я на самом деле иметь панель прокрутки или что-то со всеми изображениями, а затем переключаться между ними? Или достаточно использовать один элемент управления изображением? Могу ли я сделать это с состояниями, или мне нужно явно запустить раскадровку? Любые образцы будут оценены.

Answer 1

Вы можете использовать TransitioningContentControl из набора инструментов Silverlight, однако, если вы хотите развернуть свой собственный, вам понадобятся два элемента управления содержимым и поменять «активный» на события SelectionChanged.Вы также можете запустить свои раскадровки здесь.

ContentControl _active;
private void LB_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

    if (_active == Content1)
    {
        _active = Content2;
        Content2Active.Begin();
    } else
    {
        _active = Content1;
        Content1Active.Begin();
    }

    _active.Content = LB.SelectedItem;
}

И Xaml выглядит примерно так.Я просто использую строки и текст, но этот подход должен хорошо работать и для изображений:

<Grid x:Name="LayoutRoot" Background="White" MaxHeight="200">
    <Grid.Resources>
        <Storyboard x:Name="Content1Active">
            <DoubleAnimation From="0" To="1" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" />
            <DoubleAnimation To="0" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" />
        </Storyboard>
        <Storyboard x:Name="Content2Active">
            <DoubleAnimation From="0" To="1" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" />
            <DoubleAnimation To="0" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" />
        </Storyboard>
    </Grid.Resources>

    <StackPanel>
        <ListBox x:Name="LB" SelectionChanged="LB_SelectionChanged" xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <sys:String>Red</sys:String>
            <sys:String>Green</sys:String>
            <sys:String>Blue</sys:String>
        </ListBox>
        <Grid>
            <ContentControl x:Name="Content1" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}">
            </ContentControl>
            <ContentControl x:Name="Content2" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}">
            </ContentControl>
        </Grid>
    </StackPanel>
</Grid>

Answer 2

Определенно, вам не нужна вся коллекция изображений, отображаемая в scrollviewer / stackpanel. Вы можете реализовать это разными способами. Я могу объяснить простую идею , используя одно изображение : как вы сказали, определите свойство SelectedSlide в вашей ViewModel и привяжите его к элементу управления Image ( Предпочтительно ContentControl с Image в качестве его части ContentTemplate, чтобы вы могли иметь описания и другие элементы в том же ). Это решение может дать вам возможность добавить несколько раскадровок, так что если вы увеличите свой SelectedIndex (еще одно свойство VM), запустите раскадровку, чтобы сделать анимацию «Влево», а если вы уменьшите, «Анимация вправо» заставит пользователя чувствовать себя как слайды. идут с одной стороны и идут в другую сторону. С этим набором раскадровок вы можете сделать довольно хороший UX.

Обновление (Идея 2): Да, если нам нужно, чтобы понятие предыдущего оставляло представление при появлении нового, мы можем спроектировать его, используя два ContentControls, обернутые в CustomControl (давайте назовем его SlideShowControl). SlideShowControl будет иметь свой механизм для правильной установки DataContext двух ContentControl на основе позиции selectedIndex. Я успешно применил этот элемент управления в одном из моих проектов, логика здесь заключается в переключении ContentControls через раскадровку, чтобы мы могли получить много разных эффектов, меняя раскадровку. Предположим, вы переходите от Индекса 1 к 2, ContentControlA будет анимироваться влево, и B войдет в Представление, и на основании вашего следующего щелчка ControlA будет сидеть слева или справа от Представления и поставляется с новым DataContext выбранного Просмотр.