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

這裏是它的外觀（中間的按鈕處於懸停狀態）：