2013-11-27 87 views
0

林不知道什麼是最好的辦法做到這一點,所以我最好問你。矩形圖

我需要實現這樣的圖形: skala

每個字段是對應於一個其他變量,應作相應着色。

最簡單的方法(不是最快):

創建的每一個在XAML單獨對象,並結合或處理

<Rectangle Name="rect0_0" Fill="White" Stroke="Black" StrokeThickness="1" RadiusX="1" RadiusY="10" Margin="12,250,354,12" /> 

或者類似於這樣做:

void InitializeRectangle() 
{ 
    aRectangle = new RectangleGeometry[MAX_CHANNELS]; 
    for (int i = 0; i < aRectangle.Length; i++) 
    { 
     aRectangle[i] = new RectangleGeometry(new Rect(recX, recY, recWidth,recHeight)); 

     GeometryGroup1.Children.Add(aRectangle[i]); 
     recX += recGab; 
    } 
} 

void PaintRectangle() 
{ 
    myPath1.Data = GeometryGroup1; 
    myPath1.Stroke = Brushes.Black; 
    myPath1.StrokeThickness = 1; 
    mySolidColorBrush.Color = Color.FromArgb(255, 204, 204, 255); 
    myPath1.Fill = mySolidColorBrush; 
    Canvas myCanvas = new Canvas(); 
    myCanvas.Children.Add(myPath1); 
    this.Content = myCanvas; 
} 

,但我不能用這種方法分別着色它們。

如何爲每個矩形着色並在GUI中查看它?

+3

或者您可以使用ItemContainer派生控件,並使用包含RectangleGeometry的DataTemplate並將屬性綁定到ViewModel中包含要顯示的數據(開始,結束,類別,顏色等)的項目列表 –

+2

正確的術語是[ItemsControl](http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(v = vs.110).aspx),並沒有必要從它派生出來。只需設置它的'ItemTemplate'和'ItemsPanel'屬性即可。 – Clemens

回答

2

快速示例,以說明如何實現您的目標。

XAML:

<Window x:Class="WpfTestBench.GraphicSample" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:wpfTestBench="clr-namespace:WpfTestBench" 
     Title="Graphic sample" Height="130" Width="570"> 
    <!-- Outer items control to hold rows --> 
    <ItemsControl ItemsSource="{Binding Rows}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate DataType="wpfTestBench:Row"> 
       <StackPanel Orientation="Horizontal"> 
        <!-- Row identifier --> 
        <Label Content="{Binding Id}" /> 

        <!-- Inner items control with rectangles --> 
        <ItemsControl ItemsSource="{Binding Squares}"> 
         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
           <StackPanel Orientation="Horizontal" IsItemsHost="True" /> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 

         <ItemsControl.ItemTemplate> 
          <DataTemplate DataType="wpfTestBench:Square"> 
           <Rectangle Stroke="Black" StrokeThickness="1" 
              Width="30" Height="20" Margin="2, 0" 
              Fill="{Binding Value, Converter={wpfTestBench:IntToColorConverter}}" /> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
       </StackPanel> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Window> 

代碼隱藏:

using System; 
using System.Collections.Generic; 

namespace WpfTestBench 
{ 
    public partial class GraphicSample 
    { 
     public GraphicSample() 
     { 
      InitializeComponent(); 

      DataContext = new GraphicContext(); 
     } 
    } 

    public class GraphicContext 
    { 
     private readonly Random _random = new Random(); 

     public GraphicContext() 
     { 
      Rows = new List<Row>(); 

      for (var i = 1; i <= 4; i++) 
       Rows.Add(new Row(_random, i)); 
     } 

     public IList<Row> Rows { get; set; } 
    } 

    public class Row 
    { 
     private const int Size = 16; 

     public Row(Random random, int id) 
     { 
      Id = id; 
      Squares = new List<Square>(); 

      for (var i = 0; i < Size; i++) 
       Squares.Add(new Square(random.Next(20))); 
     } 

     public int Id { get; private set; } 
     public IList<Square> Squares { get; private set; } 
    } 

    public class Square 
    { 
     public Square(int value) 
     { 
      Value = value; 
     } 

     public int Value { get; set; } 
    } 
} 

轉換器:

using System; 
using System.Globalization; 
using System.Windows.Data; 
using System.Windows.Markup; 
using System.Windows.Media; 

namespace WpfTestBench 
{ 
    public class IntToColorConverter : MarkupExtension, IValueConverter 
    { 
     private static IntToColorConverter _instance; 

     #region IValueConverter Members 

     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      var convertedValue = (int)value; 

      if (convertedValue < 5) 
       return new SolidColorBrush(Colors.White); 

      if (convertedValue < 10) 
       return new SolidColorBrush(Colors.Green); 

      if (convertedValue < 15) 
       return new SolidColorBrush(Colors.Yellow); 

      return new SolidColorBrush(Colors.Red); 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
     { 
      return null; 
     } 

     #endregion 

     public override object ProvideValue(IServiceProvider serviceProvider) 
     { 
      return _instance ?? (_instance = new IntToColorConverter()); 
     } 
    } 
} 

執行結果:

Sample result

+0

非常感謝那段代碼。你做了一百行,我在1500+以上完成了,只有16個方格:D –

+0

不客氣!一旦你知道如何使用它們,ItemsControl及其後代是非常強大的工具。 – Somedust