Windows 8商店应用的设置栏中的按钮样式
我正在创建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中创建flyout的方法：
// 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中的许多应用程序一样）？
1 个答案:
答案 0 :(得分：2)
问题是当您的应用程序使用黑暗主题时，默认按钮样式使用白色前景和边框画笔以及透明背景画笔。在页面上，默认按钮样式看起来很好：
但是，在Callisto 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. -->
以下是它的外观（中间按钮处于悬停状态）：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？