文章分類／

Infragistics｜Ultimate UI for WPF｜根據 XamDataChart 中的值創建一系列具有不同顏色的項目

尚無瀏覽量
#
2023-09-03 更新

infragistics log

Infragistics XamDataChart 針對 Silverlight 和 WPF，允許您創建系列，其中標記根據綁定項目的屬性看起來不同。

您可以在 MarkerSeries（例如 ScatterSeries 和 RangeColumnSeries）上使用 MarkerTemplate 屬性。您可以創建自定義 DataTemplate，其中 UI 元素的屬性綁定到項目的 DataContext 屬性。

<DataTemplate x:Key="bubbleTemplate" >

    <Ellipse Stretch="Fill"

               HorizontalAlignment="Stretch"

               VerticalAlignment="Stretch"

               StrokeThickness="0.5"

               MinWidth="10" MinHeight="10"

               Width="{Binding Item.Width}"

               Height="{Binding Item.Width}">

        <ToolTipService.ToolTip>

            <StackPanel Orientation="Vertical">

                <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />

            </StackPanel>

        </ToolTipService.ToolTip>

    </Ellipse>

</DataTemplate>

RgbValueConverter 將數值轉換為具有連續調色板的 SolidColorBrush。

您可能希望根據項目的 DataContext 的值更改標記的顏色。值可以有不同的類型。需要 ValueConverter 將指定類型的值轉換為特定顏色的 Brush。

本文介紹兩種類型的轉換器，用於將數字類型轉換為離散調色板和將數字類型轉換為連續調色板。

該示例應用程序以 Silverlight 為目標。XamDataChart for WPF 允許您以相同的方式創建 WPF 應用程序。

創建示例應用程序的要求：

軟件：

  1. visual studio 2010
  2. 用於 Silverlight 數據可視化的 NetAdvantage 的 Infragistics XamMap 組件（此示例是 2010.2 版本）

創建步驟：

對於Silverlight：

  1. 創建 Silverlight 應用程序。
  2. 創建一個值轉換器。NumberToBrush 將數字轉換為具有單獨調色板的畫筆。RgbValueConverter 將數字轉換為具有連續調色板的畫筆。大多數組件使用 Brush 來實現背景、描邊等屬性。
  3. 創建要在 XamDataChart 的 DataContext 中使用的示例數據。
  4. 創建一個代表圓的 MarkerTemplate。顏色綁定到 YValue 屬性。我們將在這裡使用兩個轉換器。
  5. 使用您創建的 MarkerTemplate 定義為散點圖系列創建 XamDataChart。
  6. 運行示例應用程序。

1. 在 Visual Studio 2010 中創建 Silverlight 應用程序。

2. 添加兩個ValueConverter。

NumberToBrush 將數字（雙精度類型）轉換為 SolidColorBrush。畫筆是從單獨的調色板中獲取的顏色。調色板中有 6 個 SolidColorBrush。顏色有白、紅、橙、黃、綠、藍。由於它是一個參數，因此它有一個範圍，轉換器返回一個相對於該數字的 SolidColorBrush。如果值超出範圍，則返回白色 SolidColorBrush。

public sealed class NumberToBrush : IValueConverter

{

 

    private Brush[] _brushes = new Brush[] { new SolidColorBrush(Colors.White),

                                            new SolidColorBrush(Colors.Red),

                                            new SolidColorBrush(Colors.Orange),

                                            new SolidColorBrush(Colors.Yellow),

                                            new SolidColorBrush(Colors.Green),

                                            new SolidColorBrush(Colors.Blue)};

 

    #region Property Accessors

 

    public Brush[] Brushes

    {

        get { return this._brushes; }

        set { this._brushes = value; }

    }

 

    #endregion

 

    #region IValueConverter

 

    public object Convert(object value, Type targetType, object parameter,

        System.Globalization.CultureInfo culture)

    {

 

        if ((typeof(Brush) != targetType || typeof(double) != value.GetType()))

        {

            return null;

        }

 

        Range range = parameter as Range;

        if(range == null)

        {

            range = new Range();

            range.Min = 0;

            range.Max = 10;

        }

 

        var i = (double)value;

 

        double interval = (double)(range.Max - range.Min)/(_brushes.Length - 1);

        int index = (int)(i / interval + 0.5);

 

        if (index <= 0 || index >= this._brushes.Length) return this._brushes[0];

 

        return this._brushes[index];

    }

 

