WPF学习（8）-元素绑定

元素绑定，就是可以直接使用Xaml去绑定元素的属性，几乎可以不使用任何C#代码，看以下的例子。

<Grid>        
<TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"                   
FontSize="{Binding ElementName=S1, Path=Value}">        
字体大小直接由Slider滑块来决定        
</TextBlock>        
<Slider Name="S1" HorizontalAlignment="Left" Margin="130,112,0,0" VerticalAlignment="Top" Width="266" Minimum="10" Maximum="100" />          
</Grid>

效果很好，拖动滑块，可以改变字体的大小，接着我们去做另外一件事情，加两个按钮，用代码去设置Slider的value和textblock的fontsize，代码如下

    <Grid>
        <TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                   FontSize="{Binding ElementName=S1, Path=Value}">
        字体大小直接由Slider滑块来决定
        </TextBlock>
        <Slider Name="S1" HorizontalAlignment="Left" Margin="130,112,0,0" VerticalAlignment="Top" Width="266" Minimum="10" Maximum="100" />
        <Button Content="更改slider的value" HorizontalAlignment="Left" Margin="142,182,0,0" VerticalAlignment="Top" Width="128" Click="Button_Click"/>
        <Button Content="更改textblock的字体大小" HorizontalAlignment="Left" Margin="303,182,0,0" VerticalAlignment="Top" Width="162" Click="Button_Click_1"/>
    </Grid>

后台代码如下

       private void Button_Click(object sender, RoutedEventArgs e)
        {
            S1.Value = 35;
        }
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            tb1.FontSize = 35;
        }

发现两种方式都可以完成工作，但是改变了tb1的fontsize之后，就破坏了绑定，再去拉动滑块，就没有任何效果了，这是因为绑定模式的原因，我们只需要把mode更改掉就可以了。

   <TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"
                   FontSize="{Binding ElementName=S1, Path=Value, Mode=TwoWay}">

这样就可以啦，具体的模式一共有五种，Oneway，Twoway，Onetime，OneWayToSource，Default，具体的区别，可以去查阅官方文档，我觉得还是在不断实现需求的过程中去积累经验，来的更有意义。

有一些需求，可能是需要动态绑定，动态生成的一些元素，那么这个时候就没办法直接在Xaml里面绑定，直接使用Binding就可以完成，还用上面的例子来说明，代码如下。

 Binding b = new Binding();
 b.Source = S1;
 b.Path = new PropertyPath("Value");
 b.Mode = BindingMode.TwoWay;
 tb1.SetBinding(TextBlock.FontSizeProperty, b);

一样可以达到元素绑定的效果，但是有一个注意点，就是Path由于采用的字符串，而且是区分大小写的，所以一定要正确书写，否则解析失败，也不会报错，会让人很抓狂的。

在我们大部分情况下，需要使用到绑定的时候，可能不是绑定要既有元素的依赖属性上，而是一个非元素对象，这个具体实现如下

提供source，就是告诉xaml，我们绑定的源是谁，简单示例如下

    <Window.Resources>
        <TextBlock x:Key="mylabletxt">我是资源键mylabletxt对应的值</TextBlock>
    </Window.Resources>
    <Grid>
        <TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Source={StaticResource mylabletxt}, Path=Text}" VerticalAlignment="Top">
        </TextBlock>
    </Grid>

textblock的text绑定到前面那个资源上面，资源里面放了一个textblock，然后我们绑定source就是他，path就是这个资源的Text属性。

第二种绑定方式就是使用relativesource ，如下示例

    <Grid>
        <Expander Header="我是一个expander哦">
            <TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Expander}}" VerticalAlignment="Top">
            </TextBlock>
        </Expander>
    </Grid>

Ancestor这个词的英文意思是祖先祖宗，所以非常好理解相对源，就是相对于自身，然到某种类型，就是去找到这个类型，然后绑定到他的某个属性，也就是Path上。

第三种，就是用的非常多的数据上下文，DataContext，数据上下文的好处是，当界面上有多个元素或者控件，需要绑定到某一个对象时，可以使用数据上下文，这样，只需要声明一次，就可以多次绑定，比如以下代码

    <Grid>
        <Grid.DataContext>
            <TextBox>123</TextBox>
        </Grid.DataContext>
        <Expander Header="我是一个expander哦">
            <StackPanel>
            <TextBlock Name="tb1" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Text}" VerticalAlignment="Top">
            </TextBlock>
            <TextBlock Name="tb2" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Text}" VerticalAlignment="Top">
            </TextBlock>
            <TextBlock Name="tb3" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Text}" VerticalAlignment="Top">
            </TextBlock>
            <TextBlock Name="tb4" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Text}" VerticalAlignment="Top">
            </TextBlock>
            <TextBlock Name="tb5" HorizontalAlignment="Left" Margin="164,66,0,0" TextWrapping="Wrap" Text="{Binding Path=Text}" VerticalAlignment="Top">
            </TextBlock>
            </StackPanel>
        </Expander>
    </Grid>

而且几乎所有的元素和控件都有datacontext，上面这个例子就是Grid定义了一个数据上下文，然后里面的expander里面放了好几个文本框，文本框的内容就是绑定了Text，应该是比较好理解的。

WPF学习（8）-元素绑定

猜你喜欢