Windows Phone - 按下按钮时更改内容前景色

时间:2014-01-11 09:17:09

标签: xaml windows-phone

按下以下按钮时,TextBlock的前景色会更改为白色(基于Windows手机按钮的默认样式)。我希望路径的颜色也变为白色。 这可能与XAML标记有关吗?

<Button 
    x:Name="MyButton" 
    Foreground="Red" 
    HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid Width="175" Height="175">
        <TextBlock 
            x:Name="MyText"
            Text="ABC" 
            HorizontalAlignment="Center" VerticalAlignment="Center" />

        <Path
            Fill="MidnightBlue"
            Stretch="Uniform"
            Data="M95.784 59.057c1.867 0 3.604-1.514 3.858-3.364c0 0 0.357-2.6 0.357-5.692c0-3.092-0.357-5.692-0.357-5.692  c-0.255-1.851-1.991-3.364-3.858-3.364h-9.648c-1.868 0-3.808-1.191-4.31-2.646s-1.193-6.123 0.128-7.443l6.82-6.82  c1.32-1.321 1.422-3.575 0.226-5.01L80.976 11c-1.435-1.197-3.688-1.095-5.01 0.226l-6.82 6.82c-1.32 1.321-3.521 1.853-4.888 1.183  c-1.368-0.67-5.201-3.496-5.201-5.364V4.217c0-1.868-1.514-3.604-3.364-3.859c0 0-2.6-0.358-5.692-0.358s-5.692 0.358-5.692 0.358  c-1.851 0.254-3.365 1.991-3.365 3.859v9.648c0 1.868-1.19 3.807-2.646 4.31c-1.456 0.502-6.123 1.193-7.444-0.128l-6.82-6.82  C22.713 9.906 20.459 9.804 19.025 11L11 19.025c-1.197 1.435-1.095 3.689 0.226 5.01l6.819 6.82  c1.321 1.321 1.854 3.521 1.183 4.888s-3.496 5.201-5.364 5.201H4.217c-1.868 0-3.604 1.514-3.859 3.364c0 0-0.358 2.6-0.358 5.692  c0 3.093 0.358 5.692 0.358 5.692c0.254 1.851 1.991 3.364 3.859 3.364h9.648c1.868 0 3.807 1.19 4.309 2.646  c0.502 1.455 1.193 6.122-0.128 7.443l-6.819 6.819c-1.321 1.321-1.423 3.575-0.226 5.01L19.025 89  c1.435 1.196 3.688 1.095 5.009-0.226l6.82-6.82c1.321-1.32 3.521-1.853 4.889-1.183c1.368 0.67 5.201 3.496 5.201 5.364v9.648  c0 1.867 1.514 3.604 3.365 3.858c0 0 2.599 0.357 5.692 0.357s5.692-0.357 5.692-0.357c1.851-0.255 3.364-1.991 3.364-3.858v-9.648  c0-1.868 1.19-3.808 2.646-4.31s6.123-1.192 7.444 0.128l6.819 6.82c1.321 1.32 3.575 1.422 5.01 0.226L89 80.976  c1.196-1.435 1.095-3.688-0.227-5.01l-6.819-6.819c-1.321-1.321-1.854-3.521-1.183-4.889c0.67-1.368 3.496-5.201 5.364-5.201H95.784  z M50 68.302c-10.108 0-18.302-8.193-18.302-18.302c0-10.107 8.194-18.302 18.302-18.302c10.108 0 18.302 8.194 18.302 18.302  C68.302 60.108 60.108 68.302 50 68.302z"
            />
    </Grid>
</Button>

1 个答案:

答案 0 :(得分:0)

是的,您可以创建如下自定义按钮样式:

   <Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="MyPath">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="MidnightBlue"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="MyPath">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#ffffff"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid Width="175" Height="175" Margin="{TemplateBinding Padding}">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" 
                                        Content="{TemplateBinding Tag}" Foreground="{TemplateBinding Foreground}" 
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                                <Path x:Name="MyPath"
                                Fill="{TemplateBinding Background}"
                                Stretch="Uniform"
                                Data="{TemplateBinding Content}"
                            />
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后使用它:

<Button Tag="ABC" Content="M95.784 59.057c1.867 0 3.604-1.514 3.858-3.364c0 0 0.357-2.6 0.357-5.692c0-3.092-0.357-5.692-0.357-5.692  c-0.255-1.851-1.991-3.364-3.858-3.364h-9.648c-1.868 0-3.808-1.191-4.31-2.646s-1.193-6.123 0.128-7.443l6.82-6.82  c1.32-1.321 1.422-3.575 0.226-5.01L80.976 11c-1.435-1.197-3.688-1.095-5.01 0.226l-6.82 6.82c-1.32 1.321-3.521 1.853-4.888 1.183  c-1.368-0.67-5.201-3.496-5.201-5.364V4.217c0-1.868-1.514-3.604-3.364-3.859c0 0-2.6-0.358-5.692-0.358s-5.692 0.358-5.692 0.358  c-1.851 0.254-3.365 1.991-3.365 3.859v9.648c0 1.868-1.19 3.807-2.646 4.31c-1.456 0.502-6.123 1.193-7.444-0.128l-6.82-6.82  C22.713 9.906 20.459 9.804 19.025 11L11 19.025c-1.197 1.435-1.095 3.689 0.226 5.01l6.819 6.82  c1.321 1.321 1.854 3.521 1.183 4.888s-3.496 5.201-5.364 5.201H4.217c-1.868 0-3.604 1.514-3.859 3.364c0 0-0.358 2.6-0.358 5.692  c0 3.093 0.358 5.692 0.358 5.692c0.254 1.851 1.991 3.364 3.859 3.364h9.648c1.868 0 3.807 1.19 4.309 2.646  c0.502 1.455 1.193 6.122-0.128 7.443l-6.819 6.819c-1.321 1.321-1.423 3.575-0.226 5.01L19.025 89  c1.435 1.196 3.688 1.095 5.009-0.226l6.82-6.82c1.321-1.32 3.521-1.853 4.889-1.183c1.368 0.67 5.201 3.496 5.201 5.364v9.648  c0 1.867 1.514 3.604 3.365 3.858c0 0 2.599 0.357 5.692 0.357s5.692-0.357 5.692-0.357c1.851-0.255 3.364-1.991 3.364-3.858v-9.648  c0-1.868 1.19-3.808 2.646-4.31s6.123-1.192 7.444 0.128l6.819 6.82c1.321 1.32 3.575 1.422 5.01 0.226L89 80.976  c1.196-1.435 1.095-3.688-0.227-5.01l-6.819-6.819c-1.321-1.321-1.854-3.521-1.183-4.889c0.67-1.368 3.496-5.201 5.364-5.201H95.784  z M50 68.302c-10.108 0-18.302-8.193-18.302-18.302c0-10.107 8.194-18.302 18.302-18.302c10.108 0 18.302 8.194 18.302 18.302  C68.302 60.108 60.108 68.302 50 68.302z" Style="{StaticResource CustomButtonStyle}" Background="MidnightBlue" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center">

更新:做一些技巧,以便按钮可以使用自定义路径。当然,它也不是通用解决方案(必须创建自定义控件)。