User Tools

Site Tools


notes:uwp:customcontrols

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
notes:uwp:customcontrols [2017/01/11]
admin
notes:uwp:customcontrols [2017/02/16] (current)
admin
Line 9: Line 9:
 Alternatively,​ you may want to create a UserControl first and then change it to a custom control by deriving it from a class different than the //​UserControl//​ class, for example the //Button// class. Alternatively,​ you may want to create a UserControl first and then change it to a custom control by deriving it from a class different than the //​UserControl//​ class, for example the //Button// class.
  
-An example of a custom control ​- SimpleControl:+Example: A simple ​custom control:
  
 {{uwp_CustomControl1.PNG}} {{uwp_CustomControl1.PNG}}
Line 92: Line 92:
 </​code>​ </​code>​
  
-Another way of creating a custom control is to define a XAML file and a corresponding code-behind file. In the following example we create a custom button GradientButton:​+Example: ​Another way of creating a custom control is to define a XAML file and a corresponding code-behind file. In the following example we create a custom button GradientButton:​
  
 {{uwp_CustomButton.PNG}} {{uwp_CustomButton.PNG}}
Line 164: Line 164:
 </​Page>​ </​Page>​
 </​code>​ </​code>​
 +
 +
 +Example: The PieSlice control is based on an example from the book "​Programming Windows"​ by Charles Petzold:
 +
 +<code csharp>
 +using System;
 +using Windows.Foundation;​
 +using Windows.UI.Xaml;​
 +using Windows.UI.Xaml.Media;​
 +using Windows.UI.Xaml.Shapes;​
 +
 +namespace TestApp
 +{
 +    public class PieSlice : Path
 +    {
 +        // Store frequently used objects globally.
 +        private PathFigure pathFigure;
 +        private LineSegment lineSegment;​
 +        private ArcSegment arcSegment;
 +
 +        // Animatable properties must be backed by dependency properties.
 +
 +        public static readonly DependencyProperty CenterProperty =
 +            DependencyProperty.Register("​Center",​ typeof(Point),​ typeof(PieSlice),​
 +                new PropertyMetadata(new Point(100, 100), OnPropertyChanged));​
 +
 +        public static readonly DependencyProperty RadiusProperty =
 +            DependencyProperty.Register("​Radius",​ typeof(double),​ typeof(PieSlice),​
 +                new PropertyMetadata(100.0,​ OnPropertyChanged));​
 +
 +        public static readonly DependencyProperty StartAngleProperty =
 +            DependencyProperty.Register("​StartAngle",​ typeof(double),​ typeof(PieSlice),​
 +                new PropertyMetadata(0.0,​ OnPropertyChanged));​ // measured in degrees
 +
 +        public static readonly DependencyProperty SweepAngleProperty =
 +            DependencyProperty.Register("​SweepAngle",​ typeof(double),​ typeof(PieSlice),​
 +                new PropertyMetadata(90.0,​ OnPropertyChanged));​ // measured in degrees
 +
 +        public Point Center
 +        {
 +            set { SetValue(CenterProperty,​ value); }
 +            get { return (Point)GetValue(CenterProperty);​ }
 +        }
 +
 +        public double Radius
 +        {
 +            set { SetValue(RadiusProperty,​ value); }
 +            get { return (double)GetValue(RadiusProperty);​ }
 +        }
 +
 +        public double StartAngle
 +        {
 +            set { SetValue(StartAngleProperty,​ value); }
 +            get { return (double)GetValue(StartAngleProperty);​ }
 +        }
 +
 +        public double SweepAngle
 +        {
 +            set { SetValue(SweepAngleProperty,​ value); }
 +            get { return (double)GetValue(SweepAngleProperty);​ }
 +        }
 +
 +        public PieSlice()
 +        {
 +            pathFigure = new PathFigure { IsClosed = true };
 +            lineSegment = new LineSegment();​
 +            arcSegment = new ArcSegment { SweepDirection = SweepDirection.Clockwise };
 +            pathFigure.Segments.Add(lineSegment);​
 +            pathFigure.Segments.Add(arcSegment);​
 +
 +            PathGeometry pathGeometry = new PathGeometry();​
 +            pathGeometry.Figures.Add(pathFigure);​
 +
 +            this.Data = pathGeometry;​
 +            UpdateValues();​
 +        }
 +
 +        private static void OnPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
 +        {
 +            (obj as PieSlice).UpdateValues();​
 +        }
 +
 +        // UpdateValues is called whenever any of the custom properties (Center, Radius
 +        // StartAngle, SweepAngle) changes.
 +        private void UpdateValues()
 +        {
 +            pathFigure.StartPoint = this.Center;​
 +
 +            double x = this.Center.X + this.Radius * Math.Sin(Math.PI * this.StartAngle / 180);
 +            double y = this.Center.Y - this.Radius * Math.Cos(Math.PI * this.StartAngle / 180);
 +            lineSegment.Point = new Point(x, y);
 +
 +            x = this.Center.X + this.Radius * Math.Sin(Math.PI * (this.StartAngle +
 +                                                                  this.SweepAngle) / 180);
 +
 +            y = this.Center.Y - this.Radius * Math.Cos(Math.PI * (this.StartAngle +
 +                                                                  this.SweepAngle) / 180);
 +            arcSegment.Point = new Point(x, y);
 +            arcSegment.IsLargeArc = this.SweepAngle >= 180;
 +
 +            arcSegment.Size = new Size(this.Radius,​ this.Radius);​
 +        }
 +    }
 +}
 +</​code>​
 +
 +Usage:
 +<code xml>
 +<Page x:​Class="​TestApp.MainPage"​
 +      xmlns="​http://​schemas.microsoft.com/​winfx/​2006/​xaml/​presentation"​
 +      xmlns:​x="​http://​schemas.microsoft.com/​winfx/​2006/​xaml"​
 +      xmlns:​local="​using:​TestApp">​
 +    <​Grid>​
 +        <​local:​PieSlice x:​Name="​PieSlice1"​
 +                        Center="​300,​300"​ Radius="​150"​
 +                        Stroke="​Blue"​ StrokeThickness="​2"​ Fill="​Wheat"​ />
 +    </​Grid>​
 +
 +    <​Page.Triggers>​
 +        <​EventTrigger>​
 +            <​BeginStoryboard>​
 +                <​Storyboard>​
 +                    <​DoubleAnimation Storyboard.TargetName="​PieSlice1"​
 +                                     ​Storyboard.TargetProperty="​SweepAngle"​
 +                                     ​EnableDependentAnimation="​True"​
 +                                     ​From="​1"​ To="​359"​ Duration="​0:​0:​5"​
 +                                     ​AutoReverse="​True"​
 +                                     ​RepeatBehavior="​Forever"​ />
 +                </​Storyboard>​
 +            </​BeginStoryboard>​
 +        </​EventTrigger>​
 +    </​Page.Triggers>​
 +</​Page>​
 +</​code>​
 +
  
 Links: Links:
notes/uwp/customcontrols.txt ยท Last modified: 2017/02/16 by admin