win8实现(假3D翻转)gallery(画廊)

来源:互联网 发布:mac音量嘟嘟 编辑:程序博客网 时间:2024/05/12 06:53
目前是使用控件设计的所以功能和美工上没有很好的体现,下次将重新修改(加动画,缩放等效果)

看效果图片:





核心代码:
---------------------------------------------------------------------------------------------
    <ScrollViewer x:Name="MainScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Foreground="{x:Null}" HorizontalScrollMode="Auto" VerticalScrollMode="Auto" ZoomMode="Disabled" IsDeferredScrollingEnabled="True" >
        <ListView x:Name="MainLayout" SelectionMode="Single" CanDragItems="True" CanReorderItems="True" IsActiveView="False" Foreground="{x:Null}" SelectionChanged="MainLayout_SelectionChanged" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="stackPanel" Orientation="Horizontal">
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
    </ScrollViewer>
---------------------------------------------------------------------------------------------
 public sealed partial class Gallery : UserControl
    {
        private double rotationValue;
        /// <summary>
        /// 设置或获取翻转角度
        /// </summary>
        public double RotationValue
        {
            get { return rotationValue; }
            set { rotationValue = value; }
        }
        private ItemCollection item;
        /// <summary>
        /// 获取项的集合
        /// </summary>
        public ItemCollection Item
        {
            get { return item; }
        }
        public Gallery()
        {
            this.InitializeComponent();
            this.item = this.MainLayout.Items;
            this.rotationValue = 45;
        }
        /// <summary>
        /// 添加某个FrameworkElement到视图中
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        public void add(FrameworkElement frameworkElement)
        {
            frameworkElement.Height = this.Height;
            this.item.Add(frameworkElement);
        }
        /// <summary>
        /// 移动某个FrameworkElement的对象
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        public void remove(FrameworkElement frameworkElement)
        {
            this.item.Remove(frameworkElement);
        }
        /// <summary>
        /// 移动某个FrameworkElement的下标
        /// </summary>
        /// <param name="index">相对的位置</param>
        public void remove(int index)
        {
            this.item.RemoveAt(index);
        }
        /// <summary>
        /// 通知完成,可以改变视图的状态
        /// </summary>
        /// <param name="frameworkElement">如果frameworkElement为空的就是选择居中的位置</param>
        private void complete(FrameworkElement frameworkElement)
        {
            //判断当前的item集合是否为空
            if (this.item==null)
            {
                return;
            }
            //获取当前item的集合个数
            int length = this.item.Count;
            if (length < 1)
            {
                return;
            }
            //获取居中的位置
            int centre = length >> 1;
            //判断当前集合是否存在这个frameworkElement 对象      
            if (frameworkElement!=null&&this.item.Contains(frameworkElement))
            {
                //获取这个frameworkElement存在的下标
              centre = this.item.IndexOf(frameworkElement);
            }
            //改变所有的PlaneProjection属性
            for (int i = 0; i < length; i++)
            {
                var itemFrameworkElement = this.item[i] as FrameworkElement;
                if (i < centre)
                {
                    this.rotationRight(itemFrameworkElement);
                }
                else if (i > centre)
                {
                    this.rotationLift(itemFrameworkElement);
                }
                else
                {
                    this.rotationNone(itemFrameworkElement);
                }
            }
        }
        /// <summary>
        /// 通知完成,可以改变视图的状态
        /// </summary>
        public void complete()
        {
            this.complete(null);
        }
        /// <summary>
        /// 向左变换45度
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        private void rotationLift(FrameworkElement frameworkElement)
        {
            PlaneProjection planeProjection = checkPlaneProjection(frameworkElement);
            planeProjection.RotationY = this.RotationValue;
            frameworkElement.Projection = planeProjection;
        }
        /// <summary>
        /// 向右变换45度
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        private void rotationRight(FrameworkElement frameworkElement)
        {
            PlaneProjection planeProjection = checkPlaneProjection(frameworkElement);
            planeProjection.RotationY = -this.RotationValue;
            frameworkElement.Projection = planeProjection;
        }
        /// <summary>
        /// 不变换
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        private void rotationNone(FrameworkElement frameworkElement)
        {
            PlaneProjection planeProjection = checkPlaneProjection(frameworkElement);
            planeProjection.RotationY = 0;
            frameworkElement.Projection = planeProjection;
        }
        /// <summary>
        /// 检查FrameworkElement对象的PlaneProjection对象,如果为空就创建一个新的,否则返回自身的PlaneProjection的对象
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        /// <returns>PlaneProjection的对象</returns>
        private PlaneProjection checkPlaneProjection(FrameworkElement frameworkElement)
        {
            PlaneProjection planeProjection = null;
            var projection = frameworkElement.Projection;
            if (projection != null)
            {
                if (projection is PlaneProjection)
                {
                    try
                    {
                        planeProjection = projection as PlaneProjection;
                    }
                    catch (Exception)
                    {
                    }
                }
            }
            if (planeProjection == null)
            {
                planeProjection = new PlaneProjection();
            }
            return planeProjection;
        }
        /// <summary>
        /// 项选择事件
        /// </summary>
        private void MainLayout_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //判断选择的下标是否小于0
            if (this.MainLayout.SelectedIndex<0)
            {
                return;
            }
            //获取选择的对象
            FrameworkElement frameworkElement = this.MainLayout.SelectedItem as FrameworkElement;
            //完成进行排列
            this.complete(frameworkElement);
            //如果接口不为空的调用接口
            if (this.GalleryItemSelection!=null)
            {
                this.GalleryItemSelection.ItemSelection(frameworkElement, this.MainLayout.SelectedIndex);
            }
        }
        /// <summary>
        /// 选择项调用的接口
        /// </summary>
        private GalleryItemSelection galleryItemSelection;
        /// <summary>
        /// 设置或获取选择项调用的接口
        /// </summary>
        public GalleryItemSelection GalleryItemSelection
        {
            get { return galleryItemSelection; }
            set { galleryItemSelection = value; }
        }
    }
    /// <summary>
    /// 画廊项选择接口
    /// </summary>
    public interface GalleryItemSelection
    {
        /// <summary>
        /// 当画廊的项被选择时该方法就会调用
        /// </summary>
        /// <param name="frameworkElement">FrameworkElement对象</param>
        /// <param name="SelectedIndex">相对于所有的选择位置</param>
        void ItemSelection(FrameworkElement frameworkElement, int SelectedIndex);
    }
