Mah Apps 타일 애니메이션

Question

내 wpf 앱 레이아웃의 타일에 라이브 타일 효과를 추가하고 싶습니다. 시각 자료에 MahApps.Metro 라이브러리를 사용하고 있습니다.

1. 설치하여 저축 계정 :

   <Controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0"> 
       <Controls:Tile.Content> 
        <TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Controls:Tile.Content> 
   </Controls:Tile> 
   

   나는이 두 텍스트 사이를 전환 할 타일의 최종 제품을 싶습니다 - 여기에 내가 레이아웃에있는 타일의 하나의 예입니다 여기 설정에

2. 를 클릭하여 저축

Answer 1

이 작업을 수행하는 일반적으로 인정 된 방법은 텍스트 속성을 결합하는 것입니다 차지하고있다. 과 같을 것이다 바인딩 :

<TextBlock Text="{Binding Path=TileText}" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/> 

는이 명령을 주면 컨트롤의 DataContext에에 TileText라는 속성에 TextBlock의 값을 결합이다. 이를 이해하려면 WPF에서 DataContext와 바인딩을 조사해야합니다.

당신은 속성 클래스가 있으면 :

public string TileText 
{ 
    get {...} 
    set {...} 
} 

그리고 클래스는 TileText 속성 값을 변경할 수 있으며이있는 TextBlock의 텍스트를 변경합니다 타일 컨트롤의 DataContext에로 설정을 . 이것은 MVVM 디자인의 간단한 예이며 스마트 WPF 디자인 사례를 이해하는 첫 번째 단계가 될 수 있습니다.

건배, 에릭

Answer 2

이보십시오!

<controls:Tile Height="110" Background="#9c6b50" Width="180" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,105,33,0"> 
     <controls:Tile.Style> 
      <Style TargetType="controls:Tile"> 
       <Setter Property="Content"> 
        <Setter.Value> 
         <TextBlock Text="Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Setter.Value> 
       </Setter> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Content"> 
          <Setter.Value> 
           <TextBlock Text="Click here to Setup Your Savings Account" TextWrapping="Wrap" Width="121" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </controls:Tile.Style> 
    </controls:Tile>