在自定义按钮中,我们主要使用的是style 中设置ControlTemplate中相关内容来完成的。实例代码如下:
<UserControl.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="70"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>-2</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}" RadiusY="20" RadiusX="20" Stroke="Black" ToolTipService.ToolTip="{TemplateBinding Tag}" StrokeThickness="0"/> <!--这里主要是用来绑定Button中的Background属性,可是绑定一张图片-->
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
上面定义了button的样式,下面主要在button中引用样式,示例如下:
<telerik:RadButton Margin="0,10,164,20" Name="radButton2" Style="{StaticResource ButtonStyle1}" ToolTipService.ToolTip="*********">
<telerik:RadButton.Background>
<ImageBrush ImageSource="图片路径" />
</telerik:RadButton.Background>
</telerik:RadButton>