構建...幻燈片

我知道這聽起來很愚蠢，我可以使用一些開箱即用的解決方案，但我真的想要構建自己的簡單圖像幻燈片。我已經在Silverlight/WPF中進行了一段時間的應用程序開發，但無論出於何種原因，我都無法將其包圍。構建...幻燈片

我有SlideshowItem
可觀察集合每個SlideshowItem具有Source其表示保存它的圖像位於
我顯示每個SlideshowItem（使用一個StackPanel水平列表）一個半透明的盒子，當你點擊一下，你應該轉換到該幻燈片

因此，這裏是我的問題：如果我有一個StackPanel模板列表，該列表下的圖像佔用罐的大小輸血管，我可以將圖像的上下文綁定到選定的SlideshowItem。這一切都很好。但是當我點擊/更改列表的選定索引時，我想在兩個圖像之間進行交叉淡入淡出或幻燈片。

我應該如何在Silverlight中表現這一點？我應該真的有一個滾動面板或所有圖像的東西，然後改變他們之間？還是僅使用一個圖像控件就足夠了？我可以用狀態來做到這一點，還是我需要明確運行故事板？任何樣品將不勝感激。

來源

2011-02-16 Ed Altorfer

當然，你不需要顯示在scrollviewer/stackpanel中的整個圖像集合。你可以用很多不同的方式來實現它。我能解釋的一個簡單的想法，用一個形象：正如你所說的，在你的視圖模型定義SelectedSlide財產和綁定，爲一個圖像控件（最好有圖片爲的ContentTemplate其一部分ContentControl中，所以你可以在同一個有說明和其他項目）。這個解決方案可以讓你有機會添加一些故事板，這樣如果你增加你的SelectedIndex（另一個VM屬性）觸發一個故事板做一個「左移」動畫，如果你減少一個「右移」動畫使用戶感覺像幻燈片從一邊走向另一邊。你可以在這組故事板上做出非常好的用戶體驗。我們可以通過使用包裹在CustomControl中的兩個ContentControl（我們稱之爲SlideShowControl）來設計它，以便在新視圖進入時離開視圖的想法被更改（構思2）。 SlideShowControl的機制是根據selectedIndex位置正確設置兩個ContentControl的DataContext。我已經在我的一個項目中成功完成了這個控制，這裏的邏輯是通過一個故事板切換ContentControls，這樣我們就可以通過交換故事板來獲得許多不同的效果。假設您從索引1移動到2，ContentControlA將動畫化到左側，B將進入視圖，並且基於您的下一次單擊ControlA將位於視圖的左側或右側，並附帶新選定的DataContext視圖。

來源

2011-02-16 22:46:54

這也是我的想法，但如果我使用單個圖像，那麼當我做右/左移，沒有舊圖像滑出的概念，新圖像滑入...對嗎？ – 2011-02-17 00:07:13

您可以使用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>

來源

2012-01-02 23:19:00 terphi

構建...幻燈片

回答

相關問題