OnFocus change Foreground color of Button Content

910 Views Asked by At

I have Button :

<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>

And Style :

<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>

For VisualState Focused I should change Text Color of Button content to White. '' this code doesn't work in my case, but It's only solutions that I can find on StackOverflow.


Upd : On Button Click I set this button focused from code-behind

1

There are 1 best solutions below

3
Javad Ebrahimi On

Define styles for text blocks By using a DataTriggers and Binding Your Property to the Button triggers and Applye this to all your Button content in this TextBlock, code Below ...

<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>