重复使用WFP应用程序中的按钮

时间:2014-02-21 18:08:23

标签: wpf windows-8

我正在开发我的第一个win8应用程序。我需要在几个页面上创建一个注销按钮。 一般来说,这是一个内部带有文字和图像的按钮。

我应该选择什么方法:创建模板,资源或样式?

1 个答案:

答案 0 :(得分:1)

您可以使用style重复使用按钮。该样式应定义其template,并且resource可根据其定义位置提供。

定位使用x:Key定义的按钮的样式示例,以便在其他任何位置重复使用。如果您未指定x:Key并且style中定义了Application Resources,那么它会将样式应用于您的所有按钮。

<Style x:Key="CustomStyleButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border CornerRadius="4" Background="{TemplateBinding Background}">
                <Grid>
                    <Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
                    <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />                                
                </Grid>
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#E59400" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter TargetName="PathIcon" Property="Fill" Value="Black" />
                </Trigger>

                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="OrangeRed" />
                    <Setter Property="Foreground" Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

样本用法

<Button Width="200" Height="50" Style="{StaticResource CustomStyleButton}" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button.Content>
    <StackPanel>
        <TextBlock Text="Watch Now" FontSize="20" />
        <TextBlock Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
    </StackPanel>
</Button.Content>