C# 设计…幻灯片

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

• 我有一个可观察的

  SlideshowItem

• 每个

  幻灯片放映项

  都有

  源

  ，指示其图像的位置
• 我为每个

  幻灯片项目显示一个半透明框（使用stackpanel的水平列表），当您单击时，您应该转换到该幻灯片

所以我的问题是：如果我有一个带有stackpanel模板的列表，并且列表下有一个占据画布大小的图像，我可以将图像的上下文绑定到所选的

幻灯片项目

。那很好。但是，当我单击/更改列表的选定索引时，我想在两个图像之间进行交叉淡入淡出或滑动

---

我应该如何在Silverlight中表示这一点？我真的应该有一个滚动面板或其他东西，上面有所有的图像，然后在它们之间切换吗？或者使用单个图像控件就足够了吗？我可以对状态执行此操作，还是需要显式运行故事板？任何样品都将不胜感激。

您肯定不需要在scrollviewer/stackpanel中显示整个图像集。您可以通过许多不同的方式实现这一点。我可以解释使用一幅图像的一个简单想法：如您所说，在ViewModel中定义一个SelectedSlide属性，并将其绑定到一个图像控件（最好是一个ContentControl，其中图像是ContentTemplate的一部分，这样您就可以在同一个控件中包含描述和其他项）。此解决方案可以让您有机会添加一些故事板，这样，如果您增加SelectedIndex（另一个VM属性），则可以启动一个故事板来执行“左移”动画，如果您减少“右移”动画，则用户会感觉幻灯片从一边来，从另一边去。你可以在那套故事板上做很好的用户体验

---

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

您可以使用Silverlight Toolkit中的TransitioningContentControl，但是，如果您想自己滚动，则需要两个内容控件，并在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>

红色
绿色
蓝色

我也是这么想的，但是如果我使用的是单个图像，那么当我进行右/左移动时，没有旧图像滑出和新图像滑入的概念……对吗？