button样式

Question

系统自带的按钮，按下去是淡绿色，我希望能按下去的时候是蓝色，当放开按钮的时候变回原来的样子

Answer 1

你好，請參考以下連結

http://msdn.microsoft.com/EN-US/library/windows/apps/windows.ui.xaml.controls.primitives.buttonbase.clickmode.aspx

---

大家一齊探討、學習和研究，謝謝！
MCSD, MCAD, MCSE+I, MCDBA, MCDST, MCSA, MCTS, MCITP, MCPD,
MCT, Microsoft Community Star(TW & HK),
Microsoft MVP for VB.NET since 2003
My MSMVP Blog

Answer 2

拆解Button 的 Style

<Page.Resources>
		<Style x:Key="ButtonStyle1" TargetType="Button">
			<Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}"/>
			<Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
			<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}"/>
			<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
			<Setter Property="Padding" Value="12,4,12,4"/>
			<Setter Property="HorizontalAlignment" Value="Left"/>
			<Setter Property="VerticalAlignment" Value="Center"/>
			<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
			<Setter Property="FontWeight" Value="SemiBold"/>
			<Setter Property="FontSize" Value="{ThemeResource 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.TargetProperty="Background" Storyboard.TargetName="Border">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused"/>
									<VisualState x:Name="PointerFocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
								<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
							<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
							<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Style="{StaticResource ButtonStyle1}" Content="Click">
            
        </Button>
    </Grid>

在 ContentTemplate 中有個 VisualState x:Name="Pressed", 即是代表當 Button 被按下時的視覺狀態, 只要改變此視覺狀態storyboard Target是 Backgound , Foreground 者就會改變在按下去時的背景與前景
         
           

---

在現實生活中，你和誰在一起的確很重要，甚至能改變你的成長軌跡，決定你的人生成敗。 和什麼樣的人在一起，就會有什麼樣的人生。 和勤奮的人在一起，你不會懶惰； 和積極的人在一起，你不會消沈； 與智者同行，你會不同凡響； 與高人為伍，你能登上巔峰。