博客园_Ringgo Yao

Silverlight中使用MVVM(9)-绑定Enum类型数据

2012-05-22T02:55:00Z

Silverlight中使用MVVM(1)--基础

Silverlight中使用MVVM(2)—提高

Silverlight中使用MVVM(3)—进阶

Silverlight中使用MVVM(4)—演练

Silverlight中使用MVVM(5)-Command II

Silverlight中使用MVVM(6):AutoComplteBox的异步过滤

Silverlight中使用MVVM(7):DataGrid中触发Button的Click事件

Silverlight中使用MVVM(8)-使用AttachedProperty关闭ChildWindow

在实际开发程序的过程中,不乏处理枚举类型的情形, 比如在Code-Behind的方式下处理RadionButton是很容易的,但是如果在纯MVVM模式下通过绑定的方式

可能需要你花费不少的时间,本文提供MVVM模式下处理RadionButton与枚举类型绑定的一种方式:

首先看张效果图:

我们要做的事情很简单,就是将枚举的属性值绑定到RadioButton上,有了本系列前面几篇文章的基础,我相信建立一个MVVM的框架已经了然于心了,所以本篇的重点集中

在ViewModel和View中.

首先我们构建一个枚举类型,ViewModel代码如下:

 public class ShellViewModel :PropertyChangedBase,IShell  {      private SwapDuteType _currentSwapOffDuteType;      public SwapDuteType CurrentSwapOffDuteType      {          get { return _currentSwapOffDuteType; }          set { _currentSwapOffDuteType = value;              NotifyOfPropertyChange(() =>CurrentSwapOffDuteType );          }      }      public ShellViewModel()      {          _currentSwapOffDuteType = SwapDuteType.TM;      }   }  public enum SwapDuteType    {      TM, AM,PM    }

ViewModel中仅仅创建了一个枚举类型的属性,我们在View中放3个RadionButton:

<RadioButton  x:Name="tm" GroupName="t"                   IsChecked="{Binding CurrentSwapOffDuteType, ConverterParameter=TM, Converter={StaticResource EnumConverter}, Mode=TwoWay}"                    IsThreeState="False"    Content="全天" VerticalAlignment="Center" Margin="5,0"></RadioButton><RadioButton  x:Name="am"  IsThreeState="False"  GroupName="a"                 IsChecked="{Binding CurrentSwapOffDuteType, ConverterParameter=AM, Converter={StaticResource EnumConverter}, Mode=TwoWay}"                Content="上午"  VerticalAlignment="Center" Margin="5,0"></RadioButton><RadioButton x:Name="pm"  GroupName="p"                             IsChecked="{Binding CurrentSwapOffDuteType, ConverterParameter=PM, Converter={StaticResource EnumConverter}, Mode=TwoWay}"            IsThreeState="False"    Content="下午" VerticalAlignment="Center" Margin="5,0">

关键的地方在于我们用的Converter, 这里其实主要是关于Enum.Parse()的使用:

    public class EnumConverter : IValueConverter   {       public object Convert(object value, Type targetType, object parameter, CultureInfo culture)       {           if (value == null || parameter == null)               return value;            return value.ToString() == parameter.ToString();       }        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)       {           if (value == null || parameter == null)               return value;           return Enum.Parse(targetType, (String)parameter, true);       }   }

这样我们就完成了最基本的View/ViewModel的内容,本系列前几篇都是以RelayCommand的方式处理View与ViewModel的联系,大约1年前我写了关于介绍Caliburn的几篇入门文章,

此后一直关注这个框架,但是由于当时产品已经初有成效,所以并未在实际的项目中采用,而现在它的精简版本Caliburn.Mirco甚至超越了Caliburn本身,随着产品的稳定,我也开始着手改善产品的架构.

自然不会在原来的源代码上修改了,毕竟思想不完全一样,否则反而会得不偿失.目前是倾向于使用Caliburn.Mirco重构客户端的代码,至少目前主要用到的特性比如Conventions,Actions都是挺不错的.

