Custome Buble Data Point

最新推荐文章于 2024-08-27 08:08:15 发布

weixin_30907523

最新推荐文章于 2024-08-27 08:08:15 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mjgb/p/BubleChartTooltipDataPointStyle.html

本文介绍了一个使用WPF创建可定制样式的泡泡图的方法。通过设置背景渐变效果、自定义工具提示和椭圆模板，实现了丰富的视觉效果。文章还提供了一个生成随机数据点的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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;
        }

    }