WPF 应用

1. 功能

上次在公众号看到一个转盘效果，觉得挺有意思，便也跟着实现并优化了一下。
具体功能：

• 将 n 个小圆沿着一个大圆的路径排列
• 能根据 n 的数量自适应各个小圆之间的间隔
• 定义一个大圆最多放 x 个小圆，当小圆的数量超出 x 个时，自适应沿着第二个大圆排序，大圆的半径依次递减，每个大圆上的数量也等比递减
• 可有用户 启动/暂定 转动、变色效果

2. 效果

3. 实现

3.1 布局控件

通过继承 Panel 实现一个子元素沿着圆排列的布局控件，从而实现功能点的前 3 点。

public class CirclePathPanel : System.Windows.Controls.Panel
{
    public double ChildrenWidth
    {
        get { return (double)GetValue(ChildrenWidthProperty); }
        set { SetValue(ChildrenWidthProperty, value); }
    }

    public readonly static DependencyProperty ChildrenWidthProperty =
        DependencyProperty.Register("ChildrenWidth", typeof(double), typeof(CirclePathPanel), new PropertyMetadata(40.0));

    double _marginBetweenEllipse = 80;//大圆之间的距离
    List<int> _indexOfEllipse = new List<int>() { 32, 16, 8, 4 };//各个大圆上依次的小圆数量

    /// <summary>
    /// 获取第 n 个元素所在的环数
    /// </summary>
    /// <param name="index"></param>
    /// <returns></returns>
    int GetLoopNum(int index)
    {
        int loopNum = 1;

        foreach (int n in _indexOfEllipse)
        {
            index -= n;
            if (index >= 0)
            {
                loopNum++;
            }
        }

        return loopNum;
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        if (Children.Count > 0)
        {
            Point center = new Point(finalSize.Width / 2, finalSize.Height / 2);

            double outsideRadius = Math.Min(finalSize.Width, finalSize.Height) / 2.0; //最大圆的半径

            int flag = 32; //第一个环上的元素量，从第二环开始依次自动减半，16、8、4
            int indexOfCurrent = 0; //current 元素的在整个大集合中的索引值
            double radius; //元素所在环的半径
            double angleIncrRadians; //元素之间相隔的角度
            double angleInRadians = 0.0;//current 元素所在位置的角度

            foreach (UIElement child in Children)
            {
                //确定当前索引的元素位于第几个圆
                int loopNum = GetLoopNum(indexOfCurrent);
                radius = outsideRadius + 40 - _marginBetweenEllipse * loopNum;                    
                 
                //各个大圆的半径
                if (loopNum > 1)
                {
                    angleIncrRadians = 2.0 * Math.PI / Math.Min(Children.Count - (_indexOfEllipse[0] * 2 - _indexOfEllipse[loopNum - 2]), _indexOfEllipse[loopNum - 1]);
                }
                else 
                {
                    angleIncrRadians = 2.0 * Math.PI / Math.Min(Children.Count, _indexOfEllipse[0]); ;
                }

                // 确定元素的位置
                double x = radius * Math.Cos(angleInRadians) + center.X;
                double y = radius * Math.Sin(angleInRadians) + center.Y;
                Point childPosition = new Point(x, y);
                childPosition.X -= ChildrenWidth / 2 ;
                childPosition.Y -= ChildrenWidth / 2 ;
                                    
                child.Arrange(new Rect(childPosition, new Size(ChildrenWidth, ChildrenWidth)));

                angleInRadians += angleIncrRadians;

                indexOfCurrent++;
                
                if (indexOfCurrent > 59) { break; }
            }
        }
        return finalSize;
    }
}

3.2 封装集合控件

设置集合控件的布局面板为 CirclePathPanel。

<UserControl x:Class="WpfApp1.TurnTableUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" x:Name="selfUserControl">
    <UserControl.Resources>
        <Style TargetType="ItemsControl">
            <Setter Property="Width" Value="{Binding OutSideWidth, ElementName=selfUserControl}"/>
            <Setter Property="Height" Value="{Binding OutSideWidth, ElementName=selfUserControl}"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="LightBlue"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ItemsControl">
                        <Border 
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True" 
                            CornerRadius="{Binding OutSideRadius, ElementName=selfUserControl}">
                            <Grid>
                                <Ellipse Fill="#424242" 
                                         Width="{Binding InSideRadius, ElementName=selfUserControl}" 
                                         Height="{Binding InSideRadius, ElementName=selfUserControl}"/>
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ItemsPresenter>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ItemsControl ItemsSource="{Binding}">  
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse Width="{Binding ChildrenWidth, ElementName=selfUserControl}" 
                         Height="{Binding ChildrenWidth, ElementName=selfUserControl}" 
                         Fill="{Binding Fill}" Stroke="DeepSkyBlue" StrokeThickness="1"></Ellipse>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

        <ItemsControl.RenderTransform>
            <TransformGroup>
                <RotateTransform />
            </TransformGroup>
        </ItemsControl.RenderTransform>
    </ItemsControl>
</UserControl>

public partial class TurnTableUserControl : UserControl
{
    /// <summary>
    /// 最外圆直径
    /// </summary>
    public double OutSideWidth
    {
        get { return (double)GetValue(OutSideWidthProperty); }
        set { SetValue(OutSideWidthProperty, value); }
    }

    public readonly static DependencyProperty OutSideWidthProperty =
        DependencyProperty.Register("OutSideWidth", typeof(double), typeof(TurnTableUserControl), new PropertyMetadata(800.0));

    /// <summary>
    /// 最外圆半径
    /// </summary>
    public double OutSideRadius
    {
        get { return (double)GetValue(OutSideRadiusProperty); }
        set { SetValue(OutSideRadiusProperty, value); }
    }

    public readonly static DependencyProperty OutSideRadiusProperty =
        DependencyProperty.Register("OutSideRadius", typeof(double), typeof(TurnTableUserControl), new PropertyMetadata(400.0));

    /// <summary>
    /// 最内圆半径
    /// </summary>
    public double InSideRadius
    {
        get { return (double)GetValue(InSideRadiusProperty); }
        set { SetValue(InSideRadiusProperty, value); }
    }

    public readonly static DependencyProperty InSideRadiusProperty =
        DependencyProperty.Register("InSideRadius", typeof(double), typeof(TurnTableUserControl), new PropertyMetadata(60.0));

    /// <summary>
    /// 元素直径
    /// </summary>
    public double ChildrenWidth
    {
        get { return (double)GetValue(ChildrenWidthProperty); }
        set { SetValue(ChildrenWidthProperty, value); }
    }

    public readonly static DependencyProperty ChildrenWidthProperty =
        DependencyProperty.Register("ChildrenWidth", typeof(double), typeof(TurnTableUserControl), new PropertyMetadata(40.0));

    public TurnTableUserControl()
    {
        InitializeComponent();
    }
}

3.3 调用并添加小圆

<Window x:Class="WpfApp1.Window1"
        ...>
    <Grid>
        <local:TurnTableUserControl x:Name="turnTableUC" 
                                    DataContext="{Binding MyData}"             
                                    OutSideRadius="400" OutSideWidth="800"
                                    InSideRadius="60" ChildrenWidth="50"/> 
    </Grid>
</Window>

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();           

        this.DataContext = new EllipseChildViewModel();
    }       
}