因此本文源码中使用Cailburn.Mirco作为MVVM的框架,包括本系列的后续教程都会在此基础上,顺便会涉及该框架的一些使用.

源码下载:EnumInMVVM.rar

本文链接

Silverlight中使用MVVM(8)-使用AttachedProperty关闭ChildWindow

2012-04-30T07:41:00Z

Silverlight中使用MVVM(1)--基础

Silverlight中使用MVVM(2)—提高

Silverlight中使用MVVM(3)—进阶

Silverlight中使用MVVM(4)—演练

Silverlight中使用MVVM(5)-Command II

Silverlight中使用MVVM(6):AutoComplteBox的异步过滤

Silverlight中使用MVVM(7):DataGrid中触发Button的Click事件

在使用MVVM的应用程序过程中，有时候你会发现尽管一些代码在Codebehind方式非常方便，但是有时项目组为了统一开发流程，需要成员遵循严格的MVVM模式，你不得不去多了解一些知识，比如我博客中提到的Behavior的使用.

本文主要解决如何在MVVM模式下关闭一个ChildWindow，在Codebehind中只需要this.DialogResult = false这行代码就可以解决，本文给出一种使用

附加属性解决这个问题的思路:

    public static class ChildwindowDialogResult
    {
        public static readonly DependencyProperty DialogResultProperty =
            DependencyProperty.RegisterAttached("DialogResult", typeof(Boolean?), typeof(ChildwindowDialogResult),
                                                new PropertyMetadata(OnSetDialogResultCallback));
        public static void SetDialogResult(ChildWindow childWindow, Boolean? dialogResult)
        {
            childWindow.SetValue(DialogResultProperty, dialogResult);
        }
        public static Boolean? GetDialogResult(ChildWindow childWindow)
        {
            return childWindow.GetValue(DialogResultProperty) as Boolean?;
        }
        private static void OnSetDialogResultCallback(DependencyObject dependencyObject,
                                                      DependencyPropertyChangedEventArgs e)
        {
            var childWindow = dependencyObject as ChildWindow;
            if (childWindow != null) childWindow.DialogResult = e.NewValue as bool?;
        }
    }

定义了一个DialogResultProperty，关于附加属性的概念我就不多说了，如果不清楚，去MSDN上找一下。使用方法如下：

<controls:ChildWindow
    xmlns:AttachPropertyInMVVM="clr-namespace:AttachPropertyInMVVM" 
    x:Class="AttachPropertyInMVVM.Views.ChildView"
           
    AttachPropertyInMVVM:ChildwindowDialogResult.DialogResult="{Binding DialogResult,Mode=OneWay}"/>

将该属性绑定至ViewModel中定义的DialogResult属性就可以了，具体View与ViewModel如何交互，请参考下面的源码。

代码下载：AttachPropertyInMVVM

本文链接

Silverlight:如何打包Theme

2012-03-09T02:19:00Z

Silverlight企业级开发中,项目中会出现大量的Style资源文件,如何将这些XAML文件打包成dll,以满足动态改变Theme的需求呢?通过参考Toolkit的源码中有关Theme.dll

的实现方式,本文将详细叙述这一过程:

1.创建一个Silverlight Class Library,命名为BlackColorTheme.

2.创建需要的ResourceDictionary

这里创建了ButtonStyle.xaml,HyperlinkButton.xaml2个文件,Build Action设置为Resource

以ButtonStyle为例,我们设置点简单的样式:

<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Style TargetType="Button" x:Key="DefaultButtonStyle">        <Setter Property="Background" Value="Black"></Setter>            </Style>    <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}"/></ResourceDictionary>

3.创建一个Theme.xaml,将我们的样式文件引入

Build Action仍需要设置为Resource,Theme.xaml的内容如下:

<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <ResourceDictionary.MergedDictionaries>        <ResourceDictionary Source="/BlackColorTheme;component/ButtonStyle.xaml"></ResourceDictionary>        <ResourceDictionary Source="/BlackColorTheme;component/HyperlinkButton.xaml"></ResourceDictionary>    </ResourceDictionary.MergedDictionaries></ResourceDictionary>

4.创建一个BlackColorTheme.cs文件,继承System.Windows.Controls.Theming.Toolkit.Theme类

public class BlackColorTheme : Theme{    public static Uri ThemeResourceUri = new Uri("/BlackColorTheme;component/Theme.xaml", UriKind.RelativeOrAbsolute);    public BlackColorTheme()        : base(ThemeResourceUri)    {     }    public static bool GetIsApplicationTheme(Application app)    {        return GetApplicationThemeUri(app) == ThemeResourceUri;    }     public static void SetIsApplicationTheme(Application app, bool value)    {        SetApplicationThemeUri(app, ThemeResourceUri);    }  }

到这一步,我们已经创建完成了将松散的XAML文件打包成dll,具体如何使用创建好的主题,如果不熟悉这方面的操作,请参考我的这篇文章:Silverlight主题设置.

本文链接

Silverlight控件-Slider

2012-03-06T03:36:00Z

本篇主要分享关于Slider应用上的一点问题, 相信你看完演示后,已经知道本文的意图了.

在实际开发中,我们需要Slider根据我们设置的SmallChange进行ValueChange.SDK的Slider即使设置了SmallChange属性,

但是在拖动Thumb时,仍会显示实际的Value.显然不能够满足我们的需求,这就需要我们手动去修改Slider.

我相信最初使用Slider的人会和我遇到一样的问题,希望本篇的做法能提供给各位一些思路.

我的做法重写OnValueChanged事件,直接贴出改造后的代码:

  public class RoundSlider : Slider, INotifyPropertyChanged   {    public event PropertyChangedEventHandler PropertyChanged;    public void NotifyPropertyChanged(string propertyName)    {        if (PropertyChanged != null)        {            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));        }    }       public double RoundValue    {        get { return (SmallChange == 0 ? Value : Math.Round(Value / SmallChange) * SmallChange); }    }    bool _busy=false;    double _discreteValue;       protected override void OnValueChanged(double oldValue, double newValue)    {        if (!_busy)        {            _busy = true;            if (SmallChange != 0)            {                double newDiscreteValue = Math.Round(newValue / SmallChange) * SmallChange;                if (newDiscreteValue != _discreteValue)                {                    Value = newDiscreteValue;                    base.OnValueChanged(_discreteValue, newDiscreteValue);                    _discreteValue = newDiscreteValue;                }            }            else            {                base.OnValueChanged(oldValue, newValue);            }            _busy = false;        }        NotifyPropertyChanged("RoundValue");    }}

通过RoundValue属性得到我们期望的结果,具体的逻辑也很简单,希望本篇能提供给需要的朋友小小的帮助.

本文链接

Silverlight中使用MVVM(7):DataGrid中触发Button的Click事件

2012-02-02T02:45:00Z

Silverlight中使用MVVM(1)--基础

Silverlight中使用MVVM(2)—提高

Silverlight中使用MVVM(3)—进阶

Silverlight中使用MVVM(4)—演练

Silverlight中使用MVVM(5)-Command II

Silverlight中使用MVVM(6):AutoComplteBox的异步过滤

毕业后忽然觉得什么地方都要用钱, 这半年除了工作上,业余时间做了些小活,因此没有什么时间静下心来分享一些东西了,生活压力山大啊.

这篇文章分享MVVM中常见的一个问题,相信在实际运用MVVM的朋友一定会遇到这种问题.

   <sdk:DataGridTemplateColumn Header="功能"  Width="Auto">     <sdk:DataGridTemplateColumn.CellTemplate>         <DataTemplate >             <StackPanel Orientation="Horizontal">                 <Button Content="删除" Margin="10,0" Command="{Binding ShowCommand}"  Height="24"                         HorizontalAlignment="Left" VerticalAlignment="Center" >                 </Button>             </StackPanel>         </DataTemplate>     </sdk:DataGridTemplateColumn.CellTemplate>  </sdk:DataGridTemplateColumn>

在CellTemplate中的Button与ViewModel中的Command属性绑定时.你会发现Button无法触发这个事件

如何处理这种情况呢,我的做法是这样的:

   public class DataContextProxy:TriggerAction<DependencyObject>  {      protected override void Invoke(object parameter)      {          var parent = this.AssociatedObject as DependencyObject;          var fe = this.AssociatedObject as FrameworkElement;          while (parent != null)          {              if (parent.GetType() == typeof(DataGrid))              {                  var context = parent as DataGrid;                  fe.DataContext = context.DataContext;                  break;              }              parent = VisualTreeHelper.GetParent(parent) as DependencyObject;          }       }  }    

继承一个TriggerAction,具体的原理就不叙述了,Button引用这个TriggerAction ,不要忘了System.Windows.Interactivity这个dll噢^^

      <Button Content="删除" Margin="10,0" Command="{Binding ShowCommand}"  Height="24"             HorizontalAlignment="Left" VerticalAlignment="Center" >              <i:Interaction.Triggers>                  <i:EventTrigger>                      <local:DataContextProxy/>                  </i:EventTrigger>              </i:Interaction.Triggers>      </Button>

这样就可以了.另外一种方式可以参考:stackOverFlow.如何取舍就由各位自己分析比较吧.

示例下载:DataGridWithButton.rar

本文链接

Behavior:FocusOnEvent

2011-12-08T03:42:00Z

最近一段时间,被各种事情困扰,博客一直没有更新,今天分享一个简单的技巧.

加载页面时,需要Focus某个TextBox,在CodeBehind下这很容易实现,如果采用MVVM模式时,这是与ViewModel无关的,但是可以用Behavior实现.

这里需要用到TargetedTriggerAction<T>,这个T需要是一个Control,因为这样才可以Focus:

   public class FocusOnEvent : TargetedTriggerAction<Control>     {       protected override void Invoke(object o)       {           HtmlPage.Plugin.Focus();           Target.Focus();       }   }

我们可以给它添加一个DefaultTrigger,在Loaded事件中进行触发

[DefaultTrigger(typeof(FrameworkElement), typeof(EventTrigger), "Loaded")]

现在Behavior定义好了,在UI上引用该Behavior

<i:Interaction.Triggers>    <i:EventTrigger>        <local:FocusOnEvent TargetName="textBox1"/>    </i:EventTrigger></i:Interaction.Triggers>

这样当页面加载成功后,textBox1就会被设为默认焦点的Control.

这篇就到这里,希望对你有所帮助.

本文链接

OOB模式下Exit事件的处理

2011-09-05T06:19:00Z

在Silverlight中,当用户退出程序时,我们一般需要在Exit事件中保存用户的相关资料,本文主要讲述在OOB模式下的解决方案.

按照一般的思路,在程序退出时,我们会在Exit事件中与服务器交互,如下代码:

  private void Application_Exit(object sender, EventArgs e)  {    TestClient proxy=new TestClient();    proxy.SaveWorkCompleted += (obj,arg) => { };    proxy.SaveWorkAsync();  }

但是,调试下来你会发现,根本没有执行proxy.SaveWorkCompleted,经过查找资料确认在Exit()中是不支持WCF的.见MSDN:

经过一番搜索,在OOB模式下,我们可以用Closing方式进行处理:

public partial class MainPage : UserControl{    public MainPage()    {        InitializeComponent();        if(App.Current.IsRunningOutOfBrowser)        {            App.Current.MainWindow.Closing += MainWindowClosing;        }    }     private bool _isLoginOut=false;     void MainWindowClosing(object sender, System.ComponentModel.ClosingEventArgs e)    {        if(!_isLoginOut)        {            e.Cancel = true;            TestClient proxy = new TestClient();            proxy.SaveWorkCompleted += (obj, arg) =>                                           {                                               _isLoginOut = true;                                               App.Current.MainWindow.Close();                                           };            proxy.SaveWorkAsync();        }    }}

当用户点击OOB窗口的关闭按钮时,会首先触发Closing事件,执行时首先会取消当前的Exit事件,即e.Cancel=true,当WCF执行完后,调用App.Current.MainWindow.Close()关闭程序

不过用这种方式,你需要提升OOB的权限,否则在执行App.Current.MainWindow.Close()时会报出安全异常

提升OOB权限,意味着需要对xap进行签名,用户安装时将看到这个界面,@~@.没办法,上帝给你开了一扇门,也会关个门的.

那么还有一种情况,是调用ChildWindow或者导航时,导致Closing不触发,具体的情景我就不叙述了.关键的代码是将ManinWindow保存

public static object _mainFrame;public MainPage(){    InitializeComponent();        if(App.Current.IsRunningOutOfBrowser)    {        _mainFrame = App.Current.MainWindow;        App.Current.MainWindow.Closing += MainWindowClosing;    }}

尽管Silverlight5 RC已经出来,作为从SL1.0开始跟进的开发者,依然觉得SL还有许多地方可以再完善一点,限制再少一点.

本文链接

Silverlight-开源VerticalMenu控件

2011-08-31T01:47:00Z

最近需要用Silverlight实现一个类似Web的悬浮菜单,在网上没有找到需要的资源,本来准备自己实现一个,恰巧看到中国人寿的Silverlight平台上的菜单与自已的想法大致吻合,于是决定参考其做法.

因为中国人寿的Silverlight项目采用了动态加载的方式,在html页面无法直接找到xap地址,要先用Spy找到它的xap包, 通过视觉树的方式,找到VerticalMenu,这样就可以快速定位到该控件所使用的dll了

反编译出dll后,分析一下代码,发现和自己预想采用TranslateTransform的思路是一致的, 具体做法通过MouseEnter/MouseLeave事件控制容器StankPanel的相对坐标.

但是由于它在控件逻辑中将样式写死,无法直接使用, 所以自己将反编译的代码改动了下,可以进行样式设置.具体的代码就不贴了,熟悉Silverlight自定义控件做法的人很快就能看明白.将其发布出来,供需要的朋友参考下,或许会有帮助.不过示例没有采用MVVM的方式去做,同时希望感兴趣的朋友时间充裕的前提下,能对其进一步扩展,使其支持其它三个方向的悬浮.

代码下载:CustomeVerticalMenu.rar

本文链接

简单的CircularLoader制作

2011-08-08T06:01:00Z

年初曾写过一篇如何用Blend制作简单的加载动画,微软提供Blend这个套件,确实大大方便了程序员处理一些的简单的美工设计问题,这篇文章将简要的描述

如何使用Blend制作一个Circular Loader的简要步骤,没有太深奥的编程知识,只要对Blend有所熟悉,就能按照下面的流程简单的进行处理.

首先看看我们制作的效果图:

这张效果图是不是做Silverlight的朋友很熟悉呢?接下来详细讲解制作流程

1.创建一个UserControl,命名为userControl,为了能自适应浏览器,将根元素Grid替换为ViewBox.

2.添加一个椭圆到舞台中,将其转换为PathListBox

3.在PathListBox中添加8个Ellipse,XAML代码如下所示:

    <Ellipse x:Name="ellipse1" Fill="{Binding Foreground, ElementName=userControl}" Opacity="0.3" Height="20" Width="20"/>

4.设置PathListBox的属性,这里如果对PathListBox不熟悉,建议先看下相关资料.

5.添加一个StoryBoard,命名为LoadAnimation,这里作为简单的介绍,只对PathListBox中的8个Ellipse的Visible属性进行修改,并将LoadAnimation的RepeatBehavior改为Forever

6.动画完成后,添加一个ControlStoryboardAction至UserControl中.

这样就可以运行后就可以看到效果了.不过当你点击PathListBox时,会发现它的视觉状态不是那么美好.

7进入其模板 8.对Selected状态进行设置即可.

<!--<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>—>

这样,这个Circular Loader就制作好了,使用很简单,放在MainPage中看看效果:

<my:PathListBox HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="pathListBox1" Foreground="BlueViolet" />

因为不是讲Blend的基础运用,所以文中很多地方的细节都是一笔带过,文章开头已经说明,需要对Blend有一定基础熟悉程度,虽然仅仅是一个Circular Loader,也用到了Silverlight中Grid,ViewBox的布局,基础的动画

概念等,示例的动画效果不是那么流畅,可以根据自己的要求修改调整,那么在源码中,还有一个通过Canvas进行布局的,做法则更简单,给有兴趣的朋友参考下.

下载地址:CircularLoader.rar

本文链接

DataTrigger在DataGrid中的简单应用

2011-08-01T02:23:00Z

大约一个月没写新的博文,最近一阵子确实很忙,刚过去的7月,或许是人生中又一个转折点,让我对未来

在时间的积累中增加了几分期待。这篇文章主要简单介绍下DataTrigger这个概念，熟悉WPF的人应该对这个

再熟悉不过了，在Silverlight中应用DataTrigger确实不多用，今天这篇文章简单的介绍一下在DataGrid中

使用DataTrigger。

当我们使用DataGrid绑定到数据源时，一般需要进行数据的呈现方式进行额外的修改，比如在下图中，

我们将类型User绑定到DataGrid中,如果我们需要对其中的IsManger呈现方式以更加友好化的呈现方式去做,

比如当False时,显示为General,为True时,显示Advanced,一般的做法是用Converter去进行值转换,但是这种方式的缺

点在于,一次只能对一个值进行转换,比如说当我需要General时,字体显示为红色,随着这种需求的增加,不得不为每个转换写

一个Converter,而且类似此类的Converter重用性都不是很好,不是一种好的做法.

那么在这种情况下,我们可以使用DataTrigger进行处理,数据触发器可以由任意的.NET类型触发,而不仅仅由依赖属性触发

那么借助DataTrigger和Blend里的ChangePropertyAction,我们就可以省去写Converter的过程,一旦熟练,你会越来越倾

向用这样的方式做数据呈现

关键的XAML代码:

<sdk:DataGridTemplateColumn Width="*" Header="Leval"><sdk:DataGridTemplateColumn.CellTemplate>    <DataTemplate>        <StackPanel>        <TextBlock x:Name="txtLeval"             Text="No Leval Information" HorizontalAlignment="Center" VerticalAlignment="Center"/>        <i:Interaction.Triggers>            <ei:DataTrigger Binding="{Binding IsManager}" Value="True">                <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Text" PropertyName="Text" Value="Advanced"/>                    <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Foreground" PropertyName="Foreground"  Value="Red"/>                        </ei:DataTrigger>            <ei:DataTrigger Binding="{Binding IsManager}" Value="False">                <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Text" PropertyName="Text" Value="General"/>            </ei:DataTrigger>        </i:Interaction.Triggers>        </StackPanel>    </DataTemplate></sdk:DataGridTemplateColumn.CellTemplate>     </sdk:DataGridTemplateColumn>

那么关于DataTrigger,再延伸一点内容,上面的XAML表示当IsManager为true/false时的属性更改,相当于逻辑"或",比如,使用下面的XAML代码:

<ei:DataTrigger Binding="{Binding IsManager}" Value="True">    <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Text" PropertyName="Text" Value="Advanced"/>        <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Foreground" PropertyName="Foreground"  Value="Red"/>    </ei:DataTrigger>   <ei:DataTrigger Binding="{Binding IsManager}" Value="True">      <ei:ChangePropertyAction TargetObject="{Binding ElementName=txtLeval}" TargetName="Foreground" PropertyName="Foreground"  Value="Blue"/>   </ei:DataTrigger>

当有多个触发器有相互冲突的Setter时,将由最后一个获胜,在上面的情况中,Advanced最终显示为蓝色,而不是红色.

这篇文章主要介绍了DataTrigger的一般性概念,具体操作Blend配合使用ChangePropertyAction就不详细的说明了,希望这篇文章能够提供给做Sl的朋友一些思路.

代码下载:DataTriggersInDataGrid.rar

本文链接