将Silverlight UserControl自定义属性绑定到其“元素” [英] Binding Silverlight UserControl custom properties to its' elements

问题描述

我试图在Silverlight 2.0中制作简单的填字游戏。我正在使用一个UserControl-ish组件，它代表了一个拼图中的正方形。我将UserControl的属性与其元素绑定时遇到麻烦。我终于（有）得到它的工作（可能有帮助 - 一些我花了几个小时），但想让它更优雅。

我想象应该有一个内容的隔间和一个标签（在右上角），可选地包含它的'号码。内容控件可能是一个TextBox，而标签控件可能是一个TextBlock。所以我创建了一个具有这个基本结构的UserControl（这个值在这个阶段被硬编码）：

 < UserControl x：Class = XWord.Square
 xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns：x =http://schemas.microsoft.com/winfx / 2006 / xaml
 FontSize =30
宽度=100高度=100> 
< Grid x：Name =LayoutRootBackground =White> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =*/> 
< ColumnDefinition Width =Auto/> 
< /Grid.ColumnDefinitions> 
 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
 
< TextBlock x：Name =LabelGrid.Row =0Grid.Column =1
 Text =7/> 
< TextBox x：Name =ContentGrid.Row =1Grid.Column =0
 Text =A
 BorderThickness =0/> 
 
< / Grid> 
< / UserControl> 
  

我还在Square类中创建了DependencyProperties，如下所示：

  public static readonly DependencyProperty LabelTextProperty; 
 public static readonly DependencyProperty ContentCharacterProperty; 
 
 // ...（具有属性注册的静态构造函数，.NET属性
 //为简洁省略）... 
  

现在我想知道如何将Label和Content元素绑定到两个属性。我这样做（在代码隐藏文件中）：

  Label.SetBinding（TextBlock.TextProperty，new Binding {Source = this，Path = new PropertyPath（LabelText），Mode = BindingMode.OneWay}）; 
 Content.SetBinding（TextBox.TextProperty，new Binding {Source = this，Path = new PropertyPath（ContentCharacter），Mode = BindingMode.TwoWay}）; 
  

这将在XAML中更加优雅。有没有人知道如何完成？

解决方案

首先，使用{RelativeSource Self}在UserControl上设置DataContext：

 < UserControl x：Class =XWord.Square
 xmlns =http://schemas.microsoft.com/winfx / 2006 / xaml / presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 FontSize =30
宽度=100 Height =100
 DataContext ={Binding RelativeSource = {RelativeSource Self}}> 
  

现在您可以将各个元素绑定到usercontrol的属性：

 < TextBlock x：Name =LabelGrid.Row =0Grid.Column =1
 Text ={Binding LabelText}/> 
< TextBox x：Name =ContentGrid.Row =1Grid.Column =0
 Text ={Binding ContentCharacter}BorderThickness =0/> 
  

对于SL 2.0，您需要在UserControl的Loaded事件处理程序中设置DataContext。

  private void UserControl_Loaded（object sender，RoutedEventArgs e）{
 LayoutRoot.DataContext = this; 
} 
  

I'm trying to make a simple crossword puzzle game in Silverlight 2.0. I'm working on a UserControl-ish component that represents a square in the puzzle. I'm having trouble with binding up my UserControl's properties with its' elements. I've finally (sort of) got it working (may be helpful to some - it took me a few long hours), but wanted to make it more 'elegant'.

I've imagined it should have a compartment for the content and a label (in the upper right corner) that optionally contains its' number. The content control probably be a TextBox, while label control could be a TextBlock. So I created a UserControl with this basic structure (the values are hardcoded at this stage):

    <UserControl x:Class="XWord.Square"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontSize="30" 
    Width="100" Height="100">
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <TextBlock x:Name="Label" Grid.Row="0" Grid.Column="1" 
                Text="7"/>
            <TextBox x:Name="Content" Grid.Row="1" Grid.Column="0"  
                Text="A"
                BorderThickness="0" />

        </Grid>
    </UserControl>

I've also created DependencyProperties in the Square class like this:

     public static readonly DependencyProperty LabelTextProperty;
     public static readonly DependencyProperty ContentCharacterProperty;

     // ...(static constructor with property registration, .NET properties
     // omitted for brevity)...

Now I'd like to figure out how to bind the Label and Content element to the two properties. I do it like this (in the code-behind file):

     Label.SetBinding( TextBlock.TextProperty, new Binding { Source = this, Path = new PropertyPath( "LabelText" ), Mode = BindingMode.OneWay } );
     Content.SetBinding( TextBox.TextProperty, new Binding { Source = this, Path = new PropertyPath( "ContentCharacter" ), Mode = BindingMode.TwoWay } );

That would be more elegant done in XAML. Does anyone know how that's done?

解决方案

First, set the DataContext on the UserControl using {RelativeSource Self}:

<UserControl x:Class="XWord.Square"  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
FontSize="30"   
Width="100" Height="100" 
DataContext="{Binding RelativeSource={RelativeSource Self}}">

Now you can bind the individual elements to the properties of the usercontrol:

<TextBlock x:Name="Label" Grid.Row="0" Grid.Column="1" 
Text="{Binding LabelText}"/>  
<TextBox x:Name="Content" Grid.Row="1" Grid.Column="0" 
Text="{Binding ContentCharacter}" BorderThickness="0" />

For SL 2.0, you'll need to set the DataContext on the UserControl's Loaded event handler.

private void UserControl_Loaded( object sender, RoutedEventArgs e ) {
    LayoutRoot.DataContext = this;
}

这篇关于将Silverlight UserControl自定义属性绑定到其“元素”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！