Silverlight自定义模板控件中不能绑定到目标数据源的问题？-小心DataContext陷阱
在Silverlight的世界里，数据绑定无疑是一个非常迷人的功能，通过这个功能我们可以使用XAML标记或CLR代码来连接到特定的数据源，内部SIilverligth核心帮助我们完成数据类型之间的转换，例如我们如果有一组ImageSource源，那么我们通过视觉元素Image的Source=“{Binding }”可以直接得到显示的图片。
不过笔者在最近的一个设计中使用了一个Silverlight自定义的ToggleButton模块控件，在按照通常的方式添加了相应的模板部件和依赖属性后，能绑定到某些属性，而另一个依赖属性并没有按照我的预想的进行工作，通过再三的反复的实验，才发现是掉入了DataContext陷阱中。
现在我们来具体看一下我们的我们自定义的模板控件，其实这个模板控件很简单，在启动Visual Studio 2010后，新建一个Silverlight项目，然后在添加新项中选择SIilverlight模板控件，如图所示：
这样我们就添加了一个自定义的目标控件，在这儿VS自动为我们的项目添加了一个*.cs的代码文件和一个*.xaml的字典文件，在.cs文件中我们可以定义自已的逻辑，而在字典文件中定义控件的样式集。
目的：我们要在模板控件中绑定两个属性，这两个属性是为了暴露给外部的使用都而设计的。为了利用自动更新的机制我们定义这两个属性为依赖属性。这两个依赖属性也充当了两个功能，一个是将绑定到外部的数据源，还有一个功能就是绑定到样式的元素属性。
1、定义两个依赖属性：一个ImageSource和一个bool.这两个依赖属性的定义如下，稍后我们会用到它们。
代码
public static readonly DependencyProperty CardPhotoProperty;
public static readonly DependencyProperty IsBackProperty;
static CardToggleButton()
{
CardPhotoProperty = DependencyProperty.Register("CardPhotoSource", typeof(ImageSource), typeof(CardToggleButton), new PropertyMetadata(null, OnPhotoChanged));
IsBackProperty = DependencyProperty.Register("IsBack", typeof(Visibility), typeof(CardToggleButton), new PropertyMetadata(Visibility.Collapsed,OnBackChanged));
}
//是?否?显?示?背?景°
public Visibility IsBack
{
get { return (Visibility)GetValue(IsBackProperty); }
set { SetValue(IsBackProperty, value); }
}
//前°景°图?
public ImageSource CardPhotoSource
{
get { return (ImageSource)GetValue(CardPhotoProperty); }
set { SetValue(CardPhotoProperty, value); }
}
2、为了在样式模板中绑定这两个属性，我们还要这两个依赖属性设置到上下文，这就是DataContext了，在代码的构造器中加入以下的代码：
3、现在设置样式模板的绑定：同样中这儿我们使用了绑定上下文，将这两个依赖属性分别绑定到Image的Source属性上和Visibility上。样式代码如下：
Code
4、现在做一些其他的诸如在*.cs文件中定义模板部件和其他的逻辑，为了使用这个部件，需要定义一个重写OnApplyTemplate()虚方法，相应的代码如下：
代码
public override void OnApplyTemplate(){ base.OnApplyTemplate();LayoutRoot = GetTemplateChild("layoutRoot") as Grid;if (IsBack==Visibility.Collapsed){ LayoutRoot.MouseEnter += (o, e) =>{ VisualStateManager.GoToState(this, "MouseEnter", true);}; LayoutRoot.MouseLeave += (o, e) =>{ VisualStateManager.GoToState(this, "MouseLeave", true); };LayoutRoot.MouseLeftButtonDown += new MouseButtonEventHandler(CardToggleButton_MouseLeftButtonDown); }else LayoutRoot.MouseLeftButtonDown -= new MouseButtonEventHandler(CardToggleButton_MouseLeftButtonDown); }
5、在外部使用这个模板控件，并使用绑定。
通过实验发现这个CardPhotoSource并不能按预想的那样绑定到了源的ImageSource上，只是一个NULL值的绑定【实际上它是绑定到了CardToggleButton类的自己的CardPhoto依赖属性，亦即绑定到了自身】，所以不能图像并没有显示出来。
经过分析Silverlight对DataContext绑定采用的是就近原则，而模板设计中我们在构造器中把自身添加到了绑定上下文中，所以在CardPhotoSource绑定到了自身，故不能得到源的属性。
所以这儿的绑定只是绑定的上下文是自身的DataContext,而不是父元素的DataContext中。所以为了使用绑定上下文对象，我们必须改变绑定上下文，让他们各自绑定到自己合适的上下文中，即是如下所示：
1、 模板控件中的构造器：去除DataContext=this;即构造器如下：
public CardToggleButton()
{
this.DefaultStyleKey = typeof(CardToggleButton);
}
2、在模板控件的定义中的进行降级调用：
经过这样的改动，现在所有的绑定都能进行正常的绑定了。笔者在几大的搜索中都没有找到相关的解决方法，所以在此贴出来给开发中遇到此类问题的同业者们一个提示，免得再走冤路。总之使用DataContext要注意，一定要记住“就近原则”。
完整的模板定义：
CardToggleButton.cs
<Application 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" xmlns:FightsLandlordApp_ViewModel="clr-namespace:FightsLandlordApp.ViewModel" xmlns:local="clr-namespace:FightsLandlordApp" xmlns:control="clr-namespace:FightsLandlordApp.Controls"
xmlns:card="clr-namespace:FightsLandlordApp.Models" xmlns:converter="clr-namespace:FightsLandlordApp.Converters"
xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.SampleDataSource"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="FightsLandlordApp.App"
>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
<converter:ImageSourceToImageSource x:Key="imageSourceConverter"/>
<FightsLandlordApp_ViewModel:CardViewModel x:Key="CardViewModelDataSource" d:IsDataSource="True">
<FightsLandlordApp_ViewModel:CardViewModel.TotalCards>
<card:Card CardNo="1" CardRank="Rank3" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades3.png"/>
<card:Card CardNo="2" CardRank="Rank4" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades4.png"/>
<card:Card CardNo="3" CardRank="Rank5" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades5.png"/>
<card:Card CardNo="4" CardRank="Rank6" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades6.png"/>
<card:Card CardNo="5" CardRank="Rank7" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades7.png"/>
<card:Card CardNo="6" CardRank="Rank8" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades8.png"/>
<card:Card CardNo="7" CardRank="Rank9" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades9.png"/>
<card:Card CardNo="8" CardRank="Rank10" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades10.png"/>
<card:Card CardNo="9" CardRank="RankJ" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spadesJ.png"/>
<card:Card CardNo="10" CardRank="RankQ" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spadesQ.png"/>
<card:Card CardNo="11" CardRank="RankK" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spadesK.png"/>
<card:Card CardNo="12" CardRank="RankA" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spadesA.png"/>
<card:Card CardNo="13" CardRank="Rank2" CardSuit="Spades" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/spades2.png"/>
<card:Card CardNo="14" CardRank="Rank3" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts3.png"/>
<card:Card CardNo="15" CardRank="Rank4" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts4.png"/>
<card:Card CardNo="16" CardRank="Rank5" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts5.png"/>
<card:Card CardNo="17" CardRank="Rank6" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts6.png"/>
<card:Card CardNo="18" CardRank="Rank7" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts7.png"/>
<card:Card CardNo="19" CardRank="Rank8" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts8.png"/>
<card:Card CardNo="20" CardRank="Rank9" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts9.png"/>
<card:Card CardNo="21" CardRank="Rank10" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts10.png"/>
<card:Card CardNo="22" CardRank="RankJ" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/HeartsJ.png"/>
<card:Card CardNo="23" CardRank="RankQ" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/HeartsQ.png"/>
<card:Card CardNo="24" CardRank="RankK" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/HeartsK.png"/>
<card:Card CardNo="25" CardRank="RankA" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/HeartsA.png"/>
<card:Card CardNo="26" CardRank="Rank2" CardSuit="Hearts" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Hearts2.png"/>
<card:Card CardNo="27" CardRank="Rank3" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds3.png"/>
<card:Card CardNo="28" CardRank="Rank4" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds4.png"/>
<card:Card CardNo="29" CardRank="Rank5" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds5.png"/>
<card:Card CardNo="30" CardRank="Rank6" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds6.png"/>
<card:Card CardNo="31" CardRank="Rank7" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds7.png"/>
<card:Card CardNo="32" CardRank="Rank8" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds8.png"/>
<card:Card CardNo="33" CardRank="Rank9" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds9.png"/>
<card:Card CardNo="34" CardRank="Rank10" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds10.png"/>
<card:Card CardNo="35" CardRank="RankJ" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/DiamondsJ.png"/>
<card:Card CardNo="36" CardRank="RankQ" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/DiamondsQ.png"/>
<card:Card CardNo="37" CardRank="RankK" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/DiamondsK.png"/>
<card:Card CardNo="38" CardRank="RankA" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/DiamondsA.png"/>
<card:Card CardNo="39" CardRank="Rank2" CardSuit="Diamonds" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Diamonds2.png"/>
<card:Card CardNo="40" CardRank="Rank3" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs3.png"/>
<card:Card CardNo="41" CardRank="Rank4" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs4.png"/>
<card:Card CardNo="42" CardRank="Rank5" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs5.png"/>
<card:Card CardNo="43" CardRank="Rank6" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs6.png"/>
<card:Card CardNo="44" CardRank="Rank7" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs7.png"/>
<card:Card CardNo="45" CardRank="Rank8" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs8.png"/>
<card:Card CardNo="46" CardRank="Rank9" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs9.png"/>
<card:Card CardNo="47" CardRank="Rank10" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs10.png"/>
<card:Card CardNo="48" CardRank="RankJ" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/ClubsJ.png"/>
<card:Card CardNo="49" CardRank="RankQ" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/ClubsQ.png"/>
<card:Card CardNo="50" CardRank="RankK" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/ClubsK.png"/>
<card:Card CardNo="51" CardRank="RankA" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/ClubsA.png"/>
<card:Card CardNo="52" CardRank="Rank2" CardSuit="Clubs" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/Clubs2.png"/>
<card:Card CardNo="53" CardRank="RankB" CardSuit="Other" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/JokerB.png"/>
<card:Card CardNo="54" CardRank="RankR" CardSuit="Other" CardState="All" CardPhoto="/FightsLandlordApp;Component/Images/JokerR.png"/>
</FightsLandlordApp_ViewModel:CardViewModel.TotalCards>
</FightsLandlordApp_ViewModel:CardViewModel>
<SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
<LinearGradientBrush x:Key="StrokeBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#B2FFFFFF" Offset="0.657"/>
<GradientStop Color="#666179D8" Offset="1"/>
<GradientStop Color="#7E93A4E4"/>
<GradientStop Color="#8DB3BFEC" Offset="0.459"/>
<GradientStop Color="#A9ECEFFA" Offset="0.189"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="cardBackBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5F65C4" Offset="0"/>
<GradientStop Color="#66FFFFFF" Offset="0.481"/>
<GradientStop Color="#F5686EC7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TransparentBackStyle" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#72FFFFFF" Offset="0"/>
<GradientStop Color="#19FFFFFF" Offset="0.485"/>
<GradientStop Color="#72FFFFFF" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="backBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF8EE493" Offset="0"/>
<GradientStop Color="#FF95E59A" Offset="1"/>
<GradientStop Color="#FFC1EFC4" Offset="0.485"/>
</LinearGradientBrush>
<Style x:Key="TextStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="26.667"/>
<Setter Property="FontFamily" Value="Arial Black"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextTrimming" Value="None"/>
<Setter Property="Margin" Value="0,0,0,5"/>
</Style>
<LinearGradientBrush x:Key="CardNormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#00FFFFFF" Offset="0" />
<GradientStop Color="#33FFFFFF" Offset="0.5" />
<GradientStop Color="#33AAAAAA" Offset="1" />
</LinearGradientBrush>
<Style x:Key="PlayerInfoStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="5" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="Background" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="#72000000" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#72000000" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="message">
<DiscreteObjectKeyFrame KeyTime="0" Value="没有玩家"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="message" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" To="#724172C2" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#725B8AD6" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ColorAnimation Duration="0" To="#19698FCC" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="message">
<DiscreteObjectKeyFrame KeyTime="0" Value="已经加入"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="已经加入"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="message">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" Opacity="0.6" />
</Border.Effect>
<Rectangle x:Name="rectangle" StrokeThickness="2" RadiusY="5" RadiusX="5" Stroke="{StaticResource StrokeBrush}" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#72FFFFFF" Offset="0"/>
<GradientStop Color="#19FFFFFF" Offset="0.485"/>
<GradientStop Color="#72FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ContentPresenter />
<TextBlock x:Name="message" Text="点击加入游戏" Foreground="#FF211AF3" FontSize="16" VerticalAlignment="Bottom" Margin="0,0,0,30" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ItemsPanelTemplate x:Key="ItemsPanelStyle">
<local:CardsPanel IsHorizontal="True">
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext" Duration="0:0:0.3">
<ei:FluidMoveBehavior.EaseY>
<CircleEase EasingMode="EaseOut"/>
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<CircleEase EasingMode="EaseIn"/>
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</local:CardsPanel>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="ItemsVerticalPanelStyle">
<local:CardsPanel >
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.3" Tag="DataContext">
<ei:FluidMoveBehavior.EaseY>
<CircleEase EasingMode="EaseOut"/>
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<CircleEase EasingMode="EaseIn"/>
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</local:CardsPanel>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="TotalItemsPanelStyle">
<local:TotalViewPanel>
<i:Interaction.Behaviors>
<ei:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.3" Tag="DataContext">
<ei:FluidMoveBehavior.EaseY>
<CircleEase EasingMode="EaseOut"/>
</ei:FluidMoveBehavior.EaseY>
<ei:FluidMoveBehavior.EaseX>
<CircleEase EasingMode="EaseIn"/>
</ei:FluidMoveBehavior.EaseX>
</ei:FluidMoveBehavior>
</i:Interaction.Behaviors>
</local:TotalViewPanel>
</ItemsPanelTemplate>
<Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="layoutRoot">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="CardToggleButtonStyle">
<Grid>
<control:CardToggleButton IsBack="Collapsed" CardPhotoSource="{Binding CardPhoto}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="CardToggleButtonVerticalStyle">
<Grid>
<control:CardToggleButton IsBack="Visible" CardPhotoSource="{Binding CardPhoto}"/>
</Grid>
</DataTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="10 25 0 0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TotalListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFF5A94D" CornerRadius="3">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#4CFFFFFF" Offset="0"/>
<GradientStop Color="#99FFFFFF" Offset="0.375"/>
<GradientStop Color="#99FFFFFF" Offset="0.376"/>
<GradientStop Color="#19FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid Margin="0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE48686" Offset="0"/>
<GradientStop Color="#FFF15656" Offset="1"/>
<GradientStop Color="#B2F13A3A" Offset="0.474"/>
</LinearGradientBrush>
</Grid.Background>
<Border x:Name="BackgroundAnimation" Background="{StaticResource backBrush}" Opacity="0"/>
<Rectangle x:Name="BackgroundGradient">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#99FFFFFF" Offset="0"/>
<GradientStop Color="#33FFFFFF" Offset="0.375"/>
<GradientStop Color="#99FFFFFF" Offset="0.625"/>
<GradientStop Color="#33FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Gereric.xaml
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls.Primitives;
namespace FightsLandlordApp.Controls
{
[TemplatePart(Name = "layoutRoot", Type = typeof(Grid))]
[TemplatePart(Name="image",Type=typeof (Image ))]
public class CardToggleButton : ToggleButton
{
private Grid LayoutRoot;
private Image image;
public static readonly DependencyProperty CardPhotoProperty;
public static readonly DependencyProperty IsBackProperty;
static CardToggleButton()
{
CardPhotoProperty = DependencyProperty.Register("CardPhotoSource", typeof(ImageSource), typeof(CardToggleButton), new PropertyMetadata(null, OnPhotoChanged));
IsBackProperty = DependencyProperty.Register("IsBack", typeof(Visibility), typeof(CardToggleButton), new PropertyMetadata(Visibility.Collapsed,OnBackChanged));
}
private static void OnPhotoChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
((CardToggleButton)sender).RefreshPhoto();
}
private static void OnBackChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
((CardToggleButton)sender).RefreshPhoto();
}
private void RefreshPhoto()
{
}
private bool isSwitch = false;
void CardToggleButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
isSwitch = !isSwitch;
if (isSwitch)
{
this.RenderTransform = new CompositeTransform { TranslateY = -20 };//移动
}
else
this.RenderTransform = new CompositeTransform { TranslateY = 0 };
}
//是否显示背景
public Visibility IsBack
{
get { return (Visibility)GetValue(IsBackProperty); }
set { SetValue(IsBackProperty, value); }
}
//前景图
public ImageSource CardPhotoSource
{
get { return (ImageSource)GetValue(CardPhotoProperty); }
set { SetValue(CardPhotoProperty, value); }
}
public CardToggleButton()
{
this.DefaultStyleKey = typeof(CardToggleButton);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
LayoutRoot = GetTemplateChild("layoutRoot") as Grid;
LayoutRoot.DataContext = this;
if (IsBack==Visibility.Collapsed)
{
LayoutRoot.MouseEnter += (o, e) =>
{
VisualStateManager.GoToState(this, "MouseEnter", true);
};
LayoutRoot.MouseLeave += (o, e) =>
{
VisualStateManager.GoToState(this, "MouseLeave", true);
};
LayoutRoot.MouseLeftButtonDown += new MouseButtonEventHandler(CardToggleButton_MouseLeftButtonDown);
}
else
LayoutRoot.MouseLeftButtonDown -= new MouseButtonEventHandler(CardToggleButton_MouseLeftButtonDown);
}
}
}
