Silverlight 节能计算器

• 下载源代码 - 33.2 KB

引言

我是 Silverlight 的忠实粉丝，一直想在 SetPower 网站上展示它。我们决定创建一个计算器，让那些正在考虑 SetPower 的人可以用它来估计可以为他们节省的能源量。理想情况下，我们希望有一组滑块，人们可以使用这些滑块进行调整以匹配他们的环境（例如，计算机瓦数/电脑数量/能源费率，以及他们希望电脑进入睡眠状态的时间百分比）。

您可以在这里看到它。

当然，我考虑过使用 DOM 脚本作为此类应用程序的可能语言，但是做动态图表之类的事情非常耗时（再加上我花了职业生涯的大部分时间来突破 JavaScript 的界限，我非常讨厌用它编写代码）。

我也是 MVVM 模式的忠实粉丝。事实上，SetPower Enterprise Manager 是基于 WPF MVVM 的。最初，我发现坚持这种模式很困难（尤其是对于复杂的 UI），但是，像其他所有事情一样，经过一些经验之后，你就能弄清楚这种模式中的模式，可以这么说。

CalculatorView – 这是由 Silverlight 实例化的 RootVisual。它是纯 XAML，后台代码仅包含以下内容

public partial class CalculatorView : UserControl
{
    public CalculatorView()
    {
        InitializeComponent();
        txtWatts.TextChanged += new TextChangedEventHandler(txt_TextChanged);

        txtComputerCount.TextChanged += new 
        TextChangedEventHandler(txt_TextChanged);
    } 

    void txt_TextChanged(object sender, TextChangedEventArgs e)
    {
        BindingExpression be = 
          (sender as TextBox).GetBindingExpression(TextBox.TextProperty);
        be.UpdateSource();
    } 
}

这段代码是必要的，只是为了改变 TextBox 的绑定行为。在 Silverlight 中，TextBox 的绑定更新会在 TextBox 失去焦点时触发。在我的例子中，我希望它在用户按下键后立即发生，以便他们可以立即看到更改的影响。（最初，我没有这样设置，但是当我把它给我的妻子测试时，她更改了瓦数，但从未离开 TextBox，然后想知道为什么更多的瓦数没有增加她的节省。）我最初学习 MVVM 时遇到的一个困难是，View 中的后台代码是可以的，只要该代码仅与 View 相关。这里更简洁的实现是从 Textbox 派生的控件。

ViewModel 在 XAML 本身中被实例化并设置为数据上下文，它具有属性，这些属性会为 Wattage/SleepPercentage/Computer Count/Computer Type 引发 INotifyPropertyChanged，并绑定到屏幕上的四个滑块。此外，一些装饰，如笔记本电脑/台式机/高性能台式机的图标是绑定到 ViewModel 上的属性的切换按钮。

我还对一些属性（PercentSleep 和 EnergyRate）实现了舍入，以避免在移动滑块时 UI 中出现很长的十进制字符串。我可能应该将舍入作为 IValueConverter 来完成，但相反，我只是在属性设置器中执行了该操作。

这是一个非常简单的应用程序，我可以在一个工作日内完成，但是有一些事情减慢了我的速度。

• 图表的样式 – 我想要一个更简洁的饼图外观。通常，这种事情在 Blend 中是微不足道的，但是在选择“编辑模板”->“编辑副本”后，我得到了 Blend 中的一个空模板。最后，我从 Toolkit 源代码中提取了 XAML。 这样做之后，我对图表本身和图例的格式进行了一些调整。
• 选择颜色 – 我在各种博客上找到了几个关于如何执行此操作的示例，但是它们都不起作用。 他们引用的 StylePalette 对象在 2009 年 10 月的库中不存在。 最终，我发现 StylePalette 已被重命名为 Palette，并且 Pallete 包含一个 ResourceDictionaryCollection。

<charting:Chart x:Name="energyChart" 
          Margin="0,8,7,0" HorizontalAlignment="Right" 
          Width="276" Style="{StaticResource PieChartTemplate}" 
          BorderBrush="{x:Null}" >
    <charting:PieSeries.Palette> 
    <datavis:ResourceDictionaryCollection> 
    <ResourceDictionary>  
    <Style x:Key="DataPointStyle" TargetType="Control"> 
    <Setter Property="Background" Value="{StaticResource  PurpleHighlight}"/>  
    </Style>  
    </ResourceDictionary>  
    <ResourceDictionary>
    <Style x:Key="DataPointStyle" TargetType="Control"> 
    <Setter Property="Background" 
       Value="{StaticResource GreenHighlight}"/></Style>
    </ResourceDictionary>
    </datavis:ResourceDictionaryCollection>
    </charting:PieSeries.Palette>
    </charting:PieSeries> 
</charting:Chart>

• 货币格式 – 据说，您应该能够在图表的 Palette 中指定货币格式。我无法让它工作，而是使用了一个名为 EnergyCost 的小型自定义类来处理它，该类保存数据并为绑定到图表提供一些标签。 在我的例子中，我希望自定义文本出现在图例中，以指示节省了多少钱（或运行计算机的成本），以及格式化的货币。

历史

• 11-24-09：初始提交。