Question

我有一个按钮，其控件模板设置为TextBlock。我希望当鼠标悬停在文本上时会发出“Glow”，或者通过键盘移动它来获得焦点。我似乎无法让这个工作，因为我认为我将效果设置在错误的地方。有没有人在此之前完成此操作可以共享xaml。到目前为止，这是我的风格。

<!--Back Button-->
<Style x:Key="MoviesBackButton"
       TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <TextBlock Text="Back" Style="{DynamicResource MoviesButtonBackTextBlock}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Width"
            Value="40" />
    <Setter Property="Height"
            Value="25" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="Margin"
            Value="10,5,0,0" />
</Style>
<Style x:Key="MoviesButtonBackTextBlock"
       TargetType="TextBlock">
    <Setter Property="Foreground"
            Value="{DynamicResource MoviesButtonBackTextBlockForeground}" />
    <Setter Property="FontFamily"
            Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
    <Setter Property="FontSize"
            Value="20" />
    <Setter Property="TextOptions.TextHintingMode"
            Value="Animated" />
</Style>
<LinearGradientBrush x:Key="MoviesButtonBackTextBlockForeground"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
    <GradientStop Color="LightGray"
                  Offset="0" />
    <GradientStop Color="Gray"
                  Offset="1" />
</LinearGradientBrush>

Answer 1

这是鼠标光标的一种解决方案。您可以为Button.GotKeyboardFocus / LostKeyboardFocus添加类似的事件触发器。

如果我是真的这样做，我可能会创建一个自定义控件并使用视觉状态。搜索“Visual State Manager”以获取更多信息。

  <Grid>
    <Grid.Resources>
      <Style x:Key="TextBoxGlow" TargetType="{x:Type Button}">
        <Style.Triggers>
          <EventTrigger RoutedEvent="Button.MouseEnter">
            <EventTrigger.Actions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="0"
                                   To="1" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
          <EventTrigger RoutedEvent="Button.MouseLeave">
            <EventTrigger.Actions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="1"
                                   To="0" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </Style.Triggers>
      </Style>

    </Grid.Resources>

    <StackPanel>
      <Button Style="{StaticResource TextBoxGlow}" Margin="5">
        <TextBlock Text="I'm glowing" FontSize="28" Padding="10">
          <TextBlock.Effect>
            <DropShadowEffect BlurRadius="8" Color="Crimson" ShadowDepth="0" Opacity="0" />
          </TextBlock.Effect>
        </TextBlock>
      </Button>
    </StackPanel>
  </Grid>

按钮内的TextBlock发光效果

1 个答案: