<navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SLChartsPoc.Views.BubleChart" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="BubleChart Page"> <Grid x:Name="LayoutRoot"> <Grid.Resources> <Style x:Key="CustomBubbleDataPointStyle" TargetType="toolkit:BubbleDataPoint"> <!-- Pretty background brush --> <Setter Property="Background"> <Setter.Value> <RadialGradientBrush> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="2.09" ScaleY="1.819"/> <TranslateTransform X="-0.425" Y="-0.486"/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#FF1D7554" Offset="1"/> <GradientStop Color="#FF9DC2B3"/> </RadialGradientBrush> </Setter.Value> </Setter> <!-- Template with custom ToolTip --> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="toolkit:BubbleDataPoint"> <Grid> <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> <Ellipse> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="#77ffffff" Offset="0"/> <GradientStop Color="#00ffffff" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <ToolTipService.ToolTip> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock> <Run Text="{Binding DisplayText}"></Run> <Run Text="("></Run><Run Text="{Binding S}"></Run><Run Text=")"></Run> </TextBlock> </StackPanel> </StackPanel> </ToolTipService.ToolTip> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <toolkit:Chart> <toolkit:Chart.Series> <toolkit:BubbleSeries x:Name="bubleSeries" DataPointStyle="{StaticResource CustomBubbleDataPointStyle}" ItemsSource="{Binding Items}" IndependentValueBinding="{Binding X}" DependentValueBinding="{Binding Y}" SizeValueBinding="{Binding S}"/> </toolkit:Chart.Series> </toolkit:Chart> </Grid> </navigation:Page>
public class BubleItem { public double X { get; set; } public double Y { get; set; } public double S { get; set; } public string DisplayText { get; set; } public static ObservableCollection<BubleItem> Get() { ObservableCollection<BubleItem> list = new ObservableCollection<BubleItem>(); Random r = new Random(); for (int i = 0; i < 30; i++) { BubleItem item = new BubleItem { X = r.Next(0, 1000), Y = r.Next(0, 500), S = r.Next(0, 300000),DisplayText="Point "+i }; list.Add(item); } return list; } }