如何在样式按钮内放置图像

Question

我想试验一下我在 create.msdn.com 上找到的下载，它是用于常规按钮的玻璃按钮样式。我喜欢它在用户按下它时产生的效果，但我认为能够添加图像而不是文本作为按钮的内容将是一个很好的功能。对于图像，我计划使用 SDK 提供的图标集中的默认 Windows Phone 图标。不过，我该怎么做才能使效果保持不变，并且内容可以是图标？

样式如下

<Style x:Key="GlassButton" TargetType="Button">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Normal"/>

                                <vsm:VisualState x:Name="MouseOver">
                                </vsm:VisualState>

                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                                       Storyboard.TargetName="glow" 
                                                                       Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" 
                                                                  Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>

                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                            <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualState x:Name="Focused">
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Unfocused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>

                        <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                            <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.507*"/>
                                        <RowDefinition Height="0.493*"/>
                                    </Grid.RowDefinitions>
                                    <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                                        <Border.Background>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                                                        <SkewTransform AngleX="0" AngleY="0"/>
                                                        <RotateTransform Angle="0"/>
                                                        <TranslateTransform X="-0.368" Y="-0.152"/>
                                                    </TransformGroup>
                                                </RadialGradientBrush.RelativeTransform>
                                                <GradientStop Color="#B28DBDFF" Offset="0"/>
                                                <GradientStop Color="#008DBDFF" Offset="1"/>
                                            </RadialGradientBrush>
                                        </Border.Background>
                                    </Border>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                                    <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
                                                <GradientStop Color="#99FFFFFF" Offset="0"/>
                                                <GradientStop Color="#33FFFFFF" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

这是我的按钮

<Button Grid.Row="1" Grid.Column="0" Content="test" Foreground="#FFFFFFFF" 
                    Style="{StaticResource GlassButton}">                
        </Button>

Answer 1

没问题，Button 是一个内容控件。换句话说，你可以这样做：

<Button Grid.Row="1" Grid.Column="0" Foreground="#FFFFFFFF" 
                Style="{StaticResource GlassButton}" Height="60" Width="200">
    <Button.Content>
        <Image Source="/Images/someImage.png" />
    </Button.Content>
</Button>

Answer 2

我在最近的业余项目中这样做了：

<Button Click="OpenFolder" VerticalAlignment="Top" 
        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        ToolTip="Open Folder (CTRL+O)">
    <Image Width="25" Height="20" Stretch="UniformToFill">
        <Image.Source>
            <BitmapImage UriSource="Resources/Images/appbar.folder.ellipsis.png" />
        </Image.Source>
    </Image>
</Button>

在样式按钮内显示图像而不是文本。这对我有用，希望对你也有用。

Answer 3

You can set image as background in button using following style
<Style x:Key="BtnStyle" TargetType="Button">
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="110"/>

        <!--FontFamily="Cambria" FontSize="28" FontWeight="Bold"-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualState x:Name="Pressed">
                                    <Storyboard>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background"  BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" >
                            <Border.Background>
                                <ImageBrush ImageSource="/Images/barCode.png"/>
                            </Border.Background>
                        </Border>
                        <ContentPresenter
                              x:Name="contentPresenter"                               
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                               
                              Margin="-10 0 0 0"/>
                        <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="Transparent"  Opacity="0" IsHitTestVisible="false" />
                        <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


////This is the code in above BtnStyle where you can change ImageSource of your button's background image
<Border.Background>
  <ImageBrush ImageSource="/Images/barCode.png"/>
 </Border.Background> 


<Button Grid.Row="1" Grid.Column="0" Content="test" Foreground="#FFFFFFFF" 
Style="{StaticResource BtnStyle}">                
</Button>