Question

我正在制作一个带有TextBlock指示器的缩放控件（Slider），它指示您希望当前比例因子是（有点像Word的右下角）。

我花了几天时间学习WPF，而且我已经能够弄清楚如何做大部分工作，但我觉得有一个更简单的方法（也许只涉及XAML方面）代码而不是捕获的一堆鼠标事件。

我希望将文本悬停在下方（表示可点击性）并单击以将滑块元素重置为1.0。

这就是我所拥有的：

<StatusBarItem Grid.Column="1" HorizontalAlignment="Right">
    <Slider x:Name="mapCanvasScaleSlider" Width="150" Value="1" Orientation="Horizontal" HorizontalAlignment="Left" 
            IsSnapToTickEnabled="True" Minimum="0.25"  Maximum="4" TickPlacement="BottomRight" 
            Ticks="0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4"/>
</StatusBarItem>
<StatusBarItem Grid.Column="2">
    <TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
                MouseDown="ResetZoomWindow" MouseEnter="zoomIndicator_MouseEnter"  MouseLeave="zoomIndicator_MouseLeave"
                ToolTip="Zoom level; click to reset"/>
</StatusBarItem>

    private void ResetZoomWindow(object sender, MouseButtonEventArgs args)
    {
        mapCanvasScaleSlider.Value = 1.0;
    }

    private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
    {
        zoomIndicator.TextDecorations = TextDecorations.Underline;
    }

    private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
    {
        zoomIndicator.TextDecorations = null;
    }

我觉得有一种更好的方法可以通过XAML实现这一点，而不是拥有三个独立的.cs端功能。

Answer 1

您可以为文本块使用样式触发器，如此其他帖子How to set MouseOver event/trigger for border in XAML?

中所述

工作解决方案：

<StatusBarItem Grid.Column="2">
    <TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
                MouseDown="ResetZoomWindow" ToolTip="Zoom level; click to reset">
        <TextBlock.Style>
            <Style>
                <Setter Property="TextBlock.TextDecorations" Value="" />
                <Style.Triggers>
                    <Trigger Property="TextBlock.IsMouseOver" Value="True">
                        <Setter Property="TextBlock.TextDecorations" Value="Underline" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</StatusBarItem>

但仍然必须手动重置缩放级别（我认为）。

Answer 2

您可以使用VisualState（如果您使用Blend，则易于编辑）。我个人更喜欢样式触发器，除非我必须添加StoryBoard动画 - 然后我才使用VisualState

about VisualState

Answer 3

通常，您不希望使用TextBlock作为按钮（当然您可以）。您可能需要考虑使用更合适的控件，例如Button或HyperlinkButton，它们已经连接了基本的鼠标事件处理。然后，您可以应用您喜欢的任何样式。例如，Button控件可以轻松地styled重新模板化为TextBlock，鼠标悬停下划线：

<Style TargetType="Button" x:Key="LinkButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard Duration="0:0:0.1">
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="content" Storyboard.TargetProperty="TextDecorations">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <TextDecorationCollection>Underline</TextDecorationCollection>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBlock x:Name="content" Text="{TemplateBinding Content}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

通过引用样式键来使用它：

<Button Content="click" Style="{StaticResource LinkButtonStyle}" />

使用这种方法（而不是向TextBlock添加触发器的替代方法）带来了一些内置于Button控件的优点。

您可以将样式应用于复合状态，例如Pressed
您可以使用Click事件及其相关的Command属性

在悬停时更改TextBlock外观的简单方法？

3 个答案: