none
给Button控件添加背景 RRS feed

答案

  • 你好,

    回答这个问题,要先学习一些控件的样式模板的概念以及VisualState的概念,类似的概念,你可以参考Silverlight相关的主题。 这里我提供Metro中关于这些概念的一个说明:http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465374.aspx

    然后,有了这些基础,看懂下面的代码不难,而且以后也会自己去修改其他的控件添加一些功能。下面的代码是Button的默认的样式模板(从Blend导出,具体操作,参考帖子:http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/56f345e9-e8b1-4013-a60e-671aee90e4b0):

    		<Style TargetType="Button">
    			<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
    			<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
    			<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.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    							<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    然后,你可以先指定按钮的一个图片背景:

            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>

    修改按钮模板,修改其Pressed的VisualState, 修改Background的那个动画:

      <VisualState x:Name="Pressed">
          <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                  <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                          <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                      </DiscreteObjectKeyFrame.Value>
                  </DiscreteObjectKeyFrame>
              </ObjectAnimationUsingKeyFrames>

    ---------------

    完整的代码:

    <Page
        x:Class="App11.MainPage"
        IsTabStop="false"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App11"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style TargetType="Button">
                <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                <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.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>
        </Grid>
    </Page>

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月25日 3:36
    版主
  • 自己继承Button自定义一个Custom Control, 添加一个 Brush 的 Dependency Property , 然后在这个类型的模板中TemplateBinding 到你的Brush到点击状态。

    最后用你的按钮,并且可以设置背景以及你的新添加的依赖属性


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 Clorance 2012年6月26日 1:19
    2012年6月25日 10:10
    版主

全部回复

  • 你好,

    回答这个问题,要先学习一些控件的样式模板的概念以及VisualState的概念,类似的概念,你可以参考Silverlight相关的主题。 这里我提供Metro中关于这些概念的一个说明:http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465374.aspx

    然后,有了这些基础,看懂下面的代码不难,而且以后也会自己去修改其他的控件添加一些功能。下面的代码是Button的默认的样式模板(从Blend导出,具体操作,参考帖子:http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/56f345e9-e8b1-4013-a60e-671aee90e4b0):

    		<Style TargetType="Button">
    			<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
    			<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
    			<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.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    							<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    然后,你可以先指定按钮的一个图片背景:

            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>

    修改按钮模板,修改其Pressed的VisualState, 修改Background的那个动画:

      <VisualState x:Name="Pressed">
          <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                  <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                          <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                      </DiscreteObjectKeyFrame.Value>
                  </DiscreteObjectKeyFrame>
              </ObjectAnimationUsingKeyFrames>

    ---------------

    完整的代码:

    <Page
        x:Class="App11.MainPage"
        IsTabStop="false"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App11"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style TargetType="Button">
                <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                <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.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>
        </Grid>
    </Page>

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月25日 3:36
    版主
  • 你好,

    回答这个问题,要先学习一些控件的样式模板的概念以及VisualState的概念,类似的概念,你可以参考Silverlight相关的主题。 这里我提供Metro中关于这些概念的一个说明:http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh465374.aspx

    然后,有了这些基础,看懂下面的代码不难,而且以后也会自己去修改其他的控件添加一些功能。下面的代码是Button的默认的样式模板(从Blend导出,具体操作,参考帖子:http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/56f345e9-e8b1-4013-a60e-671aee90e4b0):

    		<Style TargetType="Button">
    			<Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
    			<Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
    			<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.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Pressed">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
    							<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>

    然后,你可以先指定按钮的一个图片背景:

            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>

    修改按钮模板,修改其Pressed的VisualState, 修改Background的那个动画:

      <VisualState x:Name="Pressed">
          <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                  <DiscreteObjectKeyFrame KeyTime="0">
                      <DiscreteObjectKeyFrame.Value>
                          <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                      </DiscreteObjectKeyFrame.Value>
                  </DiscreteObjectKeyFrame>
              </ObjectAnimationUsingKeyFrames>

    ---------------

    完整的代码:

    <Page
        x:Class="App11.MainPage"
        IsTabStop="false"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App11"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <Style TargetType="Button">
                <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>
                <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.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <ImageBrush ImageSource="yyy.png" Stretch="UniformToFill"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource 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" 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="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
                                <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button">
                <Button.Background>
                    <ImageBrush ImageSource="xxx.png" Stretch="UniformToFill"/>
                </Button.Background>
            </Button>
        </Grid>
    </Page>

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    您好Bob Bao 谢谢您的耐心指导,上述的方法是作为一种Style使用,如果我想把它做成一个Template,需要做些什么改动呢?


    2012年6月25日 9:33
  • 只保留中间 ControlTemplate 部分,然后给个x:Key,比如 <ControlTemplate x:Key="buttonTemplate" TargetType="Button"> ... </ControlTemplate>

    在你要的Button上引用  <Button Template="{StaticReference buttonTemplate}" .../>


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月25日 9:40
    版主
  • 只保留中间 ControlTemplate 部分,然后给个x:Key,比如 <ControlTemplate x:Key="buttonTemplate" TargetType="Button"> ... </ControlTemplate>

    在你要的Button上引用  <Button Template="{StaticReference buttonTemplate}" .../>


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    谢谢您的回答。

      但我想要的效果是这样的,就是每次引用这个模版的时候,图片都是可以自己定义的,而不是全部Button使用一个样式。以前我在WP7上用过绑定来实现,但在win8上同样的方法就行不通,如果要用到绑定,那改如何实现呢?


    2012年6月25日 9:45
  • 自己继承Button自定义一个Custom Control, 添加一个 Brush 的 Dependency Property , 然后在这个类型的模板中TemplateBinding 到你的Brush到点击状态。

    最后用你的按钮,并且可以设置背景以及你的新添加的依赖属性


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 Clorance 2012年6月26日 1:19
    2012年6月25日 10:10
    版主
  • hi,baobao

        最后一步能否帮忙再详细说一说,即自己定义一个buttom控件,按下和弹起显示的不一样的图片背景。使用下面的这种需求可能很多人都有,尤其是触屏版的button,默认的效果实在是太差了,模版的方式不行,一步满足要求,二太麻烦了。

    如何给Button添加背景图片,按下和弹起显示的不一样的图片背景

    2012年6月28日 10:47