Question

我知道这听起来很傻，我可以使用一些开箱即用的解决方案，但我真的想要构建我自己的简单图像幻灯片。我已经在Silverlight / WPF中进行了一段时间的应用程序开发，但无论出于什么原因，我无法解决这个问题。

我有一个可观察的SlideshowItem
每个SlideshowItem都有Source，表示图片的位置
我为每个SlideshowItem显示一个半透明的框（使用堆叠面板的水平列表），当您点击时，您应该转换到该幻灯片

所以这是我的问题：如果我有一个带有stackpanel模板的列表，并且在列表下面是一个占用画布大小的图像，我可以将图像的上下文绑定到选定的SlideshowItem。这一切都很好。但是当我单击/更改列表的选定索引时，我想在两个图像之间进行交叉渐变或滑动。

我应该如何在Silverlight中表示这一点？我真的应该有一个滚动面板或所有图像的东西然后在它们之间切换？或者使用单个图像控制是否足够？我可以用状态执行此操作，还是需要显式运行故事板？任何样品都会受到赞赏。

Answer 1

您可以使用Silverlight Toolkit中的TransitioningContentControl，但是如果您想要自己滚动，则需要两个内容控件并在SelectionChanged事件上交换“Active”。你也可以在这里发布你的故事板。

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中显示整个Image集合。您可以通过许多不同的方式实现此目的。我可以解释使用一个图像的简单概念：正如您所说，在ViewModel中定义 SelectedSlide 属性并将其绑定到Image控件（最好将ContentControl与Image作为ContentTemplate的一部分，以便您可以在同一个中包含描述和其他项目）。此解决方案可让您有机会添加一些故事板，以便在增加SelectedIndex（另一个VM属性）时触发故事板以执行“向左移动”动画，如果减少，则执行“向右移动”动画会使用户感觉像幻灯片来自一边，走向另一边。你可以在那套故事板上做相当不错的用户体验。

更新（想法2）：是的，如果我们需要前一个的概念离开视图时新的进入，我们可以通过使用包装在CustomControl中的两个ContentControl来构建它（我们称之为SlideShowControl）。 SlideShowControl将有其机制根据selectedIndex位置正确设置两个ContentControl的DataContext。我已经成功地在我的一个项目中进行了这个控制，这里的逻辑是通过故事板切换ContentControls，这样我们就可以通过交换故事板来获得许多不同的效果。假设您从Index 1移动到2，ContentControlA将动画显示为left，B将进入View，并根据您的下一次单击ControlA将位于View的左侧或右侧，并带有所选的新DataContext图。

建筑......幻灯片

2 个答案: