更改边框内文本块的颜色-WPF



资源:

<Window.Resources>
    <Style x:Key="blue">
        <Style.Triggers>
            <EventTrigger RoutedEvent="Border.MouseEnter">
                <BeginStoryboard>
                    <Storyboard TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                        <ColorAnimation To="#ffffff" Duration="0:0:.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="Border.MouseLeave">
                <BeginStoryboard>
                    <Storyboard TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                        <ColorAnimation To="#FF0080FF" Duration="0:0:.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

查看:

<Border Style="{StaticResource blue}" Cursor="Hand"  BorderBrush="#FF0080FF" BorderThickness="1" HorizontalAlignment="Left" Height="43" Margin="85,266,0,0" VerticalAlignment="Top" Width="157" CornerRadius="30" Panel.ZIndex="10" Background="#FF0080FF">
        <TextBlock x:Name="textBlock" TextWrapping="Wrap" TextAlignment="Center" FontSize="28" Foreground="White" Margin="0,5,0,4"><Run FlowDirection="RightToLeft" Text="hello"/></TextBlock>
    </Border>

当鼠标悬停Border时,Border.Background会更改为白色,但TextBlock.Foreground颜色也为白色。

我如何同时更改它们?

如注释中所述,BorderTextBlock将用作按钮。

为此,而不是为Border创建2个相似的Styles,并且TextBlock最好使用Button控件并修改其StyleTemplate属性,以根据需要更改边框和文本。

资源:

        <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" Cursor="Hand" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="#FF0080FF" BorderThickness="1" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="30" Panel.ZIndex="10" Background="#FF0080FF">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>

                        <EventTrigger SourceName="border" RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard TargetName="border" TargetProperty="(Background).(SolidColorBrush.Color)">
                                    <ColorAnimation To="#ffffff" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard  TargetProperty="Foreground.(SolidColorBrush.Color)">
                                    <ColorAnimation To="#FF0080FF" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger SourceName="border" RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard TargetName="border" TargetProperty="(Background).(SolidColorBrush.Color)">
                                    <ColorAnimation To="#FF0080FF" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                            <BeginStoryboard>
                                <Storyboard  TargetProperty="Foreground.(SolidColorBrush.Color)">
                                    <ColorAnimation To="#ffffff" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

按钮:

        <Button Foreground="White" FontSize="28" Width="157" Height="43" Content="hello" Style="{DynamicResource ButtonStyle1}"></Button>

样式只能设置应用程序所应用的元素的属性,这意味着边框样式无法设置文本块的前景属性。

您可以为文本块定义另一种样式:

<Border x:Name="border" Style="{StaticResource blue}" Cursor="Hand"  BorderBrush="#FF0080FF" BorderThickness="1" HorizontalAlignment="Left" Height="43" Margin="85,266,0,0" VerticalAlignment="Top" Width="157" CornerRadius="30" Panel.ZIndex="10" Background="#FF0080FF">
    <TextBlock x:Name="textBlock" TextWrapping="Wrap" TextAlignment="Center" FontSize="28" Margin="0,5,0,4"><Run FlowDirection="RightToLeft" Text="hello"/>
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="White" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=border}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                                    <ColorAnimation To="#FF0080FF" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                                    <ColorAnimation To="#FFFFFF" Duration="0:0:.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</Border>

最新更新