Windows 8商店应用程序的设置栏中的按钮样式

Question

我正在创建Windows应用商店应用程序。我使用callisto库在设置中创建弹出窗口。我有造型按钮的问题。当我将鼠标放在背景和字体变成白色......

看到的画面（鼠标移动到第二个按钮）：

这是我的XAML文件：

<UserControl 
x:Class="Pomidoro.PomidoroUserControl" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:Pomidoro" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
d:DesignHeight="300" 
d:DesignWidth="400"> 

<Grid> 
    <StackPanel x:Name="FlyoutContent"> 
     <Button 
      Name="ChoosePomidoroButton" 
      Click="ChoosePomidoroButton_Click" 
      Content="Choose pomidoro image..."  
      Background="LightGray" 
      Foreground="Black" 
      BorderBrush="Black"   
      /> 
     <Button 
      Name="DefaultPomidoroButton" 
      Click="DefaultPomidoroButton_Click" 
      Content="Set default pomidoro image" 
      Background="LightGray" 
      Foreground="Black" 
      BorderBrush="Black" 
      /> 
    </StackPanel> 
</Grid> 

这就是我如何在App.xaml.cs中创建弹出窗口：

  // Add an Pomidoro settings 
     var pomidoro = new SettingsCommand("pomidoro", "Pomidoro image", (handler) => 
     { 
      var settings = new SettingsFlyout(); 
      settings.Content = new PomidoroUserControl(); 
      settings.HeaderText = "Pomidoro"; 
      settings.IsOpen = true; 
     }); 

     args.Request.ApplicationCommands.Add(pomidoro); 

当我尝试使用默认样式...

<Button 
      Name="DefaultPomidoroButton" 
      Click="DefaultPomidoroButton_Click" 
      Content="Set default pomidoro image" 
      /> 

...背景，边框和前景是白色的...和用户无法看到任何东西。

我应该如何应用默认样式来使用灰色按钮（因为它在Store中的许多应用程序中）？

Answer 1

问题是，当应用程序使用黑暗主题时，默认按钮样式使用白色前景和边框笔刷，以及透明背景笔刷。在页面上，默认的按钮样式看起来只有精细：

在木卫四SettingsFlyout的内容窗格中，但是，按钮是看不见的，因为它的内容窗格的背景是白色的。您必须注意到这一点，因为您在UserControl中手动设置按钮的前景和背景属性。

解决方案是为SettingsFlyout上的按钮定义一种新样式，使用默认按钮模板进行操作。默认样式都设在这里的64位计算机上：

C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design 

我发现的默认样式此文件夹中的default.xaml Button控件。

首先，我将这个默认样式复制到一个新的资源字典中。我成立了App.xaml中引用这样的新资源字典：

<!-- Add this line to your MergedDictionaries in App.xaml --> 
<ResourceDictionary Source="FlyoutResources.xaml"/> 

有了一些工作，我调整了复制，在默认的按钮样式，并赋予它一个独特的密钥。这里是例子：

<!-- contents of FlyoutResources.xaml --> 
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App1"> 

    <ResourceDictionary.ThemeDictionaries> 
     <ResourceDictionary x:Key="Default"> 
      <SolidColorBrush x:Key="FlyoutButtonForeground">#FF000000</SolidColorBrush> 
      <SolidColorBrush x:Key="FlyoutButtonBackground">#FFD3D3D3</SolidColorBrush> 
      <SolidColorBrush x:Key="FlyoutButtonBorder">#FF000000</SolidColorBrush> 
      <SolidColorBrush x:Key="FlyoutButtonPointerOverBackgroundThemeBrush" Color="#21D3D3D3" /> 
      <SolidColorBrush x:Key="FlyoutButtonPointerOverForegroundThemeBrush" Color="#FF000000" /> 
      <SolidColorBrush x:Key="FlyoutButtonPressedBackgroundThemeBrush" Color="#FFFFFFFF" /> 
      <SolidColorBrush x:Key="FlyoutButtonPressedForegroundThemeBrush" Color="#FF000000" /> 
      <SolidColorBrush x:Key="FlyoutButtonDisabledBackgroundThemeBrush" Color="#FFD3D3D3" /> 
      <SolidColorBrush x:Key="FlyoutButtonDisabledBorderThemeBrush" Color="#66000000" /> 
      <SolidColorBrush x:Key="FlyoutButtonDisabledForegroundThemeBrush" Color="#66000000" /> 
     </ResourceDictionary> 
    </ResourceDictionary.ThemeDictionaries> 

    <Style TargetType="Button" x:Key="flyoutButton"> 
     <Setter Property="Background" Value="{StaticResource FlyoutButtonBackground}" /> 
     <Setter Property="Foreground" Value="{StaticResource FlyoutButtonForeground}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource FlyoutButtonBorder}" /> 
     <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" /> 
     <Setter Property="Padding" Value="12,4,12,4" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontWeight" Value="SemiBold" /> 
     <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                     Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPointerOverBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                     Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPointerOverForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                     Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPressedBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                     Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPressedForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                     Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" 
                     Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
                     Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="FocusStates"> 
           <VisualState x:Name="Focused"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" 
                 Storyboard.TargetProperty="Opacity" 
                 To="1" 
                 Duration="0" /> 
             <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" 
                 Storyboard.TargetProperty="Opacity" 
                 To="1" 
                 Duration="0" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unfocused" /> 
           <VisualState x:Name="PointerFocused" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="Border" 
           Background="{TemplateBinding Background}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}" 
           Margin="3"> 
          <ContentPresenter x:Name="ContentPresenter" 
               Content="{TemplateBinding Content}" 
               ContentTransitions="{TemplateBinding ContentTransitions}" 
               ContentTemplate="{TemplateBinding ContentTemplate}" 
               Margin="{TemplateBinding Padding}" 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
         </Border> 
         <Rectangle x:Name="FocusVisualWhite" 
            IsHitTestVisible="False" 
            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 
            StrokeEndLineCap="Square" 
            StrokeDashArray="1,1" 
            Opacity="0" 
            StrokeDashOffset="1.5" /> 
         <Rectangle x:Name="FocusVisualBlack" 
            IsHitTestVisible="False" 
            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 
            StrokeEndLineCap="Square" 
            StrokeDashArray="1,1" 
            Opacity="0" 
            StrokeDashOffset="0.5" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</ResourceDictionary> 

的最后一步是设置这种风格在你的XAML按钮定义：

<Button 
    Name="ChoosePomidoroButton" 
    Content="Choose pomidoro image..." 
     Style="{StaticResource flyoutButton}" 
    /> 

<!-- etc. --> 

这里是它的外观（中间的按钮处于悬停状态）：