使用自定义控件显示数字

有时候,出于美观需要,我们需求将数字显示为下图右侧效果,实现比较简单.主要代码做笔记如下:

一、自定义控件过程

1. 在项目中新建类MydigitalEx，继承自Control

public class Mydigital : Control

2. 创建依赖属性,用于接受数字字符串.并重写OnRender方法

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace Wpf超级大乐透
{
    public class MydigitalEx : Control
    {

        #region 依赖属性数字
        /// <summary>
        /// 数字
        /// </summary>
        public static readonly DependencyProperty DigitalNumberProperty;

        /// <summary>
        /// 字体画刷
        /// </summary>
        public static readonly DependencyProperty DigitalBrushFontProperty;
        /// <summary>
        /// 圆形背景颜色
        /// </summary>
        public static readonly DependencyProperty DigitalBlackgroundProperty;
        public static readonly DependencyProperty DigitalPenBrushProperty;
        public static readonly DependencyProperty DigitalBrushThicknessProperty;
        public static readonly DependencyProperty RadiusProperty;

        public string DigitalNumber
        {
            get { return (string)GetValue(DigitalNumberProperty); }
            set { SetValue(DigitalNumberProperty, value); }
        }
        public Brush DigitalBlackground
        {
            get { return (Brush)GetValue(DigitalBlackgroundProperty); }
            set { SetValue(DigitalBlackgroundProperty, value); }
        }
        public Brush DigitalBrushFont
        {
            get { return (Brush)GetValue(DigitalBrushFontProperty); }
            set { SetValue(DigitalBrushFontProperty, value); }
        }
        public Brush DigitalPenBrush
        {
            get { return (Brush)GetValue(DigitalPenBrushProperty); }
            set { SetValue(DigitalPenBrushProperty, value); }
        }



        public double DigitalBrushThickness
        {
            get { return (double)GetValue(DigitalBrushThicknessProperty); }
            set { SetValue(DigitalBrushThicknessProperty, value); }
        }



        public double Radius
        {
            get { return (double)GetValue(RadiusProperty); }
            set { SetValue(RadiusProperty, value); }
        }





        static MydigitalEx()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(MydigitalEx), new FrameworkPropertyMetadata(typeof(MydigitalEx)));



            DigitalNumberProperty = DependencyProperty.Register("DigitalNumber", typeof(string), typeof(MydigitalEx),
                new PropertyMetadata(""));
            DigitalBlackgroundProperty = DependencyProperty.Register("DigitalBlackground", typeof(Brush), typeof(MydigitalEx),
                new PropertyMetadata(Brushes.Gold));

            DigitalBrushFontProperty = DependencyProperty.Register("DigitalBrushFont", typeof(Brush), typeof(MydigitalEx),
                new PropertyMetadata(Brushes.White));

            DigitalPenBrushProperty = DependencyProperty.Register("DigitalPenBrush", typeof(Brush), typeof(MydigitalEx),
                new PropertyMetadata(Brushes.Red));

            DigitalBrushThicknessProperty = DependencyProperty.Register("DigitalBrushThickness", typeof(double), typeof(MydigitalEx), new PropertyMetadata(1.0));

            RadiusProperty = DependencyProperty.Register("Radius", typeof(double), typeof(MydigitalEx), new PropertyMetadata(15.0));
        }
        #endregion




        protected override void OnMouseDoubleClick(MouseButtonEventArgs e)
        {
            base.OnMouseDoubleClick(e);
        }
        protected override void OnRender(DrawingContext dc)
        {
            base.OnRender(dc);
            if (DigitalNumber == "--")
                return;

            double len = Math.Min(ActualHeight, ActualWidth);
            Pen pen = new Pen(DigitalPenBrush, DigitalBrushThickness);

            //拆分数字
            string[] digitals = DigitalNumber.Split(new char[] { ',' });
            int n = digitals.Length;

            double digitalWidth = len;
            double totalRadius = len / 2;
            //double radius = totalRadius * 9 / 10;
            this.Width = Radius * n * 2;

            for (int i = 0; i < n; i++)
            {

                Point center = new Point((i + 0.5) * (Radius+2) * 2, len / 2);
                //画圆

                dc.DrawEllipse(DigitalBlackground, pen, center, Radius, Radius);

                //写字
                if (!string.IsNullOrEmpty(DigitalNumber))
                {
                    FormattedText text = new FormattedText(digitals[i], CultureInfo.CurrentCulture,
                       FlowDirection.LeftToRight, new Typeface("Verdana"), 14, DigitalBrushFont);
                    Point txtPoint = new Point(center.X - 9, center.Y - 8);
                    dc.DrawText(text, txtPoint);
                }
            }


        }
    }
}

二.前台实现

前端使用ListView进行布局,开奖号码使用有模板 ColAllDigital

<ListView x:Name="lst" d:DataContext="{d:DesignData Source=/SampleData/SampleData.xaml}" 
              FontSize="12" FontFamily="Verdana"
              ItemsSource="{Binding }">
        <ListView.View >
            <GridView>
                <GridViewColumn Header="期号"  DisplayMemberBinding="{Binding QiHao}" Width="80"/>
                <GridViewColumn Header="开奖号码" DisplayMemberBinding="{Binding Number}" Width="150" />

                <GridViewColumn Header="开奖号码"   Width=" 350"
                                 CellTemplate="{StaticResource ColAllDigital}"></GridViewColumn>
            </GridView>
        </ListView.View>  

ColAllDigital 模板定义如下

    <Window.Resources>
        <DataTemplate x:Key="ColAllDigital" d:IsDesignTimeCreatable="True" >
            <StackPanel Margin="5,2,5,2"  >
                <local:MydigitalEx x:Name="labelDigital" Width="130"  Height="30" HorizontalAlignment="Center"
                                   DigitalPenBrush="Red" 
                                   DigitalBlackground="White"
                                   DigitalBrushFont="Black"
                                   DigitalNumber="{Binding Path=Number}"></local:MydigitalEx>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

至此,就完成了基本实现.

demo