Question

我正在尝试使用silverlight-5开发c＃web应用程序。

我必须创建一个进度条，它将有两种颜色为绿色（高达某个百分比），然后是红色，这将通过c＃中的某些数据操作动态完成。

我希望通过一定比例的绿色和休息红色来制作两种颜色（百分比将在运行时决定）。我阅读了几份文件但很难理解。

有人可以帮我写一下c＃中的代码吗？（或者，如果此进度条没有按运行时获取的值更改颜色，那么请编写一个简单的代码来创建自定义进度条，根据运行时更改的值在运行时更改颜色）。会是一个很大的帮助。谢谢

可能我想代码将用c＃编写，因为在xaml中颜色显示比例将是固定的，但是这两种颜色的百分比必须根据运行时在c＃代码中获得的数据值进行更改

注意：我正在使用silverlight和c＃开发webapplication。

所以代码必须像这样写在正文中：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace B
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }


    }
}

Answer 1

您可以将Foreground属性设置为使用在代码隐藏中动态调整的LinearGradientBrush。

<ProgressBar x:Name="ThresholdIndicator"/>

代码隐藏：

public MainPage()
{
    InitializeComponent();
    m_thresholdBrush = new LinearGradientBrush(){
                           MappingMode = BrushMappingMode.Absolute};
    GradientStop colorLeftOfThreshold =  new GradientStop(){
                                         Color = Colors.Green,
                                         Offset = 1};
    GradientStop colorRightOfThreshold = new GradientStop(){
                                         Color = Colors.Red,
                                         Offset = 1};
    m_thresholdBrush.GradientStops.Add(colorLeftOfThreshold);
    m_thresholdBrush.GradientStops.Add(colorRightOfThreshold);
    ThresholdIndicator.Foreground = m_thresholdBrush;
    ThresholdIndicator.SizeChanged += (s,e)=>UpdateThresholdBrush();

    //this.ThresholdRatio is your dynamic green/red threshold
    this.ThresholdRatioChanged += (s,e)=>UpdateThresholdBrush();

    UpdateThresholdBrush();
}
private LinearGradientBrush m_thresholdBrush;
private void UpdateThresholdBrush()
{
    m_thresholdBrush.EndPoint = new Point(GetX(), 0);
}
private double GetX()
{
    return this.ThresholdRatio * ThresholdIndicator.ActualWidth;
}

请注意，我只更改EndPoint，两个GradientStop始终位于端点位置。

[编辑]好的，我可以看到你对this.ThresholdRatio和改变的事件感到困惑，这应该是：

public double ThresholdRatio
{
    get { return (double) GetValue( ThresholdRatioProperty ); }
    set { SetValue( ThresholdRatioProperty, value ); }
}

public static readonly DependencyProperty ThresholdRatioProperty =
    DependencyProperty.Register( "ThresholdRatio", typeof(double),
    typeof( MainPage), new PropertyMetadata(HandleThresholdRatioChanged) );

private static void HandleThresholdRatioChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    ((MainPage)d).RaiseThresholdRatioChanged();
}

private void RaiseThresholdRatioChanged()
{
    var handlers = ThresholdRatioChanged;
    if (handlers!=null) handlers(this,EventArgs.Empty);
}

public event EventHandler ThresholdRatioChanged;

Answer 2

如果您不必使用进度条，那么我认为您最好自定义表示，例如使用itemscontrol然后为其定义数据模板，如下所示：< / p>

XAML

 <ItemsControl x:Name="ic"
                      BorderBrush="Black" 
                      BorderThickness="2" 
                      Background="Gray" 
                      ItemsSource="{Binding}" 
                      ItemTemplate="{StaticResource test1}" 
                      Height="100" 
                      Width="400">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

数据模板

<DataTemplate x:Key="test1">
            <TextBlock Background="{Binding Color}" 
                       Text="{Binding}" 
                       VerticalAlignment="Center"
                       Padding="2">
                <TextBlock.Width>
                    <MultiBinding Converter="{StaticResource myMultiMarketConverter}">
                        <Binding Path="MarketShare"/>
                        <Binding ElementName="ic" Path="Width" />
                    </MultiBinding>
                </TextBlock.Width>
                <TextBlock.Height>
                    <Binding Path="Height" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type ItemsControl}}" />
                </TextBlock.Height>
            </TextBlock>
        </DataTemplate>

c＃尝试在运行时在进度条中生成两种颜色

2 个答案: