稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource; 样式之动态修改样式, 样式继承, 自定义光标
作者:webabcd
介绍
Silverlight 3.0 绑定的新增功能,样式相关的新增功能
- Element to Element Binding - Element 到 Element 之间的绑定
- RelativeSource - 一个扩展标记,用于指定关联数据源为 Self 或 TemplatedParent
- 动态修改样式 - 在 Runtime 时修改样式
- 样式继承 - 通过 BasedOn 使某样式可以继承自另一个样式
- 自定义光标 - 通过 CaretBrush 自定义输入框的光标的样式
在线DEMO
http://webabcd.blog.51cto.com/1787395/342289
示例
1、Element to Element 绑定的演示
Element2Element.xaml
<navigation:Page x:Class="Silverlight30.Binding.Element2Element"
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="Element to Element Binding Page">
<Grid x:Name="LayoutRoot">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<!--Element to Element 绑定的支持-->
<!--
绑定方式1:{Binding 绑定的属性名称, Mode=, ElementName=绑定的对象名称}
绑定方式2:{Binding ElementName=绑定的对象名称, Path=绑定的属性名称, Mode=}
Mode的可用值有:OneTime, OneWay, TwoWay
-->
<Slider x:Name="silder" Value="50" Minimum="1" Maximum="100" LargeChange="5" Width="500"></Slider>
<TextBox Text="{Binding Value, Mode=TwoWay, ElementName=silder}" />
<Slider Minimum="1" Maximum="100" LargeChange="5" Width="500"
Value="{Binding ElementName=textBox, Path=Text, Mode=TwoWay }"></Slider>
<TextBox x:Name="textBox" Text="50" />
</StackPanel>
</Grid>
</navigation:Page>
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="Element to Element Binding Page">
<Grid x:Name="LayoutRoot">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<!--Element to Element 绑定的支持-->
<!--
绑定方式1:{Binding 绑定的属性名称, Mode=, ElementName=绑定的对象名称}
绑定方式2:{Binding ElementName=绑定的对象名称, Path=绑定的属性名称, Mode=}
Mode的可用值有:OneTime, OneWay, TwoWay
-->
<Slider x:Name="silder" Value="50" Minimum="1" Maximum="100" LargeChange="5" Width="500"></Slider>
<TextBox Text="{Binding Value, Mode=TwoWay, ElementName=silder}" />
<Slider Minimum="1" Maximum="100" LargeChange="5" Width="500"
Value="{Binding ElementName=textBox, Path=Text, Mode=TwoWay }"></Slider>
<TextBox x:Name="textBox" Text="50" />
</StackPanel>
</Grid>
</navigation:Page>
2、RelativeSource 扩展标记应用的 Demo
RelativeSourceDemo.xaml
RelativeSourceDemo.xaml
<navigation:Page x:Class="Silverlight30.Binding.RelativeSourceDemo"
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="RelativeSourceDemo Page">
<Grid x:Name="LayoutRoot">
<!--
RelativeSource - 一个扩展标记,用于指定关联数据源。这是 Silverlight 3.0 绑定的新增功能
RelativeSource={RelativeSource Self} - 指定数据源为自己本身
RelativeSource={RelativeSource TemplatedParent} - 在 ControlTemplate 出现,指定数据源为引用了该 ControlTemplate 的 Control
-->
<StackPanel>
<StackPanel.Resources>
<ControlTemplate x:Key="myButton" TargetType="Button">
<Grid>
<!--演示 {RelativeSource TemplatedParent} 的 Demo-->
<Border x:Name="Background" CornerRadius="3" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</StackPanel.Resources>
<!--演示 {RelativeSource Self} 的 Demo-->
<TextBlock x:Name="lbl" Text="{Binding RelativeSource={RelativeSource Self}, Path=Name}" />
<Button Content="Button" Template="{StaticResource myButton}" Background="Red" />
</StackPanel>
</Grid>
</navigation:Page>
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="RelativeSourceDemo Page">
<Grid x:Name="LayoutRoot">
<!--
RelativeSource - 一个扩展标记,用于指定关联数据源。这是 Silverlight 3.0 绑定的新增功能
RelativeSource={RelativeSource Self} - 指定数据源为自己本身
RelativeSource={RelativeSource TemplatedParent} - 在 ControlTemplate 出现,指定数据源为引用了该 ControlTemplate 的 Control
-->
<StackPanel>
<StackPanel.Resources>
<ControlTemplate x:Key="myButton" TargetType="Button">
<Grid>
<!--演示 {RelativeSource TemplatedParent} 的 Demo-->
<Border x:Name="Background" CornerRadius="3" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" />
<Rectangle x:Name="BackgroundGradient" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</StackPanel.Resources>
<!--演示 {RelativeSource Self} 的 Demo-->
<TextBlock x:Name="lbl" Text="{Binding RelativeSource={RelativeSource Self}, Path=Name}" />
<Button Content="Button" Template="{StaticResource myButton}" Background="Red" />
</StackPanel>
</Grid>
</navigation:Page>
3、Runtime 时修改样式的演示
ButtonStyle1.xaml(样式 1)
ButtonStyle1.xaml(样式 1)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
>
<!--
自定义 Button 样式 1
-->
<Style x:Key="myButton1" TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Green" />
</Style>
</ResourceDictionary>
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
>
<!--
自定义 Button 样式 1
-->
<Style x:Key="myButton1" TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Green" />
</Style>
</ResourceDictionary>
ButtonStyle2.xaml(样式 2)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
>
<!--
自定义 Button 样式 2
-->
<Style x:Key="myButton2" TargetType="Button">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Red" />
</Style>
</ResourceDictionary>
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
>
<!--
自定义 Button 样式 2
-->
<Style x:Key="myButton2" TargetType="Button">
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Red" />
</Style>
</ResourceDictionary>
RuntimeChangeStyle.xaml
<navigation:Page x:Class="Silverlight30.Style.RuntimeChangeStyle"
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="RuntimeChangeStyle Page">
<Grid x:Name="LayoutRoot">
<!--
runtime 时修改样式的 Demo
-->
<StackPanel Orientation="Horizontal">
<Button x:Name="btn1" Content="Button 样式 1" Click="btn1_Click" Width="160" Height="30" Margin="10" />
<Button x:Name="btn2" Content="Button 样式 2" Click="btn2_Click" Width="160" Height="30" Margin="10" />
</StackPanel>
</Grid>
</navigation:Page>
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="RuntimeChangeStyle Page">
<Grid x:Name="LayoutRoot">
<!--
runtime 时修改样式的 Demo
-->
<StackPanel Orientation="Horizontal">
<Button x:Name="btn1" Content="Button 样式 1" Click="btn1_Click" Width="160" Height="30" Margin="10" />
<Button x:Name="btn2" Content="Button 样式 2" Click="btn2_Click" Width="160" Height="30" Margin="10" />
</StackPanel>
</Grid>
</navigation:Page>
RuntimeChangeStyle.xaml.cs
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.Navigation;
using System.Xml.Linq;
namespace Silverlight30.Style
{
public partial class RuntimeChangeStyle : Page
{
public RuntimeChangeStyle()
{
InitializeComponent();
}
private void btn1_Click(object sender, RoutedEventArgs e)
{
// 动态设置样式。样式来自于 Style/ButtonStyle1.xaml
System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton1"];
btn1.Style = style;
btn2.Style = style;
}
private void btn2_Click(object sender, RoutedEventArgs e)
{
// 动态设置样式。样式来自于 Style/ButtonStyle2.xaml
System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton2"];
btn1.Style = style;
btn2.Style = style;
}
}
}
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.Navigation;
using System.Xml.Linq;
namespace Silverlight30.Style
{
public partial class RuntimeChangeStyle : Page
{
public RuntimeChangeStyle()
{
InitializeComponent();
}
private void btn1_Click(object sender, RoutedEventArgs e)
{
// 动态设置样式。样式来自于 Style/ButtonStyle1.xaml
System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton1"];
btn1.Style = style;
btn2.Style = style;
}
private void btn2_Click(object sender, RoutedEventArgs e)
{
// 动态设置样式。样式来自于 Style/ButtonStyle2.xaml
System.Windows.Style style = (System.Windows.Style)Application.Current.Resources["myButton2"];
btn1.Style = style;
btn2.Style = style;
}
}
}
4、样式的可继承性的演示
BasedOn.xaml
BasedOn.xaml
<navigation:Page x:Class="Silverlight30.Style.BasedOn"
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="BasedOn Page">
<Grid x:Name="LayoutRoot">
<!--
样式的可继承性(BasedOn)的演示
-->
<Grid.Resources>
<!--基样式-->
<Style x:Key="baseButton" TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Green" />
</Style>
<!--子样式-->
<!--BasedOn - 指定当前样式的父样式(此样式会继承指定的父样式)-->
<Style x:Key="myButton" TargetType="Button" BasedOn="{StaticResource baseButton}">
<Setter Property="BorderBrush" Value="Red" />
</Style>
</Grid.Resources>
<StackPanel>
<Button x:Name="btn1" Content="Button 1" Width="120" Height="30" Margin="5"
Style="{StaticResource baseButton}" />
<Button x:Name="btn2" Content="Button 2" Width="120" Height="30" Margin="5"
Style="{StaticResource myButton}" />
</StackPanel>
</Grid>
</navigation:Page>
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="BasedOn Page">
<Grid x:Name="LayoutRoot">
<!--
样式的可继承性(BasedOn)的演示
-->
<Grid.Resources>
<!--基样式-->
<Style x:Key="baseButton" TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="3" />
<Setter Property="BorderBrush" Value="Green" />
</Style>
<!--子样式-->
<!--BasedOn - 指定当前样式的父样式(此样式会继承指定的父样式)-->
<Style x:Key="myButton" TargetType="Button" BasedOn="{StaticResource baseButton}">
<Setter Property="BorderBrush" Value="Red" />
</Style>
</Grid.Resources>
<StackPanel>
<Button x:Name="btn1" Content="Button 1" Width="120" Height="30" Margin="5"
Style="{StaticResource baseButton}" />
<Button x:Name="btn2" Content="Button 2" Width="120" Height="30" Margin="5"
Style="{StaticResource myButton}" />
</StackPanel>
</Grid>
</navigation:Page>
5、自定义光标的实现
CaretBrush.xaml
CaretBrush.xaml
<navigation:Page x:Class="Silverlight30.Style.CaretBrush"
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="CaretBrush Page">
<Grid x:Name="LayoutRoot">
<!--
CaretBrush - 定义输入框的光标的样式
GradientBrush.MappingMode - 指定渐变点的位置类型 [System.Window.Media.BrushMappingMode 枚举]
RelativeToBoundingBox - 百分比定位(0,0 - 1,1 之间)
Absolute - 绝对定位
-->
<TextBox>
<TextBox.CaretBrush>
<LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBox.CaretBrush>
</TextBox>
</Grid>
</navigation:Page>
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="CaretBrush Page">
<Grid x:Name="LayoutRoot">
<!--
CaretBrush - 定义输入框的光标的样式
GradientBrush.MappingMode - 指定渐变点的位置类型 [System.Window.Media.BrushMappingMode 枚举]
RelativeToBoundingBox - 百分比定位(0,0 - 1,1 之间)
Absolute - 绝对定位
-->
<TextBox>
<TextBox.CaretBrush>
<LinearGradientBrush MappingMode="RelativeToBoundingBox" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBox.CaretBrush>
</TextBox>
</Grid>
</navigation:Page>
OK
[源码下载]
[源码下载]
本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/342770,如需转载请自行联系原作者