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

问题描述

在基于C＃的WPF用户控件中，我有一组滑块来调整Color元素的Red，Green和Blue值；本质上，UserControl是一个颜色选择器。对于ToolTipOpening事件处理程序，我在后面结合了XAML和C＃代码，使我可以设置代表Color组件属性值的单个整数值。因此，如果在滑块中间放置了用于调整颜色中红色数量的滑块，则工具提示将显示 Red：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;
    }

是否可以消除后面的代码并设置要显示的工具提示内容仅在XAML中使用 ToolTip.Content 和 ToolTip.ContentStringFormat 属性的相同字符串，从而消除了C＃后面代码中的ToolTipOpening事件处理程序？我已经尝试使用数据绑定对以下XAML进行格式化，以设置滑块工具提示的内容字符串：

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>

请注意<中的其他：0 code> ContentStringFormat = Blue：{0：0} 以舍入该值。

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

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