विंडोज 8 स्टोर ऐप की सेटिंग बार में बटन शैली

Question

मैं विंडोज स्टोर ऐप बना रहा हूं। मैं सेटिंग्स में फ्लाईआउट बनाने के लिए कॉलिस्टो लाइब्रेरी का उपयोग करता हूं। मुझे स्टाइल बटन के साथ समस्या है। पृष्ठभूमि के ऊपर मैं माउस और फ़ॉन्ट सफेद हो जाता है ...

तस्वीर देखें (माउस दूसरा बटन खत्म हो गया है):

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

:

यह मेरी XAML फाइल है और इस तरह मैं 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" 
      /> 

... पृष्ठभूमि, सीमा और अग्रभूमि सफेद था ... और उपयोगकर्ता कुछ भी देखने में असमर्थ था।

ग्रे बटन के लिए डिफ़ॉल्ट शैली को लागू करने के लिए मुझे क्या करना चाहिए (क्योंकि यह स्टोर में कई ऐप्स में है)?

Answer 1

समस्या यह है कि डिफ़ॉल्ट बटन शैली एक सफेद अग्रभूमि और सीमा ब्रश का उपयोग करती है, और जब आपका एप्लिकेशन अंधेरे विषय का उपयोग कर रहा है तो एक पारदर्शी पृष्ठभूमि ब्रश का उपयोग करता है। एक पृष्ठ पर, डिफ़ॉल्ट बटन शैली बस ठीक लग रहा है:

कैलिस्टो SettingsFlyout की सामग्री के फलक पर, तथापि, बटन अदृश्य है, क्योंकि सामग्री फलक की पृष्ठभूमि सफेद है। आपने यह देखा होगा क्योंकि आप अपने UserControl में मैन्युअल रूप से बटन के अग्रभूमि और पृष्ठभूमि गुण सेट कर रहे हैं।

एक समाधान सेटिंगफ्लॉउट पर बटन के लिए एक नई शैली को परिभाषित करना है, ऐसा करने के लिए डिफ़ॉल्ट बटन टेम्पलेट से काम करना। डिफ़ॉल्ट शैलियों एक 64-बिट मशीन पर यहाँ स्थित हैं:

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

मैं इस फोल्डर में default.xaml में बटन नियंत्रण के लिए डिफ़ॉल्ट शैली मिल गया।

सबसे पहले, मैंने इस डिफ़ॉल्ट शैली को एक नए संसाधन शब्दकोश में कॉपी किया। मैं इस तरह इस नए संसाधन शब्दकोश संदर्भ के लिए 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. --> 

और यह कैसे दिखता है (मध्य बटन मंडराना राज्य में है):