2010-06-29 7 views
1

ListBox를 사용하지 않거나, 항목을 바인딩 한 Wrap 패널을 사용하고 있습니다. 항목은 사용자 정의 컨트롤을 사용하는 사용자 정의 데이터 템플릿을 사용합니다.WPF ListItem 이벤트 확대

이제 클릭 (또는 모든 이벤트)에 반응하고 주변 항목을 겹치면서 사용자쪽으로 항목을 확대하고 싶습니다. 기본적으로 사용자가 선택한 특정 항목에 대한 자세한보기입니다. 항목이 사용자쪽으로 확대되어 더 많은 콘텐츠와 옵션을 사용할 수 있습니다.

정확히 여기 같은 꽤 많은

: http://ie.microsoft.com/testdrive/Performance/AmazonShelf/Default.html

문제는 성장함에 따라 다른 모든 항목이 선택 한 공간을 만들 것뿐입니다. 나는 이것을 원하지 않는다.

주변 항목을 겹치는 방법을 알아낼 수 없습니다. 어떤 아이템 컨테이너를 사용해야합니까 (wrapbehaviour가 필요합니다).

팁을 주시면 감사하겠습니다. 거기에 새로운 것이 있으면 WPF 4를 사용합니까?

감사합니다.

업데이트 : 저는 조쉬의 제안을 여기에 표시하려고합니다. 조쉬, 정확히 내가 필요한 것처럼 들린다. 그러나 내가 무엇을하더라도 RenderTransform이 발생하지는 않습니다. 나는 여기서 머리카락을 꺼내고있어.

왜 작동하지 않습니까? 페이드 인 애니메이션이 잘 작동합니다. 클릭 이벤트에 대한 두 개의 댓글이 달린 애니메이션도 정상적으로 작동합니다. 그러나 렌더링 트랜스 폼은 아무 것도하지 않습니다.

나는 시도했다 : ". (Grid.RenderTransform) (RotateTransform.Angle)" . "으로 RenderTransform (RotateTransform.Angle)" ". (으로 RenderTransform) (RotateTransform.Angle)" "(FrameworkElement) . (RotateTransform.Angle) " "(항목). (RotateTransform.Angle) "

어떻게 이러한 종류의 것들을 디버깅합니까? Intellisense는 없으며 지금까지는 나를 추측하는 게임이되었습니다.

<ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <Grid> 
            <my:custom x:Name="Item" Margin="10,10 10,10" /> 
           </Grid> 

           <DataTemplate.Triggers> 
            <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="Item"> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:2"/> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
            <EventTrigger RoutedEvent="FrameworkElement.MouseUp" SourceName="Item"> 
             <BeginStoryboard> 
              <Storyboard> 
               <!--<DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Width" To="200" Duration="0:0:2" />--> 
               <!--<DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="Height" To="400" Duration="0:0:2" />--> 
                 <DoubleAnimation Storyboard.TargetName="Item" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" From="0" To="180" Duration="0:0:2" /> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </DataTemplate.Triggers> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 

답변

0

Wrappanel은 크기에 따라 방을 만듭니다. 이런 종류의 확대/축소 동작에 대해서는 Canvas를 사용해야합니다. Wrappanel을 원하기 때문에 Wrappanel 위에 Canvas를 추가 할 수 있습니다. 항목을 클릭하면 해당 클릭 한 항목을 Canvas 하위 항목에 추가합니다. & 적절한 크기를 설정하십시오. Canvas.Top & Canvas.Left, 일부 이벤트에서 동일한 항목을 제거하십시오.

+0

요소는 캔버스와 WrapPanel의 자식이 될 수 없으므로 먼저 WrapPanel에서 요소를 제거해야합니다. 그러면 WrapPanel이 먼저 제거되어야 애니메이션이 시작되기 전에 다른 모든 항목이 해당 위치로 이동하게되어 결과적으로 매우 불안정하고 부 자연스러운 전환.RenderTransform을 사용하면 WrapPanel에 항목을 유지하고 레이아웃에 영향을주지 않고 항목을 확장 할 수 있습니다. – Josh

+0

아니요 동일한 아이를 사용하지 마십시오. 동일한 템플릿으로 다른 항목을 만들어 Canvas에 추가하십시오. – Ragunathan

+0

Rag, rendertransform이 더 쉬워집니다 (작동시킬 수 있다면). 그래서 그게 해결되지 않으면 나는 너를 바라 볼 것이다. – chrisaut

0

Ahh man 내가 아이폰 세부 사항보기를 에뮬레이트하는 표준 Silverlight ListBox의 예를 들어 ListBox를 사용자 정의하는 데 사용한 비슷한 기술에 대한 블로그 게시물을 쓰기 시작했습니다. 불행히도 게시물을 완성하지 못했습니다.

아무튼, 애니메이트 할 수있는 항목에 렌더 변환을 적용하면됩니다. 그런 다음 애니메이션이 끝나면 세부 뷰가 들어있는 전경으로 다른 요소를 넘길 수 있습니다. 렌더링 변환은 레이아웃 변환과 달리 다른 항목의 레이아웃에는 영향을 미치지 않습니다.

+0

조쉬 감사합니다. 나는이 일을하려하고있다. – chrisaut