来自UserControl的WPF数据绑定

时间:2013-11-20 12:40:03

标签: wpf binding wpf-controls tabcontrol wpf-4.0

我想将UserControl中的'SomeText'绑定到我的Label的内容中。

我目前有一个UserControl,只显示我的'SomeText'。 XAML和Code Behind文件可以在下面看到。

<UserControl x:Class="TabHeader.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="183" d:DesignWidth="235"
             x:Name="uc">
    <Grid>
        <Label Height="43" HorizontalAlignment="Left" Margin="57,102,0,0" Name="textBlock1" Content="{Binding Path=SomeText, ElementName=uc}" VerticalAlignment="Top" Width="86" />
    </Grid>
</UserControl>


namespace TabHeader
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        private string someText;

        public UserControl1()
        {
            this.SomeText = "23";

            InitializeComponent();
        }

        public string SomeText
        {
            get 
            { 
                return someText; 
            }
            set
            {
                someText = value;
            }
        }
    }
}

然后我有我的主XAML页面,一个Grid中的Tab控件。我正在使用Style在列标题中生成两个标签。我能够通过Header字段,但我无法通过控制字段。

<Window x:Class="TabHeader.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vw="clr-namespace:TabHeader"
        Title="MainWindow" Height="350" Width="525" Name="Tabs">
    <Grid>
        <TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
            <TabControl.Resources>
                <Style TargetType="TabItem" x:Key="tabItemHeaderStyle" >
                    <Setter Property="HeaderTemplate" >
                        <Setter.Value>
                            <DataTemplate DataType="{x:Type TabItem}">
                                <StackPanel Orientation="Horizontal">
                                    <Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
                                    <Label Content="{Binding Path=SomeText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=vw:UserControl1}}"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

            </TabControl.Resources>

            <TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 1" Name="tabItem1" Width="100">
                <vw:UserControl1 x:Name="UserControl11"></vw:UserControl1>
            </TabItem>
            <TabItem Style="{StaticResource tabItemHeaderStyle}" Header="TI 2" Name="tabItem2">
            </TabItem>

        </TabControl>
    </Grid>
</Window>

对此的任何帮助将不胜感激。

干杯。

修改1 对于任何感兴趣的人添加我下面的工作代码,我使用了DependencyProperty。

MainWindow.xaml

<Grid>
<TabControl Height="262" HorizontalAlignment="Left" Margin="47,26,0,0" Name="tabControl1" VerticalAlignment="Top" Width="366">
    <TabControl.Resources>

        <Style TargetType="TabItem" x:Key="tab1ItemHeaderStyle">
            <Setter Property="HeaderTemplate" >
                <Setter.Value>
                    <DataTemplate DataType="{x:Type TabItem}">
                        <StackPanel Orientation="Horizontal">
                            <Label Content="{Binding Path=Header, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
                            <Label Content="{Binding Path=UC1Figure, ElementName=uc1}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem Style="{StaticResource tab1ItemHeaderStyle}" Header="[Tab 1]" Name="tabItem1" Width="100">
        <vw:UserControl1 x:Name="uc1"></vw:UserControl1>
    </TabItem>
<TabControl>
</Grid>

UserControl1.xaml

<Grid>
    <Label Height="43" HorizontalAlignment="Left" Margin="69,128,0,0" Name="textBlock1" Content="{Binding Path=UC1Figure, ElementName=uc}" VerticalAlignment="Top" Width="100" />
    <Button Name="updateSomeFigure" Content="Press Me" Click="updateSomeFigure_Click" Width="100" Height="100" Margin="69,12,66,71" />
</Grid>

UserControl1.xaml.cs

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty SomeFigureProperty =
        DependencyProperty.Register("UC1Figure", typeof(int), typeof(UserControl1));

    public int UC1Figure
    {
        get { return (int)this.GetValue(SomeFigureProperty); }
        set { this.SetValue(SomeFigureProperty, value); }
    }

    private void updateSomeFigure_Click(object sender, RoutedEventArgs e)
    {
        UC1Figure = UC1Figure + 1;
    }
}

1 个答案:

答案 0 :(得分:0)

如果您想将数据绑定到UserControl的用户界面,则有两种选择。第一个是在您的代码中实现INotifyPropertyChanged Interface。第二个是定义DependencyProperty而不是常规CLR属性。您可以在MSDN上的Dependency Properties Overview页面中了解如何执行此操作。

您可能还想在启动数据Binding之前阅读MSDN上的Data Binding Overview‎页面。