知乎周源微信_每周源代码36-PDC,BabySmash和Silverlight图表

知乎周源微信

知乎周源微信

First, let me remind you that in my new ongoing quest to read source code to be a better developer, Dear Reader, I present to you thirty-fifth in a infinite number of posts of "The Weekly Source Code."

首先,让我提醒您,在我不断追求的阅读源代码以成为更好的开发人员的过程中,亲爱的读者,我在无限数量的“每周源代码”中向您展示了三十五分

At the end of my crazy babies talk at PDC (Tips on how I prepared here) I had a big demo where I gave a URL to a Silverlight version of BabySmash that Grant and I built for the show. You can watch the presentation online if you like and fast forward to the end (around 60 minutes in) and see the big demo. Basically we had the Silverlight BabySmash talk via ADO.NET Data Services (I'll post in detail in the near future) to a SQL backend. Then I had an MVC reporting site that had some charts that would update as folks smashed. There were over 90,000 smashes during the talk.

PDC疯狂的婴儿谈话结束(有关如何在此处进行准备的提示),我做了一个大型演示,其中给出了指向我和格randint为节目制作的BabySmashSilverlight版本的URL。 如果愿意,您可以在线观看演示文稿,然后快速前进到结尾(大约60分钟),然后观看大型演示。 基本上,我们通过ADO.NET数据服务进行了Silverlight BabySmash讨论(我将在不久的将来详细介绍)到SQL后端。 然后,我有了一个MVC报告站点,其中包含一些图表,这些图表会随着人们的捣毁而更新。 谈话期间有超过90,000次粉碎。

The chart was updating as folks were smashing and we even had a Baby vs. Baby fight break out where the "A" people and the "J" people were going at it. Jeff Atwood started the bloodbath with this tweet as he urged on the overflow room along with Phil Haack. That man's trouble, I tell you.

该图表正在更新,因为人们正在捣毁,我们甚至在“ A”人和“ J”人要去的地方发生了一场婴儿与婴儿的战斗。 杰夫阿特伍德开始血洗这种鸣叫,他与沿溢出房间敦促菲尔哈克。 我告诉你那个男人有麻烦。

In the talk, I started out with a old .NET 1.1 chart from 2003 and showed it working, unchanged, in ASP.NET 3.5 SP1. It's just a nice reminder that things usually work just as they should. Then I upgraded it to a new .NET 4.0 ASP.NET Chart that I'll blog about in detail soon. Then, I showed the final site with the new Silverlight Charts. Tim Heuer has a great post on how to databind with these new charts.

在演讲中,我从2003年的旧.NET 1.1图表开始,并显示了它在ASP.NET 3.5 SP1中的运行情况,没有发生变化。 这只是一个很好的提醒,事情通常会按预期运行。 然后,我将其升级到新的.NET 4.0 ASP.NET图表,我将在稍后详细介绍该图表。 然后,我用新的Silverlight图表显示了最终站点。 蒂姆·休尔(Tim Heuer)在如何与这些新图表进行数据绑定方面发表精彩的文章

What's really cool about these Silverlight Charts is that they are Ms-PL (Microsoft Public License) which is a REALLY relaxed license. They're released as part of the larger Silverlight Toolkit up at http://www.codeplex.com/Silverlight. There's a bunch of controls in there. It is a preview release though, so things will change, and hopefully only get better:

这些Silverlight图表的真正酷点在于它们是Ms-PL(微软公共许可证) ,这是一个非常宽松的许可证。 它们作为较大的Silverlight工具包的一部分发布,网址http://www.codeplex.com/Silverlight 。 那里有很多控件。 不过,这是一个预览版,因此情况会有所变化,希望只会变得更好:

You can check out the Toolkit Chart samples and run them yourself here. It's nice that the chart sampler actually includes the source code within the Silverlight sample app. You can browse dozens of charts, then switch tabs and see the XAML and code-behind. This all lives in Microsoft.Windows.Controls.DataVisualization, the namespace (so far) for these controls.

您可以签出Toolkit Chart示例并在此处自行运行。 图表采样器实际上在Silverlight样本应用程序中包含了源代码,这很好。 您可以浏览许多图表,然后切换选项卡,并查看XAML和背后的代码。 所有这些都存在于Microsoft.Windows.Controls.DataVisualization(这些控件的名称空间)中(到目前为止)。

My reporting page included a Silverlight Chart and a Virtual Earth control to show where people were smashing from. The data is coming from the Astoria ADO.NET Data Service, which is easy to get to via either JavaScript or from Silverlight.

我的报告页面包括一个Silverlight图表和一个Virtual Earth控件,以显示人们从哪里砸了东西。 数据来自 Astoria ADO.NET数据服务,可以通过JavaScript或Silverlight轻松获取。

You add the charts to your Silverlight application by adding a reference to the assembly then assigning a namespace to them:

通过向程序集添加引用,然后为其分配名称空间,可以将图表添加到Silverlight应用程序中:

xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"

xmlns:charting =“ clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting; assembly = Microsoft.Windows.Controls.DataVisualization” xmlns:datavis =“ clr-namespace:Microsoft.Windows.Controls.DataVisualization; assembly = Microsoft.Windows.Controls.DataVisualization”

Them, lay them out. I've got two charts here, one column and one pie. I also did some stuff like the linear gradient for the background, etc. Still, pretty simple.

他们,将它们布置好。 我这里有两张图表,一栏和一个饼图。 我还做了一些诸如背景线性渐变之类的工作。

<charting:Chart Grid.Column="0" Height="300"  StylePalette="{StaticResource PaletteColors}" Style="{StaticResource ChartStyle1}" >
<charting:Chart.Background>
<LinearGradientBrush EndPoint="1.332,1.361" StartPoint="-0.107,-0.129">
<GradientStop Color="#FF6CA9D5"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</charting:Chart.Background>
<charting:Chart.Axes>
<charting:Axis x:Name="colAxis" Orientation="Vertical" AxisType="Linear" Minimum="0" Maximum="1"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:ColumnSeries x:Name="colSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
<charting:Chart Style="{StaticResource ChartStyle1}" Grid.Column="1" Height="300" StylePalette="{StaticResource PaletteColors}" >
<charting:Chart.Axes>
<charting:Axis Orientation="Vertical" AxisType="Linear" Maximum="100000"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:PieSeries x:Name="pieSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:PieSeries>
</charting:Chart.Series>
</charting:Chart>

We had a generic list of "CharacterSmash" data, as in List<CharacterSmash> that we'd be binding to the chart.

我们有一个“ CharacterSmash”数据的通用列表,就像我们要绑定到图表的List <CharacterSmash>一样。

private readonly List<CharacterSmash> characterData = new List<CharacterSmash>();

For the purposes of the presentation, I just polled for the data by making an asynchronous call to the service, then updating the bar and pie chart when it returned:

为了演示的目的,我只是通过异步调用服务来轮询数据,然后在返回时更新条形图和饼图:

private void RequestSmashCountData()
{
var container = new SmashMetricsContainer(new Uri("/BabySmashPDC/SmashService.svc", UriKind.Relative));

// Setup data query
var query = container.SmashCount;

// Start the async query
query.BeginExecute((asyncResult =>
{
// Get the matching results from the service call
var matches = query.EndExecute(asyncResult);
UpdateCharacterData(matches);
UpdateBarChart();
UpdatePieChart();
}), null);
}

See how the BeginExecute includes the "do this when you return" as a lambda? It's a tidy syntax.

看看BeginExecute如何包含“返回时执行此操作”作为lambda? 这是一个整洁的语法。

UPDATE: Tim Heuer emailed me to say that we're re-databinding the results. Instead, he wisely points out:

更新:Tim Heuer给我发了电子邮件,说我们正在重新绑定结果。 相反,他明智地指出:

"On the code where you are getting the smash metrics for the silverlight charts…I see that you are re-binding the data?

“在获得Silverlight图表粉碎指标的代码上……我看到您正在重新绑定数据吗?

If you bind to an observablecollection and just change that the chart should change with the data…including the Y-axis growth."

如果您绑定到一个可观察的集合,而只是更改图表应随数据而变化……包括Y轴的增长。”

Excellent point! Tim's right. The way I'm doing it works, but it's old school. If I just updated a ObservableCollection the chart would notice the changes and update itself.

好点! 蒂姆的权利。 我的工作方式行得通,但这是一门老派。 如果我只是更新了一个ObservableCollection,则图表会注意到这些变化并自行更新。

The updates are also clean, just databinding the results:

更新也很干净,只是对结果进行数据绑定:

private void UpdateBarChart()
{
var axis = (Axis)FindName("colAxis");
if (axis != null)
axis.Maximum = GetMaximumCount() + 50;

var colSeriesControl = (ColumnSeries)FindName("colSeries");
if (colSeriesControl != null)
colSeriesControl.ItemsSource = characterData;
}

All we had to do that was interesting at all was to make sure the Y-axis grew as the data grew.

我们要做的所有有趣的事情就是确保Y轴随着数据的增长而增长。

Who do we have to thank for this charting control? David Anson is who. Basically he was the Primary Dev and only Tester on the whole thing, and you should check out his blog for lots of inside information on charting in Silverlight.

我们必须感谢谁来进行此图表控制? 大卫·安森( David Anson)是谁。 基本上,他是主要开发人员,也是整个工作的唯一测试员,您应该查看他的博客,以获得有关Silverlight中图表绘制的大量内部信息

UPDATE: David had development help from Jafar Husain, Jeremy Sheldon, Delian Tchoparinov, Alex Gorev and Sean Boon and designer Mehdi Slaoui Andaloussi.

更新:David获得了Jafar Husain,Jeremy Sheldon,Delian Tchoparinov,Alex Gorev和Sean Boon以及设计师Mehdi Slaoui Andaloussi的开发帮助。

If making a complex chart seems daunting, David has ChartBuilder that you run now in your browser. It'll generate and show you the XAML you need for your chart.

如果制作复杂的图表似乎令人生畏, David拥有ChartBuilder您现在可以在浏览器中运行它。 它将生成并向您显示图表所需的XAML。

There was so much announced at PDC, I wanted to make sure that folks heard about this important release that might have been lost in the shuffle. Even better, the source is open so if you don't like it, change it.

PDC宣布了太多消息,我想确保人们听到了可能在改组中丢失的这一重要版本。 更好的是,源是开放的,因此,如果您不喜欢它,请进行更改。

Related Links

相关链接

翻译自: https://www.hanselman.com/blog/the-weekly-source-code-36-pdc-babysmash-and-silverlight-charting

知乎周源微信

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值