2021-05-12 14:32:11
C# WPF 自定義按鈕的方法
2021-03-03 13:00:14
本文介紹WPF一種自定義按鈕的方法。
實現效果
- 使用圖片做按鈕背景;
- 自定義滑鼠進入時效果;
- 自定義按壓效果;
- 自定義禁用效果
實現效果如下圖所示:
實現步驟
- 建立CustomButton.cs,繼承自Button;
- 建立一個資原始檔ButtonStyles.xaml;
- 在資原始檔中設計按鈕的Style;
- 在CustomButton.cs中新增Style中需要的依賴屬性;
- 在程式中新增資源並參照(為了方便在不同的程式中參照自定義按鈕,自定義按鈕放在獨立的類庫中,應用程式中進行資源合併即可)。
範例程式碼
// 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 自定義按鈕的方法的詳細內容,更多關於C# WPF 自定義按鈕的資料請關注it145.com其它相關文章!
相關文章