public class NotifyPropertyChanged : System.ComponentModel.INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnProperty(string propertyName)
    {
        PropertyChangedEventHandler propertyChanged = PropertyChanged;
        if (propertyChanged != null)
        {
            propertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class EllipseChild : NotifyPropertyChanged
{
    Brush _fill;

    public Brush Fill
    {
        get { return _fill; }
        set
        {
            _fill = value;
            OnProperty("Fill");
        }
    }
}

public class EllipseChildViewModel : NotifyPropertyChanged
{
    ObservableCollection<EllipseChild> _myData;
    public ObservableCollection<EllipseChild> MyData
    {
        get { return _myData; }
        set
        {
            _myData = value;
            OnProperty("MyData");
        }
    }
          
    public EllipseChildViewModel()
    {
        MyData = GetData();
    }

    public ObservableCollection<EllipseChild> GetData()
    {
        ObservableCollection<EllipseChild> mydata = new ObservableCollection<EllipseChild>();

        foreach (int _ in Enumerable.Range(0, 10))
        {
            mydata.Add(new EllipseChild() { Fill = new SolidColorBrush(Color.FromRgb(76, 175, 80)) });
            mydata.Add(new EllipseChild() { Fill = new SolidColorBrush(Colors.Transparent) });
            mydata.Add(new EllipseChild() { Fill = new SolidColorBrush(Color.FromRgb(68, 138, 254)) });
            ...
        }
        return mydata;
    }
}

至此，就实现了前 3 个功能点：

3.4 实现转动、变色效果

<Window x:Class="WpfApp1.Window1"
       ...>
    <Grid>
        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10 0">
            <Button Content="转" Click="Button_Click_rorate" Height="30" Width="100" Margin="0 10" Background="Transparent" BorderBrush="DarkSalmon"/>
            <Button Content="变" Command="{Binding ChangeCommand}" Height="30" Width="100"  Background="Transparent" BorderBrush="DarkSalmon"/>
        </StackPanel>
        
        <local:TurnTableUserControl x:Name="turnTableUC" 
                                    DataContext="{Binding MyData}"             
                                    OutSideRadius="400" OutSideWidth="800"
                                    InSideRadius="60" ChildrenWidth="50"/> 
    </Grid>
</Window>

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();           

        this.DataContext = new EllipseChildViewModel();
    }       

    private void Button_Click_rorate(object sender, RoutedEventArgs e)
    {
        turnTableUC.IsActionTurn = !turnTableUC.IsActionTurn;
    }
}

public class EllipseChildViewModel : NotifyPropertyChanged
{
    ...
    public DelegateCommand ChangeCommand { get; set; }

    public EllipseChildViewModel()
    {
        ChangeCommand = new DelegateCommand() { ExecuteCommand = new Action<object>(ChangeColor) };
        MyData = GetData();
    }

    CancellationTokenSource tokenSource;
    CancellationToken token;

    public void ChangeColor(object obj)
    {         
        if (tokenSource == null || token.IsCancellationRequested)
        {
            tokenSource = new CancellationTokenSource();
            token = tokenSource.Token;
            Change(500);
        }             
        else
        {
            tokenSource.Cancel();
        }
    }
    
    /// <summary>
    /// 启动/停止变色，当启动变色时，每隔 milliseconds 变一次色
    /// </summary>
    /// <param name="milliseconds">每次变色的时间间隔，单位毫秒</param>
    public void Change(int milliseconds)
    {            
        Task.Factory.StartNew(async () =>
        {
            try
            {
                while (true)
                {
                    if (token.IsCancellationRequested) return;
    
                    App.Current.Dispatcher.Invoke(() =>
                    {
                        Random rd = new Random();
                        foreach (EllipseChild ec in MyData)
                        {
                            ec.Fill = new SolidColorBrush(Color.FromRgb((byte)rd.Next(0, 256), (byte)rd.Next(0, 256), (byte)rd.Next(0, 256)));
                        }
                    });
    
                    await Task.Delay(milliseconds);
                }
            }
            catch (Exception ex) {}
        });
    }
}

public partial class TurnTableUserControl : UserControl
{
    ...
    
    /// <summary>
    /// 启动、暂停动画
    /// </summary>
    public bool IsActionTurn
    {
        get { return (bool)GetValue(IsActionTurnProperty); }
        set { SetValue(IsActionTurnProperty, value); }
    }

    public readonly static DependencyProperty IsActionTurnProperty =
        DependencyProperty.Register("IsActionTurn", typeof(bool), typeof(TurnTableUserControl),
            new PropertyMetadata(false, new PropertyChangedCallback(ChangedActionStatus)));

    /// <summary>
    /// 是否首次启动动画
    /// </summary>
    static bool _isFirstTimeActionStoryboard = true;

    /// <summary>
    /// 控件动画
    /// </summary>
    static Storyboard _storyboard;

    public TurnTableUserControl()
    {
        InitializeComponent();
        _storyboard = itemsControl.FindResource("storyboard") as Storyboard;
    }

    static void ChangedActionStatus(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {           
        if ((bool)e.NewValue == true)
        {
            
            if (_isFirstTimeActionStoryboard)
            {//首次启动动画
                _storyboard.Begin();
                _isFirstTimeActionStoryboard = !_isFirstTimeActionStoryboard;
            }
            else
            {//恢复动画
                _storyboard.Resume();
            }
        }
        else
        {//暂停动画                
            _storyboard.Pause();
        }
    }
}