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

查看：139
本文介绍了WPF：数据绑定滑块值到XAML中的工具提示内容字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在一个基于C＃的WPF UserControl中，我有一组Slides来调整Color元素的Red，Green和Blue值;基本上UserControl是一个颜色选择器。对于ToolTipOpening事件处理程序，我将XAML和C＃代码组合在一起，允许我设置表示Color组件属性值的单个整数值。因此，如果我有一个滑块定位用于调整滑块中间颜色的红色数量，则工具提示将显示红色：125，因为每个颜色分量属性值的范围可以为0到255.代码片段下面是XAML和C＃的工作原理：



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 Horizo​​ntalAlignment =Right> Red：< / Label> 
< Slider Grid.Row =0Grid.Column =1Name =sliderRedMinimum =0Maximum =255
 Margin ={Binding ElementName = colorPicker，Path = padding}
 Value ={Binding ElementName = colorPicker，Path = Red}
 ToolTipOpening =OnColorSliderToolTipOpening
 ToolTip =Red：0/> 
 
< Label Grid.Row =1Grid.Column =0Horizo​​ntalAlignment =Right> Green：< / Label> 
< Slider Grid.Row =1Grid.Column =1Name =sliderGreenMinimum =0Maximum =255
 Margin ={Binding ElementName = colorPicker，Path = padding}
 Value ={Binding ElementName = colorPicker，Path = Green}
 ToolTipOpening =OnColorSliderToolTipOpeningToolTip =Green：0/> 
 
< Label Grid.Row =2Grid.Column =0Horizo​​ntalAlignment =Right> Blue：< / Label> 
< Slider Grid.Row =2Grid.Column =1Name =sliderBlueMinimum =0Maximum =255
 Margin ={Binding ElementName = colorPicker，Path = padding}
 Value ={Binding ElementName = colorPicker，Path = Blue}
 ToolTipOpening =OnColorSliderToolTipOpeningToolTip =Blue：0/> 
 
< Rectangle Grid.Column =2Grid.RowSpan =3
 Margin ={Binding ElementName = colorPicker，Path = Padding}
 Width = 85Stroke =BlackStrokeThickness =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内容设置为显示相同的字符串仅使用XAML中的 ToolTip.Content 和 ToolTip.ContentStringFormat 属性，允许消除在C＃中的代码背后的ToolTipOpening事件处理程序？我已经尝试使用DataBinding格式化Slider的工具提示的内容字符串的以下XAML：



XAML： 

 < Slider Grid.Row =2Grid.Column =1Name =sliderBlueMinimum =0Maximum =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>

，工具提示弹出窗口显示为空：



解决方案

绑定每个 ElementName 就像 RelativeSource 与 FindAncestor 不在范围内，因为 ToolTip 是一个弹出，不是VisualTree的一部分（它创建自己的）。但是，您可以使用 ToolTip.PlacementTarget属性获取滑块控制并捕获值。

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

请注意：0 code> ContentStringFormat =蓝色：{0：0}舍入值。


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;
    }

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:

解决方案

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>

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