我想试用我在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>
我在最近的附带项目中做到了这一点：
<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>
在样式按钮内显示图像而不是文本。这项工作对我来说，希望对你也一样。
没问题，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>
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>