XAML创建按钮模板

时间:2017-10-25 08:12:56

标签: wpf xaml templates

我在XAML中创建了一个自定义按钮,其定义如下:

AcrylicBrush

我希望如何使用名称保存此模板,每次我需要这样的按钮时,只需使用<Button Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}"> <Button.Template> <ControlTemplate> <Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD"> <TextBlock Foreground="Black" Text="Help" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/> <Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/> <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/> </Trigger> <Trigger Property="IsEnabled" Value="true"> <Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/> <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/> </Trigger> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="Overlay" Property="BorderThickness" Value="3"/> <Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 属性,如下所示:

Style

我该怎么做?

3 个答案:

答案 0 :(得分:1)

首先,你必须在字典文件中声明你的风格

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="CompIconButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                <!--Anything-->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

然后你需要在应用程序的资源中声明这个字典

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Generic_UI/Buttons_Resources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

您最终可以按预期使用按钮样式

<Button Click="Button_Click" Style="{StaticResource CompIconButton}"/>

答案 1 :(得分:0)

您必须对其进行样式设置并将其保存在单独的.xaml文件中,然后将其加载到完整的应用程序或每个想要使用它的控件/窗口。

这是我做的一个例子,你可以改变它并使用它。

<Style x:Key="DefBtn" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#EBEBEB"/>
    <Setter Property="BorderBrush" Value="#8C8C8C"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontFamily" Value="Segoe UI regular"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="3,2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    CornerRadius="1" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在您可以更改名称并将其作为资源字典添加到项目中。 当你想加载它时,你可以这样做。

<Window.Resources>
        <ResourceDictionary Source="pack://application:,,,/SomeName;component/NameOfYourXamlFile.xaml"/>
 </Window.Resources>

答案 2 :(得分:0)

确认ControlTemplate x:Key并将其移至您的App.xaml文件:

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="MyButtonTemplate">
                <Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD">
                    <TextBlock Foreground="Black" 
                                       Text="Help"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       FontSize="26"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/>
                        <Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/>
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="true">
                        <Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/>
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="3"/>
                        <Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

        </ResourceDictionary>
    </Application.Resources>
</Application>

然后,您可以使用x:Key

在整个应用程序中引用它
<Button Template="{StaticResource MyButtonTemplate}" Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}">

您可以对Style(而不是ControlTemplate)执行相同的操作。