Binding 绑定示例

一、创建一个滑块控件，希望在滑动过程中，把值更新到文本上

1、元素绑定

<StackPanel VerticalAlignment="Center">
    <Slider x:Name="slider" Width="200" />
    <TextBox Text="{Binding ElementName=slider, Path=Value}" HorizontalAlignment="Center"/>
</StackPanel>

2、绑定模式

模式	说明
OneWay	单向绑定，源属性变化更新目标属性
TowWay	双向绑定，源属性变化更新目标属性，反之亦然
OneTime	单次绑定，根据首次源属性更新目标属性，源属性后续的变化无效
OenWayToSource	单向绑定，目标属性变化更新源属性，与OneWay相反
Default	未指定Mode，默认双向绑定

• OneWay

<StackPanel VerticalAlignment="Center">
    <Slider x:Name="slider" Width="200" />
    <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneWay}" HorizontalAlignment="Center"/>
</StackPanel>

• TowWay

焦点离开文本框触发更新

<StackPanel VerticalAlignment="Center">
    <Slider x:Name="slider" Width="200" />
    <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=TwoWay}" HorizontalAlignment="Center"/>
</StackPanel>

• OneTime

Text绑定Slider的初始值3，后续变化对Text无效

<StackPanel VerticalAlignment="Center">
    <Slider x:Name="slider" Width="200" Value="3" />
    <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneTime}" HorizontalAlignment="Center"/>
</StackPanel>

• OneWayToSource

通过Text的值修改Slider滑块

<StackPanel VerticalAlignment="Center">
    <Slider x:Name="slider" Width="200" Value="3" />
    <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneWayToSource}" HorizontalAlignment="Center"/>
</StackPanel>

二、绑定到非命名元素上

属性	说明
Source	指向一个数据源
RelativeSource	相对数据源，通过模式查找
DataContext	就近从数据上下文中查找非空DataContext对象

• Source

<Window.Resources>
    <TextBox x:Key="text">5</TextBox>
</Window.Resources>
<Grid>
    <StackPanel VerticalAlignment="Center">
        <Slider Width="200" Value="{Binding Source={StaticResource text},Path=Text}" />
        <TextBox Text="{Binding Source={StaticResource text},Path=Text}" HorizontalAlignment="Center"/>
    </StackPanel>
</Grid>

• RelativeSource

模式	说明
FindAncestor	查找指定类型的父元素
PreviousData	上一个数据项
Self	当前元素自身
TemplatedParent	查找元素的模板父级

• FindAncestor

AncestorType为必要属性，Mode=FindAncestor 和 AncestorLevel 可省略

Mode 未指定，默认为 FindAncestor

AncestorLevel 从当前元素向上查找指定类型父元素 1 代表1级，2即2级，类推

对应类型的父元素，相关属性必须有值，否则无效果

等效示例

RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType=StackPanel}
RelativeSource={RelativeSource AncestorLevel=1, AncestorType=StackPanel}
RelativeSource={RelativeSource AncestorType=StackPanel}

简单示例

<StackPanel VerticalAlignment="Center" Width="280">
    <Slider Width="200" Value="{Binding Source={StaticResource text},Path=Text}" />
    <TextBox Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type StackPanel}},Path=Width}" HorizontalAlignment="Center"/>
</StackPanel>

填充示例

1级，Button的宽度填充为父级Grid的宽度

<Window.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Margin"   Value="10"/>
    </Style>
</Window.Resources>
<Grid Background="Red" Opacity="0.5">
    <TextBlock Text="Grid" />

    <StackPanel Orientation="Vertical" Background="Green" Width="500" Height="500" HorizontalAlignment="Left" VerticalAlignment="Center">
        <TextBlock Text="StackPanel" />

        <Grid Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Bottom">
            <TextBlock Text="Grid" />

            <Button Content="Button" Width="{Binding RelativeSource={RelativeSource AncestorType=Grid},Path=Width}" Height="40" FontSize="20" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

2级，Button的宽度填充为父级StackPanel的宽度

<Window.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Margin"   Value="10"/>
    </Style>
</Window.Resources>
<Grid Background="Red" Opacity="0.5">
    <TextBlock Text="Grid" />

    <StackPanel Orientation="Vertical" Background="Green" Width="500" Height="500" HorizontalAlignment="Left" VerticalAlignment="Center">
        <TextBlock Text="StackPanel" />

        <Grid Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Bottom" >
            <TextBlock Text="Grid" />

            <Button Content="Button" Width="{Binding RelativeSource={RelativeSource AncestorType=StackPanel},Path=Width}" Height="40" FontSize="20" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

3级，Button的宽度填充为顶级Grid的宽度

未生效，顶级元素Grid未设置 Width

<Window.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Margin"   Value="10"/>
    </Style>
</Window.Resources>
<Grid Background="Red" Opacity="0.5">
    <TextBlock Text="Grid" />

    <StackPanel Orientation="Vertical" Background="Green" Width="500" Height="500" HorizontalAlignment="Left" VerticalAlignment="Center">
        <TextBlock Text="StackPanel" />

        <Grid Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Bottom" >
            <TextBlock Text="Grid" />

            <Button Content="Button" Width="{Binding RelativeSource={RelativeSource AncestorType=Grid,AncestorLevel=2},Path=Width}" Height="40" FontSize="20" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

顶级Grid添加 Width 属性，属性生效

<Window.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="Foreground" Value="Yellow"/>
        <Setter Property="Margin"   Value="10"/>
    </Style>
</Window.Resources>
<Grid Background="Red" Opacity="0.5" Width="600">
    <TextBlock Text="Grid" />

    <StackPanel Orientation="Vertical" Background="Green" Width="500" Height="500" HorizontalAlignment="Left" VerticalAlignment="Center">
        <TextBlock Text="StackPanel" />

        <Grid Background="Blue" Width="400" Height="400" HorizontalAlignment="Left" VerticalAlignment="Bottom" >
            <TextBlock Text="Grid" />

            <Button Content="Button" Width="{Binding RelativeSource={RelativeSource AncestorType=Grid,AncestorLevel=2},Path=Width}" Height="40" FontSize="20" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>