OnFocus更改按钮内容的前景颜色

时间:2016-01-17 17:07:46

标签: wpf xaml onfocus coloranimation

我有按钮:

<Button Grid.Column="0" Style="{StaticResource BodyPartLable}" Margin="0, 5, 0, 0" PreviewMouseLeftButtonDown="ButtonNeck_OnPreviewMouseDown" PreviewMouseLeftButtonUp="ButtonNeck_OnPreviewMouseUp">
        <Grid Width="200" Height="100">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" TextAlignment="Right" Text="+1" Margin="0,3,5,0" Foreground="White" />
            <TextBlock Grid.Row="1" Foreground="#c0b6d1" FontFamily="Segoe UI Semibold" MouseRightButtonDown="Neck_EditStarted" FontSize="18" Margin="13,-28,0,0">
                            <TextBox Margin="-5,0,0,0" Name="sizeNeck"  Background="#FF61596F" Foreground="Tomato" Height="60" IsEnabled="False" BorderBrush="Transparent" FontSize="40"
                                                             ContextMenu="{x:Null}" ContextMenuService.IsEnabled="false"  MaxLength="6" 
                                                             LostFocus="TextBox_LostFocus" Tag="BackCollarHeightUI" Text="55"></TextBox>
                                <LineBreak/>
                                <TextBlock Name="NecktLb" Text="Neck"/><Span>&#160;(</Span><Span><TextBlock Text="inch"/></Span><Span>)</Span>
                            </TextBlock>
        </Grid>
    </Button>

风格:

<Style x:Key="BodyPartLable" TargetType="Button">
        <Setter Property="BorderBrush" Value="#FFFFFFFF"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="12,0,0,0"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                </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"/>-->
                                        <ColorAnimation Duration="0" To="#FF826C83" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border"/>
                                        <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border" CornerRadius="3" Padding="0" Background="#FF61596F" Height="120" Width="220">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="Black" Offset="0"/>
                                    <GradientStop Color="White" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" UseLayoutRounding="True" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="0"/>
                        </Border>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="White" StrokeDashArray="1,1"/>
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="Black" StrokeDashArray="1,1"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

对于VisualState聚焦我应该将按钮内容的文本颜色更改为White。 &#39;&#39;这段代码在我的案例中并不起作用,但它是我在StackOverflow上找到的唯一解决方案。

Upd:On按钮单击我将此按钮设置为代码隐藏

1 个答案:

答案 0 :(得分:2)

定义文本块的样式使用DataTriggers并将您的属性绑定到Button触发器并将此应用到此content中的所有按钮TextBlock,代码如下...... < / p>

<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="White"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Button,AncestorLevel=1}, Path=IsFocused}" Value="True">
            <Setter Property="Foreground" Value="Red"/>
        </DataTrigger>
    </Style.Triggers>
</Style>