Question

资源：

<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颜色也会变为白色。

如何同时更改它们？

Answer 1

Style只能设置应用它的元素的属性，这意味着Border Style不能设置TextBlock的Foreground属性。

您可以为TextBlock定义另一个样式：

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

Answer 2

如评论中所述，Border和TextBlock将用作按钮。

为此目的，不是为Styles和Border创建2个类似的TextBlock，而是最好使用Button控件并对其进行修改。 Style和Template属性，以便根据需要更改边框和文本。

资源：

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

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

2 个答案: