c# - 架构设计…幻灯片放映

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


我有一个SlideshowItem可观察的集合
每个SlideshowItem都有Source，用于指示其图像所在的位置
我为每个SlideshowItem（使用堆栈面板的水平列表）显示一个半透明的框，当您单击时，应该过渡到该幻灯片


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

我该如何在Silverlight中表示呢？我是否应该真正拥有一个滚动面板或包含所有图像的东西，然后在它们之间进行切换？还是使用单个图像控件就足够了？我可以使用状态来执行此操作，还是需要显式运行情节提要？任何样品将不胜感激。

最佳答案

您可以使用Silverlight工具包中的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>