Silverlight/XAML – Learning by Coding

[ sl2_toolkit_charts.xaml --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="UTF-8"?>
  2: <!-- coded by Thomas Meinike 02/09 -->
  3: <UserControl x:Class="sl2_toolkit_charts.Page"
  4:   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  5:   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  6:   xmlns:charting=
  7:   "clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
  8:   xmlns:datavis=
  9:   "clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"
 10:   Width="800" Height="600">
 11: 
 12:   <Canvas Loaded="InitCharts" Background="GhostWhite">
 13: 
 14:     <TextBlock Canvas.Left="230" Canvas.Top="20" FontSize="24"
 15:       Foreground="#00C" Text="Charts mit Silverlight Toolkit"/>
 16:     
 17:     <charting:Chart x:Name="BarChart"
 18:       Canvas.Left="10" Canvas.Top="30" Width="450" Height="300" BorderThickness="0">
 19:       <charting:Chart.Series>
 20:         <charting:ColumnSeries Title="Daten"
 21:           AnimationSequence="FirstToLast" IsSelectionEnabled="True"
 22:           DependentValueBinding="{Binding Path=Value}"
 23:           IndependentValueBinding="{Binding Path=Key}"/>
 24:       </charting:Chart.Series>
 25:     </charting:Chart>
 26: 
 27:     <charting:Chart x:Name="PieChart" LegendTitle="Kategorien"
 28:       Canvas.Left="10" Canvas.Top="300" Width="450" Height="300" BorderThickness="0">
 29:       <charting:Chart.Series>
 30:         <charting:PieSeries Title=""
 31:           AnimationSequence="LastToFirst" IsSelectionEnabled="True"
 32:           DependentValueBinding="{Binding Path=Value}"
 33:           IndependentValueBinding="{Binding Path=Key}"/>
 34:       </charting:Chart.Series>
 35:     </charting:Chart>
 36: 
 37:     <charting:Chart x:Name="LineChart"
 38:       Canvas.Left="440" Canvas.Top="30" Width="350" Height="300" BorderThickness="0">
 39:       <charting:Chart.Series>
 40:         <charting:LineSeries Title=""
 41:           AnimationSequence="FirstToLast" IsSelectionEnabled="True"
 42:           DependentValueBinding="{Binding Path=Value}"
 43:           IndependentValueBinding="{Binding Path=Key}">
 44:           <charting:LineSeries.DataPointStyle><!-- Farbe der Datenpunkte ändern -->
 45:             <Style TargetType="charting:LineDataPoint">
 46:               <Setter Property="Background" Value="Red"/>
 47:             </Style>
 48:           </charting:LineSeries.DataPointStyle>
 49:         </charting:LineSeries>
 50:       </charting:Chart.Series>
 51: 
 52:       <charting:Chart.LegendStyle><!-- keine Legende anzeigen -->
 53:         <Style TargetType="datavis:Legend">
 54:           <Setter Property="Width" Value="0"/>
 55:           <Setter Property="Height" Value="0"/>
 56:         </Style>
 57:       </charting:Chart.LegendStyle>
 58:     </charting:Chart>
 59: 
 60:     <charting:Chart x:Name="BubbleChart"
 61:       Canvas.Left="440" Canvas.Top="300" Width="350" Height="300" BorderThickness="0">
 62:       <charting:Chart.Series>
 63:         <charting:BubbleSeries Title=""
 64:           AnimationSequence="FirstToLast" IsSelectionEnabled="True"
 65:           DependentValueBinding="{Binding Path=Value}"
 66:           IndependentValueBinding="{Binding Path=Key}">
 67: 
 68:           <charting:BubbleSeries.DataPointStyle><!-- Farbe der Datenpunkte ändern -->
 69:             <Style TargetType="charting:BubbleDataPoint">
 70:               <Setter Property="Background" Value="Orange"/>
 71:             </Style>
 72:           </charting:BubbleSeries.DataPointStyle>
 73:         </charting:BubbleSeries>
 74:       </charting:Chart.Series>
 75: 
 76:       <charting:Chart.LegendStyle><!-- keine Legende anzeigen -->
 77:         <Style TargetType="datavis:Legend">
 78:           <Setter Property="Width" Value="0"/>
 79:           <Setter Property="Height" Value="0"/>
 80:         </Style>
 81:       </charting:Chart.LegendStyle>
 82:     </charting:Chart>
 83: 
 84:   </Canvas>
 85: 
 86: 
 87:   <!-- // zusätzlich verwendeter VB.NET-Code in Page.xaml.vb:
 88: 
 89:   Partial Public Class Page
 90:     Inherits UserControl
 91: 
 92:     Public Sub New()
 93:       InitializeComponent()
 94:     End Sub
 95: 
 96:     Private Sub InitCharts(ByVal sender As System.ObjectByVal e As System.Windows.RoutedEventArgs)
 97: 
 98:       Me.BarChart.Series(0).ItemsSource = New KeyValuePair(Of StringDouble)() { _
 99:         New KeyValuePair(Of StringDouble)("Kategorie 1"10), _
100:         New KeyValuePair(Of StringDouble)("Kategorie 2"20), _
101:         New KeyValuePair(Of StringDouble)("Kategorie 3"30), _
102:         New KeyValuePair(Of StringDouble)("Kategorie 4"40), _
103:         New KeyValuePair(Of StringDouble)("Kategorie 5"50)}
104: 
105:       Me.PieChart.Series(0).ItemsSource = New KeyValuePair(Of StringDouble)() { _
106:         New KeyValuePair(Of StringDouble)("Kategorie 1"10), _
107:         New KeyValuePair(Of StringDouble)("Kategorie 2"20), _
108:         New KeyValuePair(Of StringDouble)("Kategorie 3"30), _
109:         New KeyValuePair(Of StringDouble)("Kategorie 4"40), _
110:         New KeyValuePair(Of StringDouble)("Kategorie 5"50)}
111: 
112:       Me.LineChart.Series(0).ItemsSource = New KeyValuePair(Of DoubleDouble)() { _
113:         New KeyValuePair(Of DoubleDouble)(1.010.0), _
114:         New KeyValuePair(Of DoubleDouble)(2.020.0), _
115:         New KeyValuePair(Of DoubleDouble)(3.030.0), _
116:         New KeyValuePair(Of DoubleDouble)(4.040.0), _
117:         New KeyValuePair(Of DoubleDouble)(5.050.0)}
118: 
119:       Me.BubbleChart.Series(0).ItemsSource = New KeyValuePair(Of DoubleDouble)() { _
120:         New KeyValuePair(Of DoubleDouble)(1.010.0), _
121:         New KeyValuePair(Of DoubleDouble)(2.020.0), _
122:         New KeyValuePair(Of DoubleDouble)(3.030.0), _
123:         New KeyValuePair(Of DoubleDouble)(4.040.0), _
124:         New KeyValuePair(Of DoubleDouble)(5.050.0)}
125: 
126:     End Sub
127: 
128:   End Class
129: 
130:   -->
131: 
132: </UserControl>

[zum Anfang]