Question

我有一个最小0和最大100的滑块。

当鼠标滑过滑块时，我有一个可见的弹出窗口目前，我使用滑块值绑定了弹出窗口。

我想要的是：
当我将鼠标移到滑块上时，我希望看到假设处于该位置的值。

例如：
enter image description here

我的XAML：

<Window x:Class="WPFMavka.VideoPlayer"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFMavka"
        Title="MainWindow" WindowStyle="None" Width="1920" Height="1080" WindowState="Maximized" KeyboardNavigation.TabNavigation="None" Closing="Window_Closing">
    <Grid Name="tst">
        <local:MetroSlider x:Name="bla" MouseMove="Rectangle_MouseMove" MouseLeave="Rectangle_MouseLeave" IsMoveToPointEnabled="True" HorizontalAlignment="Left" Width="542" VerticalAlignment="Top" Margin="116,839,0,0" Value="0" Style="{DynamicResource SliderStyle1}" Height="66" AutoToolTipPrecision="0" AutoToolTipPlacement="TopLeft"/>
        <Popup Name="floatingTip" AllowsTransparency="True" Placement="Relative"  PlacementTarget="{Binding ElementName=bla}">
            <Border BorderBrush="Black" BorderThickness="1" Padding="4">
                <TextBlock Text="{Binding ElementName=bla, Path=Value}"></TextBlock>
            </Border>
        </Popup>
    </Grid>
</Window>

我的守则 - 背后：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WPFMavka
{
    /// <summary>
    /// Interaction logic for VideoPlayer.xaml
    /// </summary>
    public partial class VideoPlayer : Window
    {
        public VideoPlayer()
        {
            InitializeComponent();
        }

        private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            Environment.Exit(1);
        }

        private void Rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            if (!floatingTip.IsOpen) { floatingTip.IsOpen = true; }

            Point currentPos = e.GetPosition(bla);

            floatingTip.HorizontalOffset = currentPos.X-14;
            floatingTip.VerticalOffset = -32;
        }

        private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
        {
            floatingTip.IsOpen = false;
        }
    }
}

Answer 1

找到更好的解决方案 - 更改TextBlock onMouseOver幻灯片＆gt;我在滑块上获得鼠标的当前位置，然后使用.ValueFromPoint()

XAML：

<Window x:Class="WPFMavka.VideoPlayer"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFMavka"
        Title="MainWindow" WindowStyle="None" Width="1920" Height="1080" WindowState="Maximized" KeyboardNavigation.TabNavigation="None" Closing="Window_Closing">
    <Grid Name="tst">
        <local:MetroSlider x:Name="slider" MouseMove="slider_MouseMove" MouseLeave="slider_MouseLeave" IsMoveToPointEnabled="True" HorizontalAlignment="Left" Width="746" VerticalAlignment="Top" Margin="330,851,0,0" Value="0" Style="{DynamicResource SliderStyle1}" Height="44"/>
        <Popup Name="floatingTip" AllowsTransparency="True" Placement="Relative"  PlacementTarget="{Binding ElementName=slider}">
            <Border Name="floatingTipBorder" BorderBrush="Black" BorderThickness="1" Padding="4">
                <TextBlock Name="sliderTextBlock"/>
            </Border>
        </Popup>
    </Grid>
</Window>

代码隐藏：

private void slider_MouseMove(object sender, MouseEventArgs e)
{
   if (!floatingTip.IsOpen) { floatingTip.IsOpen = true; }

   Point currentPos = e.GetPosition(slider);
   Track _track = slider.Template.FindName("PART_Track", slider) as Track;

   sliderTextBlock.Text = _track.ValueFromPoint(currentPos).ToString();

   floatingTip.HorizontalOffset = currentPos.X -(floatingTipBorder.ActualWidth / 2);
   floatingTip.VerticalOffset = -32;
}

private void slider_MouseLeave(object sender, MouseEventArgs e)
{
   floatingTip.IsOpen = false;
}

Answer 2

您可以使用AttachedCommand来实现此目的。您可以从here下载该库。所以在这种情况下你可以做类似的事情：

<Window x:Class="WPFMavka.VideoPlayer"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPFMavka"
        xmlns:AttachedCommand="clr-namespace:AttachedCommandBehavior;assembly=AttachedCommandBehavior" 
        Title="MainWindow" 
        WindowStyle="None" 
        Width="1920" 
        Height="1080" 
        WindowState="Maximized" 
        KeyboardNavigation.TabNavigation="None" 
        Closing="Window_Closing">
    <Grid Name="tst">
        <local:MetroSlider x:Name="bla" 
                           MouseMove="Rectangle_MouseMove" 
                           MouseLeave="Rectangle_MouseLeave" 
                           IsMoveToPointEnabled="True" 
                           HorizontalAlignment="Left" 
                           Width="542" VerticalAlignment="Top" 
                           Margin="116,839,0,0" 
                           Value="0" 
                           Style="{DynamicResource SliderStyle1}" 
                           Height="66" AutoToolTipPrecision="0" 
                           AutoToolTipPlacement="TopLeft"
                           AttachedCommand:CommandBehavior.Event="MouseMove" 
                           AttachedCommand:CommandBehavior.Command="{Binding UpdateCurrentMouseTimeCommand}" 
                           AttachedCommand:CommandBehavior.CommandParameter="{Binding ElementName=Bla, Path=Value}"/>
        <Popup Name="floatingTip" AllowsTransparency="True" 
               Placement="Relative" 
               PlacementTarget="{Binding ElementName=bla}">
            <Border BorderBrush="Black" BorderThickness="1" Padding="4">
                <TextBlock Text="{Binding CurrentMouseTime, NotifyOnSourceUpdated=True, Mode=OneWay}" />
            </Border>
        </Popup>
    </Grid>
</Window>

然后在您的命令UpdateCurrentMouseTimeCommand中设置属性

private string currentMouseTime = String.Empty;
public string CurrentMouseTime
{
    get { return value; }
    set 
    {
        if (currentMouseTime == value)
            return;
        currentMouseTime = value;
        OnPropertyChanged("CurrentMouseTime");
    }
}

包含类必须实现INotifyPropertyChanged。

我希望这会有所帮助。

WPF将滑块的鼠标位置值绑定到textblock

2 个答案: