Monday, 26 May 2014

Create a Custom Panel (StackVanishing Panel) in Xaml (WPF)

In this article we are going to see how to create a Stack Vanishing Panel, Stack Vanishing Panel is ordering the elements in the Stack order and keep on decrease the visibility of elements like seeing an object from a long view.The Required output for us is looks like the following one.




So to do that Panel, we need some reducing factor that is called ZFactor and we make the child objects as constant starting height.

Custom Panel :
***********
  class StackVanishingPanel:Panel
    {
        private Size _arrangesize = new Size();

        public double ItemHeight
        {
            get { return (double)GetValue(ItemHeightProperty); }
            set { SetValue(ItemHeightProperty, value); }
        }
       
        public static readonly DependencyProperty ItemHeightProperty =
            DependencyProperty.Register("ItemHeight", typeof(double), typeof(StackVanishingPanel), new 
                                                        FrameworkPropertyMetadata(50.0D,               
                                                        FrameworkPropertyMetadataOptions.AffectsMeasure
                                                        |FrameworkPropertyMetadataOptions.AffectsArrange));


        public double ZFactor
        {
            get { return (double)GetValue(ZFactorProperty); }
            set { SetValue(ZFactorProperty, value); }
        }
       
        public static readonly DependencyProperty ZFactorProperty =
            DependencyProperty.Register("ZFactor", typeof(double), typeof(StackVanishingPanel), new 
                                         FrameworkPropertyMetadata(0.5D,
                                         FrameworkPropertyMetadataOptions.AffectsArrange));

        protected override Size MeasureOverride(Size availableSize)
        {

            if (availableSize.Width == double.PositiveInfinity && availableSize.Height ==                                                                                     double.PositiveInfinity)
                return Size.Empty;

            for (int i = 0; i < InternalChildren.Count; i++)
            {
                InternalChildren[i].Measure(new Size(availableSize.Width, ItemHeight));
            }

            return new Size(availableSize.Width, ItemHeight * InternalChildren.Count);
        }


        protected override Size ArrangeOverride(Size finalSize)
        {
            _arrangesize = finalSize;
            int currentindex = 0;
            for (int i = 0; i <InternalChildren.Count; i++,currentindex++)
            {
                Rect _newrect = GetRect(currentindex);
                InternalChildren[i].Arrange(_newrect);
            }

            return base.ArrangeOverride(finalSize);
        }

        private Rect GetRect(int index)
        {
            double _zfactor = Math.Pow(ZFactor, index);
            Size itemsize = new Size(_arrangesize.Width * _zfactor, ItemHeight * _zfactor);

            double left = (_arrangesize.Width - itemsize.Width) * 0.5;
            double top = _arrangesize.Height;

            for (int i = 0; i <= index; i++)
            {
                top -= Math.Pow(ZFactor, i) * ItemHeight;
            }

            Rect newrect = new Rect(itemsize);
            newrect.Location = new Point(left, top);
            return newrect;
        }
              

    }

Xaml:
*****


       <local:StackVanishingPanel ItemHeight="50" ZFactor="0.88">
            <Button Background="Orange" Foreground="white"> 1</Button>
            <Button Background="Gray" Foreground="white"> 2</Button>
            <Button Background="SteelBlue" Foreground="white"> 3</Button>
            <Button Background="Red" Foreground="white"> 4</Button>
            <Button Background="Magenta" Foreground="white"> 5</Button>
            <Button Background="Navy" Foreground="white"> 6</Button>
            <Button Background="Black" Foreground="white"> 7</Button>           
        </local:StackVanishingPanel>






From this article you can learn how to create a Stack Vanishing Panel.

No comments:

Post a Comment