WPF 使用百分比将 TextBlock 绑定到 ProgressBar答案

【问题标题】：WPF Binding TextBlock to ProgressBar with PercentageWPF 使用百分比将 TextBlock 绑定到 ProgressBar
【发布时间】：2014-06-22 00:51:45
【问题描述】：

我有一个最大为 10,000（不是 100）的 ProgressBar。我希望绑定的 TextBox 显示当前值的百分比，而不是值本身。是否可以在 .xaml 代码中执行此操作？

下面显示了我的 ProgressBar 的当前值。我希望它显示值/最大值。

        <ProgressBar x:Name="calculationProgressBar" />
        <TextBlock x:Name="calculationProgressText" Text="{Binding ElementName=calculationProgressBar, Path=Value, StringFormat={}{0:0}%}" />

【问题讨论】：

Xaml 不进行计算；该功能通过转换器或属性绑定来执行。

标签： wpf xaml binding textbox progress-bar

【解决方案1】：

您可以设置一个简单的IMultiValueConverter 并传入ProgressBars Value 和Maximum 属性

例子：

转换器

public class ValueToPercentConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double value = System.Convert.ToDouble(values[0]);
        double maximum = System.Convert.ToDouble(values[1]);
        return (value / maximum) * 100;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Xaml：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="100" Width="100">
    <Window.Resources>
        <local:ValueToPercentConverter x:Key="ValueToPercentConverter" />
    </Window.Resources>
    <StackPanel>
        <ProgressBar x:Name="calculationProgressBar" Maximum="10000" Value="2566" Height="40"/>
        <TextBlock>
            <TextBlock.Text>
                <MultiBinding Converter="{StaticResource ValueToPercentConverter}" StringFormat="{}{0}">
                    <Binding ElementName="calculationProgressBar" Path="Value"/>
                    <Binding ElementName="calculationProgressBar" Path="Maximum"/>
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </StackPanel>
</Window>

结果：

【讨论】：

【解决方案2】：

由于在 XAML 中无法进行操作，因此转换器也是一种处理方法

我尝试为您编写一个简单的代码，使用字符串格式表示百分比通知StringFormat={}{0:P0}

XAML 示例

<StackPanel>
    <StackPanel.Resources>
        <l:ScaleConverter x:Key="ScaleConverter"/>
    </StackPanel.Resources>
    <Slider x:Name="calculationSource" Maximum="10000"/>
    <TextBlock Text="{Binding ElementName=calculationSource, 
                              Path=Value, StringFormat={}{0:P0}, 
                              Converter={StaticResource ScaleConverter}, 
                              ConverterParameter=10000}" />
</StackPanel>

为了方便演示，我使用滑块而不是进度条，您可以使用任何来源

在转换器参数中指定最大值

字符串格式的P0表示0精度的百分比格式，例如0%，可以选择P1为1位小数，以此类推，例如0.0%

转换器类

class ScaleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return System.Convert.ToDouble(value) / System.Convert.ToDouble(parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

转换器非常简单，将值除以定义的比例。

我希望它对您的问题有用

附加内容

此外，如果您希望在单个位置定义最大范围，您可以使用相同的资源

<StackPanel>
    <StackPanel.Resources>
        <l:ScaleConverter x:Key="ScaleConverter"/>
        <sys:Double x:Key="maxRange">10000</sys:Double>
    </StackPanel.Resources>
    <Slider x:Name="calculationSource" Maximum="{StaticResource maxRange}"/>
    <TextBlock Text="{Binding ElementName=calculationSource, 
               Path=Value, StringFormat={}{0:P0}, 
               Converter={StaticResource ScaleConverter}, 
               ConverterParameter={StaticResource maxRange}}" />
</StackPanel>

【讨论】：