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>