稳扎稳打Silverlight(40) - 3.0绑定之Element to Element Binding, RelativeSource

2016-08-20 10:58:11来源:http://webabcd.blog.51cto.com/1787395/342770作者:webabcd人点击


[索引页][源码下载]
稳扎稳打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 自定义输入框的光标的样式
在线DEMOhttp://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>


2、RelativeSource 扩展标记应用的 DemoRelativeSourceDemo.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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台