내용 보기

작성자

관리자 (IP : 172.17.0.1)

날짜

2020-07-10 04:30

제목

[WPF] Grid Column 위치 교체 하기 애니메이션

결과 동영상 : https://www.youtube.com/watch?v=fLw5QcESnkk#action=share
 

The idea of doing this is to make the application comfortable for left handed and right handed people equally. We came across this problem when we started development of app for touchscreens. The RH people required the command grid on RHS and LH ppl on left handed respectively. There are two grids, One is a command grid (referred as commGrid) and the other is mainGrid. The mainGrid has a button Swap me! When the button is hit, the main grid and commGrid swap. the main window of the app (window1.xaml) has following grid ( superGrid). 

view plainprint?
  1. <grid x:name="superGrid">  
  2.   
  3.     <grid.rowdefinitions>  
  4.   
  5.         <rowdefinition></rowdefinition>  
  6.   
  7.     </grid.rowdefinitions>  
  8.   
  9.     <grid.columndefinitions>  
  10.   
  11.         <columndefinition width="0.8*"></columndefinition>  
  12.   
  13.         <columndefinition width="0.2*"></columndefinition>  
  14.   
  15.     </grid.columndefinitions>  
  16.   
  17.     <grid x:name="mainGrid" grid.column="0" margin="0,0,0,0" panel.zindex="1">  
  18.   
  19.         <border borderthickness="5" cornerradius="20" borderbrush="Black">  
  20.   
  21.         <button click="Button_Click" width="100" height="100">Swap me!</button>  
  22.   
  23.     </border></grid>  
  24.   
  25.     <grid x:name="commGrid" grid.column="1" margin="0,0,0,0" panel.zindex="99">  
  26.   
  27.         <border borderthickness="5" cornerradius="20" borderbrush="Black">  
  28.   
  29.     </border></grid>  
  30.   
  31. </grid>  



The button_click event handler is as follows... 

view plainprint?
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2.   
  3. {  
  4.   
  5.     //calculate commGrid and mainGrid widths   
  6.   
  7.     double commGridWidth = commGrid.ActualWidth;  
  8.   
  9.     double mainGridWidth = mainGrid.ActualWidth;  
  10.   
  11.   
  12.   
  13.     //animated is a bool const at app level to check if animation is enabled.  
  14.   
  15.     if(animated)  
  16.   
  17.         AnimateGrids(changeDexter, commGridWidth, mainGridWidth);  
  18.   
  19.     else  
  20.   
  21.     {  
  22.   
  23.         GridChange(commGridWidth, mainGridWidth);  
  24.   
  25.         changeDexter(this, EventArgs.Empty);  
  26.   
  27.   
  28.   
  29.     }  
  30.   
  31.   
  32.   
  33.   
  34.   
  35. }  


The most important function where the central logic lies is AnimateGrids. Since Margin does not have a animation by itself, we can use thickness animation. I have two animations, one for each grid. 

