C# WPF 自定義按鈕的方法

更新時(shí)間：2021年03月03日 11:31:41 作者：louzi

這篇文章主要介紹了C# WPF 自定義按鈕的方法，幫助大家更好的理解和學(xué)習(xí)使用c#，感興趣的朋友可以了解下

本文介紹WPF一種自定義按鈕的方法。

實(shí)現(xiàn)效果

使用圖片做按鈕背景；
自定義鼠標(biāo)進(jìn)入時(shí)效果；
自定義按壓效果；
自定義禁用效果

實(shí)現(xiàn)效果如下圖所示：

實(shí)現(xiàn)步驟

創(chuàng)建CustomButton.cs，繼承自Button；
創(chuàng)建一個(gè)資源文件ButtonStyles.xaml；
在資源文件中設(shè)計(jì)按鈕的Style；
在CustomButton.cs中添加Style中需要的依賴屬性；
在程序中添加資源并引用（為了方便在不同的程序中引用自定義按鈕，自定義按鈕放在獨(dú)立的類庫(kù)中，應(yīng)用程序中進(jìn)行資源合并即可）。

示例代碼

// ButtonStyles.xaml
<Style x:Key="CustomButton" TargetType="{x:Type local:CustomButton}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:CustomButton}">
        <Grid x:Name="container">
          <Image Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
              Source="{Binding ButtonImage,RelativeSource={RelativeSource Mode=TemplatedParent}}">
            <Image.RenderTransformOrigin>
              <Point X="0.5" Y="0.5"/>
            </Image.RenderTransformOrigin>
            <Image.RenderTransform>
              <ScaleTransform x:Name="scaletrans" ScaleX="1" ScaleY="1"/>
            </Image.RenderTransform>
          </Image>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value="0.5" TargetName="container"/>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#2c000000" TargetName="container"/>
          </Trigger>
          <Trigger Property="IsPressed" Value="True">
            <Trigger.EnterActions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" 
                  To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
                  <DoubleAnimation Storyboard.TargetName="scaletrans" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" 
                  To="0.8" Duration="0:0:0.15" AutoReverse="True"/>
                </Storyboard>
              </BeginStoryboard>
            </Trigger.EnterActions>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

// CustomButton.cs
public class CustomButton : Button
{
  public ImageSource ButtonImage
  {
    get { return (ImageSource)GetValue(ButtonImageProperty); }
    set { SetValue(ButtonImageProperty, value); }
  }

  public static readonly DependencyProperty ButtonImageProperty =
    DependencyProperty.Register("ButtonImage", typeof(ImageSource), typeof(CustomButton),
    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}

// App.xaml 合并資源
<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source=".../ButtonStyles.xaml"/>
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>   
</Application.Resources>

// view.xaml 使用
<Grid>
  <customcontrols:CustomButton Width="48" Height="48" 
    Style="{StaticResource CustomButton}" ButtonImage="/Louzi.Paint;component/Images/Toolbar/write.png"/>
</Grid>

以上就是C# WPF 自定義按鈕的方法的詳細(xì)內(nèi)容，更多關(guān)于C# WPF 自定義按鈕的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: