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中的许多应用程序一样)? 解决方法
问题是默认按钮样式使用白色前景和边框画笔,并在应用程序使用暗主题时使用透明背景画笔.在页面上,默认按钮样式看起来很好:
但是,在Callisto SettingsFlyout的内容窗格中,该按钮是不可见的,因为内容窗格的背景为白色.您必须注意到这一点,因为您在UserControl中手动设置了按钮的前景和背景属性. 解决方案是在SettingsFlyout上为按钮定义一种新样式,使用默认按钮模板进行操作.默认样式位于64位计算机上: C:Program Files (x86)Windows Kits8.0IncludeWinRTXamlDesign 我在此文件夹中的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定义上设置该样式: <Button Name="ChoosePomidoroButton" Content="Choose pomidoro image..." Style="{StaticResource flyoutButton}" /> <!-- etc. --> 以下是它的外观(中间按钮处于悬停状态): (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Windows Azure无法在本地启动
- windows-server-2008 – Powershell 2.0 Windows Server 20
- windows-server-2008 – Windows Server 2008 R2中的事件SR
- windows – 如何在Visual Studio安装项目中运行外部安装程序
- xkill等效于Windows [已关闭]
- windows route
- 最新的WIN10多用户远程方法--RDPWARP软件
- 如何在Windows上获取多个文件的所有权?
- windows-phone-7 – IsolatedStorageSettings.ApplicationS
- wix – 应用程序大小在修复时增加一倍