WPF:将滑块值绑定到 XAML 中的工具提示内容字符串的数据 [英] WPF: Data Binding A Slider Value To A ToolTip Content String In XAML

问题描述

在基于 C# 的 WPF 用户控件中，我有一组滑块来调整颜色元素的红色、绿色和蓝色值；本质上 UserControl 是一个颜色选择器.我为 ToolTipOpening 事件处理程序提供了 XAML 和 C# 代码的组合，它允许我设置表示颜色组件属性值的单个整数值.因此，如果我将滑块定位为调整滑块中间颜色中的红色量，工具提示将显示红色:125"，因为每个颜色组件属性值的范围可以从 0 到 255.代码片段下面的 XAML 和 C# 都按预期工作:

In a C# based WPF UserControl, I have a set of Sliders to adjust the Red,Green and Blue values of a Color element; essentially the UserControl is a color picker. I have a combination of XAML and C# code behind for the ToolTipOpening Event Handler that allows me to set the individual integer value representing the Color component property value. So, if I have the slider positioned for adjusting the amount of Red in the color in the middle of the Slider, the ToolTip will display "Red: 125", as each Color component property value can range from 0 to 255. The code fragments below for both the XAML and C# work as expected:

XAML:

<UserControl x:Class="CustomColorPicker.ColorPickerUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Name="colorPicker">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="175" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Label HorizontalAlignment="Right">Red:</Label>
        <Slider Grid.Row="0" Grid.Column="1" Name="sliderRed" Minimum="0" Maximum="255"
                Margin="{Binding ElementName=colorPicker, Path=Padding}"
                Value="{Binding ElementName=colorPicker, Path=Red}" 
                ToolTipOpening="OnColorSliderToolTipOpening" 
                ToolTip="Red: 0" />

        <Label Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right">Green:</Label>
        <Slider Grid.Row="1" Grid.Column="1" Name="sliderGreen" Minimum="0" Maximum="255"
                Margin="{Binding ElementName=colorPicker, Path=Padding}"
                Value="{Binding ElementName=colorPicker, Path=Green}" 
                ToolTipOpening="OnColorSliderToolTipOpening" ToolTip="Green: 0" />

        <Label Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right">Blue:</Label>
        <Slider Grid.Row="2" Grid.Column="1" Name="sliderBlue" Minimum="0" Maximum="255"
                Margin="{Binding ElementName=colorPicker, Path=Padding}"
                Value="{Binding ElementName=colorPicker, Path=Blue}" 
                ToolTipOpening="OnColorSliderToolTipOpening" ToolTip="Blue: 0" />

        <Rectangle Grid.Column="2" Grid.RowSpan="3"
                   Margin="{Binding ElementName=colorPicker, Path=Padding}"
                   Width="85" Stroke="Black" StrokeThickness="1">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding ElementName=colorPicker, Path=Color}" />
            </Rectangle.Fill>
        </Rectangle>    
    </Grid>
</UserControl>

C#:

    private void OnColorSliderToolTipOpening(object sender, ToolTipEventArgs e)
    {
        Slider slider = (Slider) sender;

        string colorName = "N/A";
        int colorValue = 0;

        if (slider.Name == "sliderRed")
        {
            colorName = "Red";
            colorValue = (int) Color.R;                
        }

        else if (slider.Name == "sliderGreen")
        {
            colorName = "Green";
            colorValue = (int) Color.G;
        }

        else if (slider.Name == "sliderBlue")
        {
            colorName = "Blue";
            colorValue = (int) Color.B;
        }

        string colorTip =
        string.Format("{0}: {1}", colorName, colorValue.ToString());

        slider.ToolTip = colorTip;

        return;
    }

有没有办法消除后面的代码，并使用 ToolTip.Content 和 ToolTip 将 ToolTip 内容设置为显示相同的字符串.仅在 XAML 中的 ContentStringFormat 属性，允许在 C# 后面的代码中消除 ToolTipOpening 事件处理程序?我尝试了以下 XAML 使用 DataBinding 来格式化滑块工具提示的内容字符串:

Is there a way to eliminate the code behind and set the ToolTip contents to display the same string using the ToolTip.Content and ToolTip.ContentStringFormat properties in XAML only, allowing for the elimination of the ToolTipOpening event handler in the code behind in C#? I've tried the following XAML using DataBinding to format the content string of the Slider's ToolTip:

XAML:

    <Slider Grid.Row="2" Grid.Column="1" Name="sliderBlue" Minimum="0" Maximum="255"
            Margin="{Binding ElementName=colorPicker, Path=Padding}"
            Value="{Binding ElementName=colorPicker, Path=Blue}">
        <Slider.ToolTip>
            <ToolTip
                Content="{Binding ElementName=colorPicker, Path=Blue}"
                ContentStringFormat="{}Blue: {0}" />
        </Slider.ToolTip>
    </Slider>

工具提示弹出窗口显示为空:

and the ToolTip Popup display comes up empty:

推荐答案

绑定每个 ElementName 就像 RelativeSource 和 FindAncestor 不在范围，因为 ToolTip 是一个 Popup ，它不是 VisualTree 的一部分(它创建自己的).但您可以使用 ToolTip.PlacementTarget 属性 来获取Slider 控制和捕捉值.

Binding per ElementName just like RelativeSource with FindAncestor isn't in scope because ToolTip is a Popup which isn't part of the VisualTree (it creates its own). But you can use the ToolTip.PlacementTarget Property to get the Slider control and catch the Value.

<Slider.ToolTip>
    <ToolTip Content="{Binding RelativeSource={RelativeSource Self},
                               Path=PlacementTarget.Value}"
             ContentStringFormat="Blue: {0:0}" />
</Slider.ToolTip>

请注意 ContentStringFormat="Blue: {0:0}" 中的附加 :0 以对值进行四舍五入.

Please note the additional :0 in ContentStringFormat="Blue: {0:0}" to round the Value.

这篇关于WPF:将滑块值绑定到 XAML 中的工具提示内容字符串的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！