c# - 架构...幻灯片

Question

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

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

所以这是我的问题:如果我有一个带有堆栈面板模板的列表，并且列表下方是一张占据 Canvas 大小的图像，我可以将图像的上下文绑定(bind)到选定的 SlideshowItem。这一切都很好。但是当我单击/更改列表的选定索引时，我想在两个图像之间进行淡入淡出或滑动。

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

Answer 1

您可以使用 Silverlight Toolkit 中的 TransitioningContentControl，但是如果您想推出自己的控件，则需要两个内容控件并在 SelectionChanged 事件上换掉“Active”控件。您也可以在此处激发您的 Storyboard。

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>