XAML中的图像按钮样式问题

Question

我有一个XAML代码如下：

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

将stop.png作为following image

在应用程序中的事件期间启用该按钮，并按下该按钮以停止媒体播放。按下按钮时，它会变为白色，如下图所示：

我理解这是由于一些按钮样式问题，并且想知道如何让这个作为一个按钮更好地为我工作。

Answer 1

如果此按钮位于AppBar中使用预定义的停止按钮样式：

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

您只需在Common / StandardStyles.xaml中取消注释（该文件包含在项目中）

如果按钮不在AppBar中，您可以设置Segoe UI Symbol字体和停止字符代码：

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

你可以在这里看到符号：

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

Answer 2

您必须为按钮创建自定义样式。根据需要设置所有视觉状态。

Button styles and templates

Answer 3

使用视觉状态更改按钮样式

                                                                                                                                                                                                                                                                                      

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