view plainprint?
  1. private void AnimateGrids(EventHandler postAnimation, double commGridWidth, double mainGridWidth)  
  2.   
  3. {  
  4.   
  5.   
  6.   
  7.   
  8.   
  9.   
  10.   
  11.   
  12.   
  13.     /* 
  14.  
  15.      *  If commGrid is right 
  16.  
  17.      *  commGrid.Margin.Left should move from 0 to -mainGridWidth 
  18.  
  19.      *  commGrid.Margin.Right should move from 0 to +mainGridWidth 
  20.  
  21.      *   
  22.  
  23.      *  If commGrid is left 
  24.  
  25.      *  commGrid.Margin.Left should move from 0 to +mainGridWidth 
  26.  
  27.      *  commGrid.Margin.Right should move from 0 to -mainGridWidth 
  28.  
  29.      *  
  30.  
  31.      */  
  32.   
  33.   
  34.   
  35.   
  36.   
  37.   
  38.   
  39.     Storyboard sb = new Storyboard();  
  40.   
  41.   
  42.   
  43.     ThicknessAnimation commGridAnimation  
  44.   
  45.         = new ThicknessAnimation  
  46.   
  47.             {  
  48.   
  49.                From =  
  50.   
  51.                    new Thickness(0),  
  52.   
  53.                To =  
  54.   
  55.                    new Thickness((isRightHanded ? -1 : 1) * mainGridWidth, 0,  
  56.   
  57.                                  (isRightHanded ? 1 : -1) * mainGridWidth, 0),  
  58.   
  59.                AccelerationRatio = 0.2,  
  60.   
  61.                FillBehavior = FillBehavior.Stop,  
  62.   
  63.                DecelerationRatio = 0.8,  
  64.   
  65.                Duration = DURATION  
  66.   
  67.             };  
  68.   
  69.   
  70.   
  71.     ThicknessAnimation mainGridAnimation   
  72.   
  73.         = new ThicknessAnimation  
  74.   
  75.            {  
  76.   
  77.                From =  
  78.   
  79.                    new Thickness(0),  
  80.   
  81.                To =  
  82.   
  83.                    new Thickness((isRightHanded ? 1 : -1)*commGridWidth, 0,  
  84.   
  85.                                  (isRightHanded ? -1 : 1)*commGridWidth, 0),  
  86.   
  87.   
  88.   
  89.                  FillBehavior = FillBehavior.Stop,  
  90.   
  91.                  AccelerationRatio = 0.2,  
  92.   
  93.                  DecelerationRatio = 0.8,  
  94.   
  95.                  Duration=DURATION  
  96.   
  97.                                    
  98.   
  99.            };  
  100.   
  101.   
  102.   
  103.   
  104.   
  105.     Storyboard.SetTarget(commGridAnimation, commGrid);  
  106.   
  107.     Storyboard.SetTargetProperty(commGridAnimation,  
  108.   
  109.         new PropertyPath(MarginProperty));  
  110.   
  111.   
  112.   
  113.     Storyboard.SetTarget(mainGridAnimation, mainGrid);  
  114.   
  115.     Storyboard.SetTargetProperty(mainGridAnimation,  
  116.   
  117.         new PropertyPath(MarginProperty));  
  118.   
  119.   
  120.   
  121.   
  122.   
  123.   
  124.   
  125.     sb.Children.Add(commGridAnimation);  
  126.   
  127.     sb.Children.Add(mainGridAnimation);  
  128.   
  129.   
  130.   
  131.     sb.Completed += new EventHandler(postAnimation);  
  132.   
  133.   
  134.   
  135.     sb.Begin();  
  136.   
  137.   
  138.   
  139.   
  140.   
  141.   
  142.   
  143. }  



ChangeDexter is an event handler which is defined as 

view plainprint?
  1. private void changeDexter(object sender, EventArgs e)  
  2.   
  3.    {  
  4.   
  5.        isRightHanded = !isRightHanded;  
  6.   
  7.        //Swap columns  
  8.   
  9.        Grid.SetColumn(mainGrid, isRightHanded ? 0 : 1);  
  10.   
  11.        Grid.SetColumn(commGrid, isRightHanded ? 1 : 0);  
  12.   
  13.   
  14.   
  15.        //Swap widths  
  16.   
  17.        GridLength gl = superGrid.ColumnDefinitions.ElementAt(0).Width;  
  18.   
  19.        superGrid.ColumnDefinitions.ElementAt(0).Width = superGrid.ColumnDefinitions.ElementAt(1).Width;  
  20.   
  21.        superGrid.ColumnDefinitions.ElementAt(1).Width = gl;  
  22.   
  23.   
  24.   
  25.   
  26.   
  27.          
  28.   
  29.    }  


ChangeDexter is called at the end of animation. 

출처1

http://pradeepmahdevu.blogspot.com/2009/02/flying-grids-using-margin-animation.html

출처2

(0 Bytes)
목록
2020-07-10 04:31
예제 - https://youtu.be/fLw5QcESnkk
관리자
(172.17.0.1)