C# WPF开源控件库HandyControl用法举例

概述

HandyControl是一款免费开源的WPF控件库，Github可以获取到源代码，相关的示例代码也在github上能获取到，但是没有详细的中文说明文档，对于新手而言使用起来还是会有一些困扰，网上也很难搜到相关的用法示例，所以本节就对它常用的一些控件举例说明下。

首先还是先在nuget上引用HC的库：

然后在前台XAML引用：

xmlns:hc="https://handyorg.github.io/handycontrol"

在App.xaml中引用HC的皮肤和主题：

<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/><ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>

MessageBox用法举例

①对话框

MessageBox.Show("检测到有版本更新，是否更新？", "标题", MessageBoxButton.YesNo, MessageBoxImage.Question);

②提示框：

MessageBox.Show("当前选中了:" + listbox.SelectedItem, "标题", MessageBoxButton.OK, MessageBoxImage.Information);

③错误框：

MessageBox.Show("当前选中了:" + listbox.SelectedItem, "标题", MessageBoxButton.OK, MessageBoxImage.Error);

总共有9个枚举量可供选择，分别如下：

//// 摘要://     Specifies the icon that is displayed by a message box.public enum MessageBoxImage{//// 摘要://     The message box contains no symbols.None = 0,//// 摘要://     The message box contains a symbol consisting of white X in a circle with a red//     background.Error = 16,//// 摘要://     The message box contains a symbol consisting of a white X in a circle with a//     red background.Hand = 16,//// 摘要://     The message box contains a symbol consisting of white X in a circle with a red//     background.Stop = 16,//// 摘要://     The message box contains a symbol consisting of a question mark in a circle.//     The question mark message icon is no longer recommended because it does not clearly//     represent a specific type of message and because the phrasing of a message as//     a question could apply to any message type. In addition, users can confuse the//     question mark symbol with a help information symbol. Therefore, do not use this//     question mark symbol in your message boxes. The system continues to support its//     inclusion only for backward compatibility.Question = 32,//// 摘要://     The message box contains a symbol consisting of an exclamation point in a triangle//     with a yellow background.Exclamation = 48,//// 摘要://     The message box contains a symbol consisting of an exclamation point in a triangle//     with a yellow background.Warning = 48,//// 摘要://     The message box contains a symbol consisting of a lowercase letter i in a circle.Asterisk = 64,//// 摘要://     The message box contains a symbol consisting of a lowercase letter i in a circle.Information = 64}

Button用法举例

①带图标的button：

<Button Height="48" Width="160" Margin="3" Name="testBtn"Background="{DynamicResource PrimaryBrush}"hc:BackgroundSwitchElement.MouseHoverBackground="{DynamicResource MouseHoverBrush}" hc:BackgroundSwitchElement.MouseDownBackground="{DynamicResource MouseDownBrush}"><Button.Content><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="auto"/><ColumnDefinition/></Grid.ColumnDefinitions><Image Source="pack://application:,,,/Images/icon.ico"/><Label Grid.Column="1" Content="Custom Button" BorderThickness="0" Background="Transparent" Foreground="{DynamicResource TextIconBrush}"/></Grid></Button.Content></Button>

②RepeatButton用法：

<RepeatButton Height="48" Width="160" Content="Repeat Button" Margin="3" Delay="500" Style="{StaticResource RepeatButtonPrimary}" Background="{DynamicResource PrimaryBrush}" Foreground="{DynamicResource TextIconBrush}" hc:BorderElement.CornerRadius="5" Name="RepeatButton_Click"/>

③带有日历图表的button：

<Button  Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/><Button  IsEnabled="False" Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>

④左旋转又旋转图表button：

<Button Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource RotateLeftGeometry}"/><Button IsEnabled="False" Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource RotateLeftGeometry}"/>

⑤带左右箭头图标的button：

<Button Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/><Button Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource RightGeometry}"/>

⑥ToggleButton 按钮

<ToggleButton IsChecked="True" Margin="5,8" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch}" hc:VisualElement.HighlightBrush="{DynamicResource DangerBrush}"/><ToggleButton IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,4" Style="{StaticResource ToggleButtonSwitch}"/>

Lable用法举例

<Label Content="DangerBrush" Style="{StaticResource LabelDanger}"/><Label Content="DarkPrimaryBrush" Background="{DynamicResource DarkPrimaryBrush}" Foreground="White" BorderThickness="0"/>

Slider用法举例

<Slider Width="400" IsSnapToTickEnabled="True" Value="8"/><Slider Width="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="10" SelectionEnd="80"/><Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Top" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight"/><Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Bottom" hc:TipElement.StringFormat="#0.00" Value="5" TickPlacement="Both"/>

TextBox用法举例

<TextBox Margin="0,0,0,32" hc:InfoElement.TitleWidth="70" hc:InfoElement.Placeholder="Necessary" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="Left title" hc:InfoElement.Necessary="True" Style="{StaticResource TextBoxExtend}" Name="TextContent"/>

组合框ComboBox用法举例

<ComboBox  IsEditable="True" Width="380" hc:InfoElement.TitleWidth="140"  hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="combox" hc:InfoElement.Necessary="True" Style="{StaticResource ComboBoxExtend}" Margin="0,16,0,0"><ComboBoxItem>张三</ComboBoxItem><ComboBoxItem>李四</ComboBoxItem><ComboBoxItem>王五</ComboBoxItem></ComboBox>