XAML中的图像按钮样式问题

Question

I have a XAML code as follows:

<Button 
    x:Name="stopButton" 
    Click="Stop_Click" 
    IsEnabled="False" 
    HorizontalAlignment="Right" 
    Height="75" 
    Width="75" 
    Grid.Column="1" 
    Margin="0,15,60,0" 
    BorderBrush="{x:Null}" 
    Visibility="Collapsed" >
    <Button.Background>
        <ImageBrush ImageSource="Images/stop.png"/>
    </Button.Background>
</Button>

With stop.png being the following image

The button is enabled during an event in the app, and is pressed to stop media playback. When the button is pressed, it turns white as shown in the following image:

I understand this is due to some Button Style issue, and was wondering how I would go about making this work better for me as a button.

Answer 1

if this button is in AppBar Use predefined style for Stop button :

<Button Style="{StaticResource StopAppBarButtonStyle}" />

You just have to uncomment it in Common/StandardStyles.xaml (that file is included in project)

If button is not in AppBar you can set Segoe UI Symbol font and code for stop character :

<Button FontFamily="Segoe UI Symbol" Content="&#xE1B5;"/>

You can see symbols here :

http://blogs.msdn.com/b/mohamedg/archive/2012/10/12/useful-segoe-ui-symbols.aspx

Answer 2

You have to create custom style for your button. Set all the visual states as you want.

Button styles and templates

Answer 3

use visual states to change button style

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                 <Storyboard>

                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="BackgroundGlyph">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE19A;" />
                    </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">

              </VisualState>
            </VisualStateGroup>

          </VisualStateManager.VisualStateGroups>


          <StackPanel Name="btnEffect" Opacity="1"  Width="100" Height="100" Background="Gray" Canvas.ZIndex="100" >
              <TextBlock x:Name="BackgroundGlyph" Text="&#xE0A8;" 
                         FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0" 
                         Foreground="White"
                         Canvas.ZIndex="150"
            />

          </StackPanel>

        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>