    public object ConvertBack(object value, Type targetType, object parameter,

        System.Globalization.CultureInfo culture)

    {

        throw new NotImplementedException();

    }

 

    #endregion

}

 

public class Range : BaseViewModel

{

    #region Min

 

    private int _min;

    public int Min

    {

        get { return this._min; }

        set

        {

            this._min = value;

            OnPropertyChanged("Min");

        }

    }

 

    #endregion // Min

 

    #region Max

 

    private int _max;

    public int Max

    {

        get { return this._max; }

        set

        {

            this._max = value;

            OnPropertyChanged("Max");

        }

    }

 

    #endregion // Max

 

}

該轉換器使用 HSV（色相-飽和度-值）。

http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93

請參閱維基百科鏈接以獲取更多信息。

RgbValueConverter 對最小值和最大值內的數字進行標準化。

varnormValue = i * 360/(範圍.Max – 範圍.Min);

RgbValueConverter 的代碼如下。

public sealed class RgbValueConverter : IValueConverter

{

 

    private static Color ColorFromHsv(double hue, double saturation, double value)

    {

        int hi = (int)(Math.Floor(hue / 60)) % 6;

        double f = hue / 60 - Math.Floor(hue / 60);

 

        value = value * 255;

        int v = (int)(value);

        int p = (int)(value * (1 - saturation));

        int q = (int)(value * (1 - f * saturation));

        int t = (int)(value * (1 - (1 - f) * saturation));

 

        if (hi == 0)

        {

            return Color.FromArgb(255, (byte)v, (byte)t, (byte)p);

        }

 

        if (hi == 1)

        {

            return Color.FromArgb(255, (byte)q, (byte)v, (byte)p);

        }

 

        if (hi == 2)

        {

            return Color.FromArgb(255, (byte)p, (byte)v, (byte)t);

        }

 

        if (hi == 3)

        {

            return Color.FromArgb(255, (byte)p, (byte)q, (byte)v);

        }

 

        if (hi == 4)

        {

            return Color.FromArgb(255, (byte)t, (byte)p, (byte)v);

        }

 

        return Color.FromArgb(255, (byte)v, (byte)p, (byte)q);

    }

 

 

    #region IValueConverter

 

    public object Convert(object value, Type targetType, object parameter,

        System.Globalization.CultureInfo culture)

    {

 

        if ((typeof(Brush) != targetType || typeof(double) != value.GetType()))

        {

            return null;

        }

 

        Range range = parameter as Range;

        if(range == null)

        {

            range = new Range();

            range.Min = 0;

            range.Max = 10;

        }

 

        var i = System.Convert.ToDouble(value);

 

        if (i <= range.Min || range.Min >= range.Max)

        {               

            return new SolidColorBrush(Colors.White);

        }

 

        var normValue = i * 360/(range.Max - range.Min);

 

        return new SolidColorBrush(ColorFromHsv(normValue, 1, 1));

 

    }

 

    public object ConvertBack(object value, Type targetType, object parameter,

        System.Globalization.CultureInfo culture)

    {

        throw new NotImplementedException();

    }

 

    #endregion

 

}

3. 創建要在 XamDataChart 的 DataContext 中使用的示例數據。

public class BubbleDataCollection

        : ObservableCollection

{

 

    public BubbleDataCollection()

    {

        this.Add(new BubblePoint { XValue = 4, YValue = 10, Width = 30 });

        this.Add(new BubblePoint { XValue = 4, YValue = 4, Width = 40 });

        this.Add(new BubblePoint { XValue = 8, YValue = 8, Width = 20 });

        this.Add(new BubblePoint { XValue = 10, YValue = 1, Width = 50 });

        this.Add(new BubblePoint { XValue = 1, YValue = 10, Width = 40 });

    }

 

}

 

public class BubblePoint

{

    public double XValue { get; set; }

    public double YValue { get; set; }

    public double Width { get; set; }

}

    <UserControl.Resources>

        ...

        <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" />

       ....

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource bubbleCollection}">

4. 創建一個代表圓的MarkerTemplate。顏色綁定到 YValue 屬性。我們將在這裡使用兩個轉換器。

<UserControl.Resources>

    <Converters:NumberToBrush x:Key="indexToBrush"/>

    <Converters:RgbValueConverter x:Key="RgbToBrush"/>

    <XamDataChartCustomTemplatesDemo:BubbleDataCollection x:Key="bubbleCollection" />

    <Converters:Range x:Key="range" Min="0" Max="10"/>

    <DataTemplate x:Key="bubbleTemplate" >

        <Ellipse Stretch="Fill"

                   HorizontalAlignment="Stretch"

                   VerticalAlignment="Stretch"

                   Fill="{Binding Item.YValue, Converter={StaticResource indexToBrush}, ConverterParameter={StaticResource range}}"

                   Stroke="{Binding Series.ActualMarkerOutline}"

                   StrokeThickness="0.5"

                   MinWidth="10" MinHeight="10"

                   Width="{Binding Item.Width}"

                   Height="{Binding Item.Width}">

            <ToolTipService.ToolTip>

                <StackPanel Orientation="Vertical">

                    <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />

                </StackPanel>

            </ToolTipService.ToolTip>

        </Ellipse>

    </DataTemplate>

    <DataTemplate x:Key="bubbleTemplate2" >

        <Ellipse Stretch="Fill"

                   HorizontalAlignment="Stretch"

                   VerticalAlignment="Stretch"

                   Fill="{Binding Item.YValue, Converter={StaticResource RgbToBrush}, ConverterParameter={StaticResource range}}"

                   Stroke="{Binding Series.ActualMarkerOutline}"

                   StrokeThickness="0.5"

                   MinWidth="10" MinHeight="10"

                   Width="{Binding Item.Width}"

                   Height="{Binding Item.Width}">

            <ToolTipService.ToolTip>

                <StackPanel Orientation="Vertical">

                    <TextBlock Text="{Binding Item.YValue, StringFormat='Value: {0}'}" />

                </StackPanel>

            </ToolTipService.ToolTip>

        </Ellipse>

    </DataTemplate>       

</UserControl.Resources>

MarkerTemplate 定義包含一個橢圓，該橢圓由基於 BubblePoint 對象的 YValue 的 Brush 填充。

5. 使用您創建的 MarkerTemplate 定義創建散點圖系列 XamDataChart。

<igChart:XamDataChart x:Name="theChart">

    <igChart:XamDataChart.Axes>

        <igChart:NumericXAxis x:Name="xAxis"

                               MinimumValue="0" MaximumValue="15"/>

        <igChart:NumericYAxis x:Name="yAxis"

                               MinimumValue="0" MaximumValue="15"/>

    </igChart:XamDataChart.Axes>

 

    <igChart:XamDataChart.Series>

        <igChart:ScatterSeries x:Name="scatter"

                               MarkerTemplate="{StaticResource bubbleTemplate}"

                               ItemsSource="{Binding}"

                               XMemberPath="XValue"

                               YMemberPath="YValue"

                               XAxis="{Binding ElementName=xAxis}"

                               YAxis="{Binding ElementName=yAxis}"></igChart:ScatterSeries>

    </igChart:XamDataChart.Series>

</igChart:XamDataChart>

...

<igChart:XamDataChart x:Name="theChart2">

    <igChart:XamDataChart.Axes>

        <igChart:NumericXAxis x:Name="xAxis2"

                                   MinimumValue="0" MaximumValue="15"/>

        <igChart:NumericYAxis x:Name="yAxis2"

                                   MinimumValue="0" MaximumValue="15"/>

    </igChart:XamDataChart.Axes>

 

    <igChart:XamDataChart.Series>

        <igChart:ScatterSeries x:Name="scatter2"

                                   MarkerTemplate="{StaticResource bubbleTemplate2}"

                                   ItemsSource="{Binding}"

                                   XMemberPath="XValue"

                                   YMemberPath="YValue"

                                   XAxis="{Binding ElementName=xAxis2}"

                                   YAxis="{Binding ElementName=yAxis2}"></igChart:ScatterSeries>

    </igChart:XamDataChart.Series>

 

</igChart:XamDataChart>

6. 運行應用程序。

快速跳轉目錄
💬 想找尋適合的軟體服務嗎？
立即預約專人諮詢

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴，歡迎諮詢你需要的軟體服務！

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴，致力於提供更多軟體解決方案給你！

更多軟體新知

立即詢價

請留下完整資訊，以便我們提供精確的服務內容給你。

詢價資訊