c# - 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 是以下图像

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

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

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

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

按钮样式和模板

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>