Как разместить изображение внутри стилизованной кнопки

Question

Я хотел поэкспериментировать с загрузкой, которую я нашел на сайте create.msdn.com, которая является стильным стилем для обычных кнопок. Мне нравится эффект, который он дает, когда пользователь нажимает на него, но также я думаю, что было бы хорошей возможностью, чтобы добавить изображение вместо текста в качестве содержимого кнопки. Для изображения я планировал использовать значок Windows Phone по умолчанию из набора значков, доступного в SDK. Как я могу это сделать, чтобы эффекты оставались в такте, а контент может быть иконой?

стиль выглядит следующим образом

<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 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>