WPF - 簡單的UI框架 - 儀表盤

 

源碼鏈接：https://github.com/DuelWithSelf/WPFEffects

 

更新一： 功能導覽模塊新增Binding用法示例。

 

更新二：儀表盤效果實現。

Binding用法與ListBox的用法一致：

Xaml定義節點樣式； .cs 文件中定義數據：

 <DataTemplate x:Key="ListMenuBox.ItemTemplate" DataType="{x:Type local:CatalogOfEffect}">
            <Border x:Name="BdrNavItem" Background="Transparent" Height="30"
                    MouseLeftButtonUp="BdrNavItem_MouseLeftButtonUp">
                <TextBlock Margin="60,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"
                           Foreground="White" Text="{Binding Path=Name, Mode=TwoWay}"/>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsSelected}" Value="True">
                    <Setter TargetName="BdrNavItem" Property="Background" 
                            Value="{StaticResource ColorBrush.LightWhite}"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

 public class BaseRecord : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string prop)
        {
            if (this.PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }

    public class CatalogOfEffect: BaseRecord
    {
        private string _Name;
        public string Name {
            get { return _Name; }
            set { _Name = value; this.OnPropertyChanged("Name"); }
        }

        private bool _IsSelected;
        public bool IsSelected
        {
            get { return _IsSelected; }
            set { _IsSelected = value; this.OnPropertyChanged("IsSelected"); }
        }

        private string _Key;
        public string Key
        {
            get { return _Key; }
            set { _Key = value; }
        }
    }

引用樣式：

 <CustomFrms:ListMenuBox 
                                x:Name="LmxBinding" Text="Binding示例" 
                                IconData="{StaticResource PathData.TagSolid}"
                                ItemTemplate="{StaticResource ListMenuBox.ItemTemplate}"/>

指定數據源：

  ObservableCollection<CatalogOfEffect> ltCatalogs = new System.Collections.ObjectModel.ObservableCollection<CatalogOfEffect>();
            ltCatalogs.Add(new CatalogOfEffect() { Name = "淡入動效", Key="AnimFadeIn" });
            ltCatalogs.Add(new CatalogOfEffect() { Name = "淡出動效", Key = "AnimFadeOut" });
            ltCatalogs.Add(new CatalogOfEffect() { Name = "翻轉動效", Key = "AnimFlip" });
            ltCatalogs.Add(new CatalogOfEffect() { Name = "爆炸動效", Key = "AnimExpo" });
            this.LmxBinding.ItemsSource = ltCatalogs;

扇形畫面有很多碼農通過Path、 ArcSegment等方式去構建。 Blend里面有Arc。 官方封裝好的直接拿來用，省心省力。  用Path和ArcSegment的方式去實現，無非是用自己的方式再封裝出一個Arc，其實沒必要。

儀表盤的實現原理請參考Github上的源碼。