#1을 약간 응용하여 만들어 보았습니다.
하지만 Blacklight을 모방한 것이죠 :)
코딩실력이 허접해서 문제점 투성이 이네요. 지적 사항은 언제나 환영입니다.
로드 후 첫 화면은 다음과 같구요.
버튼을 클릭하면 선택된 아이템은 크게 보이고, 나머지는 우측 메뉴로 이동합니다.
일단은 여기까지이고 다음에 추가되는 사항은 예상되시겠죠.:)
페이지가 로드되면, 다음과 같이 UC_Panel 이라는 사용자 정의 컨트롤 6개를 위치시킵니다.
|
// 표시 설정
int panelTotalCount = 6;
int panelRowCount = 3;
// 메인 패널 크기 설정
int mainPanelWidth = 400;
int mainPanelHeight = 300;
// 서브패널 크기 설정
int subPanelWidth = 200;
int subPanelHeight = 40;
// 시간 설정
int time = 500;
int keyNum = 0;
Storyboard sb = null;
Duration duration;
DoubleAnimation ani1 = null;
DoubleAnimation ani2 = null;
DoubleAnimation ani3 = null;
DoubleAnimation ani4 = null;
// 초기 패널 배열
void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
// 이미지 샘플
List<string> list = new List<string>();
list.Add("img_1.png");
list.Add("img_2.png");
list.Add("img_3.png");
list.Add("img_4.jpg");
list.Add("img_5.jpg");
list.Add("img_6.jpg");
UCPanel ucPanel = null;
for (int i = 0; i < panelTotalCount; i++)
{
ucPanel = new UCPanel();
ucPanel.Name = "panel_" + i;
ucPanel.SetValue(Canvas.LeftProperty, (ucPanel.Width + 10) * (i % panelRowCount) + 10);
ucPanel.SetValue(Canvas.TopProperty, (ucPanel.Height + 10) * (i / panelRowCount) + 10);
ucPanel.tbPanelName.Text = list[i].Split('.')[0].ToString();
ucPanel.btnSize.Content = ">";
ucPanel.btnSize.Name = "panel_" + i;
ucPanel.btnSize.Click += new RoutedEventHandler(btnSize_Click);
ucPanel.imgPic.Source = new BitmapImage(new Uri(list[i], UriKind.RelativeOrAbsolute));
LayoutRoot.Children.Add(ucPanel);
}
ucPanel = null;
duration = new Duration(TimeSpan.FromMilliseconds(time));
} |
UC_Panel 안에는 TextBlock, Button, Image 컨트롤이 존재합니다.
클릭시에는 #1과 같은 애니메이션 코드로 되어있습니다.
아래 코드는 전체 코드가 아닌 일부 코드예요. 각 6개 패널에 DoubleAnimation을 설정하는 부분인데,
선택된 패널과 그렇지 않은 패널에 애니메이션 값을 따로 설정 하는 부분입니다.
선택한 버튼의 부모, 부모를 올라가 그 패널의 이름과 자식이름이 같은 경우에 확대 시키는 것이죠.
코드가 많이 허접하네요;;
|
if ((((sender as Button).Parent as Grid).Parent as UCPanel).Name !=
(LayoutRoot.Children[i] as UCPanel).Name)
{
// 선택되지 않은 나머지 패널 값 설정
ani1.To = subPanelWidth;
ani2.To = subPanelHeight;
ani3.To = (subPanelHeight + 10) * pos++ + 10;
ani4.To = mainPanelWidth + 20;
Storyboard.SetTarget(ani1, LayoutRoot.Children[i] as UCPanel);
Storyboard.SetTarget(ani2, LayoutRoot.Children[i] as UCPanel);
Storyboard.SetTarget(ani3, LayoutRoot.Children[i] as UCPanel);
Storyboard.SetTarget(ani4, LayoutRoot.Children[i] as UCPanel);
}
else
{
// 선택된 패널 값 설정
ani1.To = mainPanelWidth;
ani2.To = mainPanelHeight;
ani3.To = 10;
ani4.To = 10;
Storyboard.SetTarget(ani1, (((sender as Button).Parent as Grid).Parent as UCPanel));
Storyboard.SetTarget(ani2, (((sender as Button).Parent as Grid).Parent as UCPanel));
Storyboard.SetTarget(ani3, (((sender as Button).Parent as Grid).Parent as UCPanel));
Storyboard.SetTarget(ani4, (((sender as Button).Parent as Grid).Parent as UCPanel));
} |
위 코드는 클릭이벤트로 인하여 애니메이션이 연속적으로 계속 일어난다면, 리소스 측에 문제가 있습니다.
GC.GetTotalMemory(true) 로 확인하실 수 있구요.
이 부분에서 조언 부탁드리겠습니다. :)
SLAnimation1.xap
