Architecture ... slide show

Question

I know this sounds silly and I could use some kind of ready-made solution, but I really want to create my own slide show with a simple image. I have been developing applications in Silverlight / WPF for some time, but for some reason I cannot wrap this around.

• I have an observable collection SlideshowItem
• Each SlideshowItemhas Sourcewhich indicates where the image is located for him.
• I show a translucent box for each SlideshowItem(horizontal list using the stack panel), and when you click, you should go to this slide

So, here is my problem: if I have this list with a stack template, and the list contains an image that occupies the size of the canvas, I can bind the image context to the selected one SlideshowItem. This is all good and good. But when I click / change the selected index of the list, I want to make a crossfade or move between two images.

How can I imagine this in Silverlight? Should I have a scroll bar or something with all the images and then change them? Or is it enough to use a single image control? Can I do this using states, or do I need to explicitly run the storyboard? Any samples will be appreciated.

Answer 1

TransitioningContentControl Silverlight Toolkit, , , "" 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 with Image as ContentTemplate, ). , , SelectedIndex ( VM), , "Left Move", , "Right Move" . UX .

Update ( 2): , , , , , , ContentControls, CustomControl ( SlideShowControl). SlideShowControl DataContext ContentControl selectedIndex. , , ContentControls , , . , 1 2, ContentControlA , B , ControlA , View DataContext .