[索引页]
[源码下载]
作者: webabcd
介绍
Silverlight 3.0 绑定的新增功能,样式相关的新增功能
在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html
示例
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
>
2、RelativeSource 扩展标记应用的 Demo
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
>
3、Runtime 时修改样式的演示
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
>
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
>
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
>
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;
}
}
}
4、样式的可继承性的演示
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
>
5、自定义光标的实现
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
>
OK
[源码下载]
[源码下载]
稳扎稳打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://www.cnblogs.com/webabcd/archive/2009/08/04/1538238.html
示例
1、Element to Element 绑定的演示
Element2Element.xaml





























2、RelativeSource 扩展标记应用的 Demo
RelativeSourceDemo.xaml






























































3、Runtime 时修改样式的演示
ButtonStyle1.xaml(样式 1)















ButtonStyle2.xaml(样式 2)















RuntimeChangeStyle.xaml






















RuntimeChangeStyle.xaml.cs










































4、样式的可继承性的演示
BasedOn.xaml









































5、自定义光标的实现
CaretBrush.xaml
































OK
[源码下载]