---------------------------------------------------------------------------------------------- 

测试类代码:
--------------------------------------------------------------------------------------------------------------------------- 
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="but" Content="" HorizontalAlignment="Left" Margin="10,493,0,0" VerticalAlignment="Top" Height="265" Width="562" BorderBrush="{x:Null}" Foreground="{x:Null}"/>
        <Image x:Name="image" Height="443" Margin="10,10,0,0" VerticalAlignment="Top" Width="562" HorizontalAlignment="Left" Stretch="None"/>
    </Grid>

--------------------------------------------------------------------------------------------------------------------------- 
        private Gallery gallery;
        public MainPage()
        {
            this.InitializeComponent();
            gallery = new Gallery();
            gallery.GalleryItemSelection = this;
            for (int i = 0; i < 26;i++ )
            {
                BitmapImage bitmapImage = new BitmapImage();
                 string filePath = @"ms-appx:///Images/img_"+i+".jpg" ;
                 bitmapImage.UriSource = new Uri(filePath);
                Image img = new Image();
                img.Width = 160;
                img.Height = 480;
                img.Stretch = Stretch.UniformToFill;
                img.Source = bitmapImage;
                this.gallery.add(img);
            }
            this.gallery.complete();
            this.but.Content = this.gallery;
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
        private void but_Click(object sender, RoutedEventArgs e)
        {
        }
        public void ItemSelection(FrameworkElement frameworkElement, int SelectedIndex)
        {
            if (frameworkElement is Image)
           {
               Image img = frameworkElement as Image;
               this.image.Source = img.Source;
           }
        }
    }
--------------------------------------------------------------------------------------------------------------------------- 


原创粉丝点击