這次通過最近做的小例子說明一下自定義Button控件和樣式。
實現的效果為：
在講解之前先分析一下：
這上面為八個按鈕，這是毫無疑問的。在每個按鈕中又包含了一個圖片和文本兩個元素。雖然有這么多按鈕，但他們的樣式基本相同，除了按鈕中的圖片和文字內容。所以我們可以把相同的部分提取出來，把不同的內容進行傳參來實現不同的效果。
繼續分析，在按鈕中包含的這兩個元素，一個是圖片元素，一個是文本元素。先說文本元素，文本元素直接可以通過Button.Content直接賦值。但Image控件的Source屬性不能通過Button中任何一個屬性給它賦值。所以想 如果Button有個像Image控件一樣的Source屬性，並通過這兩個進行Binding,那么這兩個元素就都可以通過Button自身的屬性就可以直接賦值。分析結果：
①要先自定義一個MyButton類，繼承自Button。 給MyButton注冊一個依賴屬性 ImgSourceProperty，類型為ImageSource。這個Image控件的Source屬性基本一樣。
/// <summary>
/// 自定義Button控件
/// </summary>
public class MyButton:Button
{
//定義Imagesource依賴屬性
public static readonly DependencyProperty ImgSourceProperty = DependencyProperty.Register
("ImgSource", typeof(ImageSource), typeof(MyButton), null);
public ImageSource ImgSource
{
get { return (ImageSource)GetValue(ImgSourceProperty); }
set { SetValue(ImgSourceProperty, value); }
}
}
②定義一個通用樣式，在這里定義的樣式其實是修改了Button模板
<Application x:Class="Test13.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Test13" //要注意引用你自定義控件的命名控件
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="sysStatusButton"
TargetType="{x:Type local:MyButton}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyButton}">
<Border x:Name="border"
BorderBrush="{TemplateBinding Control.BorderBrush}"
BorderThickness="0"
Background="#2d548e"
CornerRadius="5,5,5,5">
<StackPanel Orientation="Horizontal">
<Image VerticalAlignment="Center"
Width="27"
Height="27"
Margin="5,0,0,0"
Source="{TemplateBinding ImgSource}"></Image> //這里把模板中Image控件的source屬性Binding到自定義控件的ImgSource屬性上。
<TextBlock VerticalAlignment="Bottom"
x:Name="textBlock"
Margin="5,0,0,7"
FontSize="12"
Foreground=" White"
Text="{TemplateBinding Content}"></TextBlock> //這里的文本控件直接綁定的是Button的Content內容。
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="border" Property="Border.Background" Value="#FF9900" />
<Setter TargetName="textBlock" Property="TextBlock.Foreground" Value="black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Application.Resources>
</Application>
③接下來就是在XAML中聲明控件,當給自定義控件的這兩個屬性賦值時，在上面的樣式中就會給Image控件和TextBlock賦值。
<local:MyButton Content="系統狀態監控" Height="40" Width="132"
Style="{StaticResource sysStatusButton}"
ImgSource="/Test13;component/Images/2.png"
Click="MyButton_Click" />
<local:MyButton Content="設備監控列表"
Height="40"
Width="132"
Margin="5,0,5,0"
Style="{StaticResource sysStatusButton}"
ImgSource="/Test13;component/Images/3.png"
Click="MyButton_Click_1" />