안녕하세요. 이번시간에는 페이지가 이동할때마다 FadeIn/Out 효과를 나타내는 TabControl을 구현해 보도록 하겠습니다. 아래는 구현 결과 동영상 입니다.
(그림은 디시인사이드 김여아 겔러리에서 가져왔습니다. 동영상이 뚝뚝 끊기네요 -_-)
왼쪽에는 Tab이 들어가고 오른쪽에는 Content가 들어갑니다. 간단하게 버튼 몇개와 애니메이션을 사용하면 위와 같이 쉽게 구현 할 수 도 있지만, 이번 시간에는 TabControl의 Template을 사용하여 추가되는 컨텐츠에 상관없이 동작함을 유의 깊게 살펴보시기 바랍니다. 소스코드가 꾀 길기 때문에 전체코드를 이곳에 모두 올리지는 않고 필요한 부분만 설명하겠습니다. 전체 소스코드는 첨부파일로 올리겠습니다.
이번 예제에서 XAML 코드에서 하는 일은 단지 레이아웃과 관련된 기능만을 수행하기 때문에 중요한 부분만 설명하도록 하겠습니다.
위 코드를 보시면 ControlTemplate에 하나의 ContentPresenter를 사용하는게 일반적인데 두개의 ContentPresenter를 사용했습니다. 이유는 기존의 하나의 ContentPresenter만 가지고는 두 페이지의 내용이 오버랩 되도록 할 수 없기 때문에 두개의 ContentPresenter를 사용합니다. 계속해서 C#코드입니다.
public partial class SimpleTabControl : TabControl
{
ContentPresenter CurrentItem { get; set; }
ContentPresenter BeforeItem { get; set; }
DoubleAnimation FadeIn = new DoubleAnimation(0, 1, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 };
DoubleAnimation FadeOut = new DoubleAnimation(1, 0, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 };
public SimpleTabControl()
{
InitializeComponent();
Loaded += new RoutedEventHandler(SimpleTabControl_Loaded);
SelectionChanged += new SelectionChangedEventHandler(SimpleTabControl_SelectionChanged);
FadeOut.Completed += new EventHandler(FadeOut_Completed);
}
void FadeOut_Completed(object sender, EventArgs e)
{
BeforeItem.Visibility = Visibility.Collapsed;
}
void SimpleTabControl_Loaded(object sender, RoutedEventArgs e)
{
CurrentItem = GetTemplateChild("CurrentItem") as ContentPresenter;
BeforeItem = GetTemplateChild("BeforeItem") as ContentPresenter;
CurrentItem.Content = SelectedContent;
}
void SimpleTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (CurrentItem == null) return;
CurrentItem.Content = (e.AddedItems[0] as ContentControl).Content;
BeforeItem.Content = (e.RemovedItems[0] as ContentControl).Content;
BeforeItem.Visibility = Visibility.Visible;
CurrentItem.BeginAnimation(ContentPresenter.OpacityProperty, FadeIn);
BeforeItem.BeginAnimation(ContentPresenter.OpacityProperty, FadeOut);
}
}
사용자가 선택한 Tab이 바뀔 때마다 Fade In/Out 효과를 주어야 하므로 SelectionChange이벤트를 사용합니다. CurrentItem과 BeforeItem은 TabControlTemplate에서 만들었던 ContentPresenter로 GetTempalteChild함수를 사용하여 가져옵니다.
사용자가 페이지를 선택하게되면 SelectionChange이벤트를 통해 기존에 선택되어 있던 페이지는 RemovedItems로, 새로 선택된 페이지는 AddItems에 추가되어 넘어옵니다. 이때 CurrentItem에는 새로 추가된 페이지의 내용을 넣고 BeforeItem에는 삭제된 페이지의 내용을 넣은뒤 OpacityAnimation을 적용하여 Fade In/Out TabControl을 완성 할 수 있습니다.
간단하면서도 처음 접하기에는 다소 어려운 부분일 수도있습니다만 천천히 따라해보시면 금방 이해하실 수 있을 것입니다.
질문은 리플이나 이메일로 해주시면 답변드리도록 하겠습니다.
SimpleTabControl.xaml
