WPF实现TextBlock呼吸灯效果
<TextBlock Text="录像中" FontSize="48" Foreground="#ED4646" HorizontalAlignment="Center" FontWeight="Medium" x:Name="TextBlockRecording">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard BeginTime="0:0:0" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation From="#ED4646" To="#F0F2F7" Duration="0:0:2" RepeatBehavior="Forever" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBlockRecording">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
WPF RelativeSource属性
我们进行Bingding时,如果明确知道数据源的Name,就能用Source或者ElementName进行绑定,但是有时候我们需要绑定的数据源可能没有明确的Name,此时我们就需要利用Bingding的RelativeSource进行绑定,这种办法的意思是指当前元素和绑定源的位置关系。
(1)控件关联自身的属性——Self
<Window x:Class="RelativeSource.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel>
<TextBox Height="30" Width="60" Name="Box1" Text="{Binding RelativeSource={RelativeSource Mode=self},Path=Name }"/>
</StackPanel>
</Grid>
</Window>
例是前台xaml写法,再看下后台怎么实现:
public MainWindow()
{
InitializeComponent();
System.Windows.Data.RelativeSource rs = new System.Windows.Data.RelativeSource();
rs.Mode = RelativeSourceMode.Self;
Binding binding = new Binding("Name") { RelativeSource = rs };
this.Box1.SetBinding(TextBox.TextProperty, binding);
}
(2)控件关联其父级容器的属性——AncestorType
<Window x:Class="RelativeSource.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="G1">
<Grid Name="G2">
<StackPanel Name="S1">
<TextBox Height="30" Width="60" Name="Box1" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=2},Path=Name }"/>
</StackPanel>
</Grid>
</Grid>
</Window>
详细介绍下AncestorLevel,它指的是以Bingding目标控件为起点的层级偏移量,S1的偏移量是1,G2的偏移量是2,G1是偏移量3,AncestorType指的是要找的目标对象的类型。值得注意的是AncestorLevel必须参考AncestorType使用,如上面设置了AncestorType={x:Type Grid},则Bingding在寻找时会忽略非Grid的控件,此时G2的偏移量是1,G1的偏移量是2,StackPanel被忽略。
(3)控件关联模板的属性——TemplatedParent
例如为一个Button写一个样式,修改Button为椭圆型。同时需要椭圆的背景色和Button的背景色相同。
在这个例子中 TemplateParent就是指的Button
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse>
<Ellipse.Fill>
<SolidColorBrush Color="{Binding Path=Background.Color,RelativeSource={RelativeSource TemplatedParent}}"/>
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(4)WPF中一个控件绑定另一个控件的属性
<Grid Margin="50,130">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Button Content="asdfasdfadsfa" Background="Aquamarine">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bd" BorderBrush="Black" Background="{TemplateBinding Background}" BorderThickness="1" CornerRadius="6,0,0,6" >
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=btn2,Path=Visibility}" Value="Collapsed">
<Setter TargetName="bd" Property="CornerRadius" Value="6,6,6,6"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Button x:Name="btn2" Grid.Column="2" Command="{Binding MainCommand}" Background="Beige">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Black" Background="{TemplateBinding Background}" BorderThickness="0,1,1,1" CornerRadius="0,6,6,0" >
<Path Data="M 0,0 L 20,0 L 10,10 Z" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>