Simple WPF: WPF 自定義按鈕外形

mrchip發表於2024-07-07

最新內容優先釋出於個人部落格：小虎技術分享站，隨後逐步搬運到部落格園。

WPF的按鈕提供了Template模板，可以透過修改Template模板中的內容對按鈕的樣式進行自定義，完整程式碼Github自取。

使用Style定義扁平化的按鈕樣式

定義一個ButtonStyleDictonary.xaml資源字典檔案，在Control Template中定義一個帶Border的按鈕，然後定義Trigger作為改變樣式的觸發器

<Style x:Key="FlatButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="True">
                    <TextBlock Text="{TemplateBinding Content}"
                                Foreground="{TemplateBinding Foreground}"
                                VerticalAlignment="Center" 
                                HorizontalAlignment="Center"/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Background" Value="#2f96b4"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Background" Value="red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

WPF中使用ResourceDictonary 資源字典

引入在資源字典檔案中定義公共的Template，然後在xaml視窗、自定義控制元件或者整個App當中呼叫

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ButtonStyleDictonary.xaml"></ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

然後就可以在窗體的xaml中應用剛才定義的屬性了

<Button Style="{StaticResource FlatButtonStyle}" Width="64" Height="28">
     Hello
</Button>

使用Style和Polygon自定義Button的外形

<Style x:Key="ArrowButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Polygon x:Name="border" Fill="{TemplateBinding Background}"
                            Points="0,0 2,0 1,1" Stroke="Black" StrokeThickness="2"
                            SnapsToDevicePixels="True"
                            Stretch="Uniform"/>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="Fill" Value="gray"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="border" Property="Fill" Value="red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

效果如下

image

參考資料

WPF自定義控制元件與樣式-自定義按鈕（Button）
如何：使用應用程式範圍的資源字典

相關文章