건축술 ... 슬라이드 쇼

나는 이것이 어리석게 들리는 것을 알고 있으며, 바로 사용할 수있는 솔루션을 사용할 수는 있지만, 내 자신의 간단한 이미지 슬라이드 쇼를 만들고 싶습니다. 나는 Silverlight/WPF에서 얼마 동안 응용 프로그램 개발을 해왔지만 어떤 이유로 든이 문제를 해결할 수는 없습니다. 건축술 ... 슬라이드 쇼

나는 SlideshowItem
의 관찰 컬렉션이 SlideshowItem가에 대한 이미지가

SlideshowItem

Source

내 문제는 여기 있습니다 : 스택 패널 템플릿이있는 목록이 있고 목록 아래에있는 캔의 크기를 차지하는 이미지 이미지의 컨텍스트를 선택한 SlideshowItem으로 바인딩 할 수 있습니다. 그게 다 잘되고 잘됐다. 그러나 목록의 선택된 색인을 클릭/변경하면 두 이미지 사이에서 크로스 페이드 또는 슬라이드를하고 싶습니다.

Silverlight에서 어떻게 표현해야합니까? 실제로 스크롤 패널 또는 모든 이미지가있는 항목을 가지고 이들 사이에서 변경해야합니까? 아니면 단일 이미지 컨트롤을 사용하는 것으로 충분합니까? 주에서이 작업을 수행 할 수 있습니까? 아니면 스토리 보드를 명시 적으로 실행해야합니까? 모든 샘플을 감상 할 수 있습니다.

출처

2011-02-16 Ed Altorfer

확실히 전체 이미지 컬렉션이 scrollviewer/stackpanel에 표시 될 필요는 없습니다. 이것을 여러 가지 방법으로 구현할 수 있습니다. 나는 하나 개의 이미지를 사용 의 간단한 아이디어를 설명 할 수 있습니다 : 당신이 말했듯이, 그래서, 당신의 ViewModel에 SelectedSlide 속성을 정의하고 바람직하게 (이미지 컨트롤에 ContentTemplate의 그것의 한 부분으로 이미지와 ContentControl을을 을 그 바인딩 동일한에 설명 및 기타 항목을 포함 할 수 있음). 이 솔루션을 사용하면 일부 스토리 보드를 추가 할 수 있으므로 SelectedIndex (다른 VM 속성)를 늘리면 스토리 보드에서 'Left Move'애니메이션을 실행하고 'Right Move'애니메이션을 사용하면 슬라이드와 같은 느낌을 줄 수 있습니다 한쪽에서오고 다른쪽으로 가고 있습니다. 스토리 보드 세트에서 꽤 좋은 UX를 할 수 있습니다.

업데이트 (아이디어 2) : 예전에 새로운 개념이 들어 왔을 때 이전 개념을 필요로한다면 예를 들어 CustomControl 내부에 래핑 된 두 개의 ContentControl을 사용하여 설계 할 수 있습니다 (SlideShowControl로 호출 할 수 있음). SlideShowControl에는 selectedIndex 위치를 기반으로 두 ContentControl의 DataContext를 올바르게 설정하는 메커니즘이 있습니다. 내 프로젝트 중 하나에서 성공적으로이 컨트롤을 만들었습니다. 여기서 논리는 스토리 보드를 통해 ContentControl을 전환하여 스토리 보드를 교체하여 다양한 효과를 낼 수 있도록하는 것입니다. 인덱스 1에서 2로 이동하고, ContentControlA가 왼쪽으로 애니메이션을 적용하고 B가 뷰에 들어가고 다음 클릭을 기준으로 ControlA가 뷰의 왼쪽 또는 오른쪽에 위치하게되고 선택한 DataContext의 새 DataContext가 제공됩니다 전망.

출처

2011-02-16 22:46:54

이것은 하나의 이미지를 사용하는 경우, 내가 오른쪽/왼쪽으로 움직이면, 오래된 이미지가 빠져 나오고 새로운 이미지가 미끄러 져 들어가는 개념이 없다 ... 맞습니까? –

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>

출처

2012-01-02 23:19:00 terphi

건축술 ... 슬라이드 쇼

답변

관련 문제