XAML：访问用户控件内的控件答案

【问题标题】：XAML: access to controls inside user controlXAML：访问用户控件内的控件
【发布时间】：2013-10-21 19:27:14
【问题描述】：

我有这样的用户控件：

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image Source="/Images/btn1_normal@2x.png" Stretch="Fill" />
    <TextBlock x:Name="Text" Text="Button" Foreground="Black"
               VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

我在另一个 XAML 中像这样使用这个 userControl：

<MyControlls:MyButton Width="90" Height="55"/>

现在我如何访问这个 XAML 中名为 Text 的 textBlock 并更改他的文本（在 Windows phone 8 中）？像这样的：

<MyControlls:MyButton Width="90" Height="55">
    <MyButton.Text Text="Hello World!" />        
</MyControlls:MyButton>`

谢谢。

【问题讨论】：

标签： c# silverlight xaml windows-phone

【解决方案1】：

我找到了解决办法。

<UserControl x:Class="Becel.Controls.MyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
x:Name="MyUserControll">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image x:Name="myImage" Source="/Images/btn1.9_normal@2x.png" Stretch="Fill"
MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave" />
    <TextBlock x:Name="textTitle" Text="{Binding Title, ElementName=MyUserControll}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Foreground="Black" FontSize="25"  MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave"/>

</Grid>
</UserControl>

在 C# 代码中：

public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof (String), typeof(MyButton),null);

    public String Title
    {
        get { return (String)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
    }

然后在任何地方你都可以这样使用：

<MyUserControl:MyButton Width="90" Height="55" Margin="10 0 0 0" Title="Hello Wold!" />

【讨论】：

【解决方案2】：

你不能直接这样做。这里有两种选择。

解决方案 1：使用 ViewModel

使用视图模型类来存储您需要在自定义控件中显示的属性。

class MyButtonViewModel
{
    public string Text { get;set; }
}

MyButton.xaml：

<TextBlock Text={Binding Text} ...

MainWindow.xaml

<Window.Resources>
    <MyButtonViewModel x:Key="myButtonVm" Text="Hello!" />
</Window.Resources>

<MyButton DataContext={StaticResource myButtonVm} />

这使用了 MVVM 模式。如果您从未使用过，请参阅 WPF Apps With The Model-View-ViewModel Design Pattern。

解决方案 2：使用自定义控件

将您的UserControl 替换为CustomControl。在那种情况下Text可以是一个依赖属性，这样你就可以写了。

<MyButton Text="Hello !" />

这要复杂得多。见How to Create a WPF Custom Control。

选择哪个？

如果您打算在多个不同的项目中使用您的控件，并且您需要能够更改控件的外观，请选择UserControl。

否则，请使用 ViewModel 并最终将 MVVM 模式应用到您项目的其余部分。

【讨论】：

感谢您的回答，但我开发的是 Windows Phone 8 应用程序（不是 WPF）。有没有办法在 WP8 中创建 CustomControl ？
查看timheuer.com/blog/archive/2012/03/07/…（为 XAML Metro 风格应用构建可部署的自定义控件）

【解决方案3】：

要完成此任务，一种解决方案可能是将Dependency Property 声明到您的Control（似乎称为“MyButton”）代码后面：

  public string ButtonText
  {
    get { return (string )this.GetValue(ButtonTextProperty); }
    set { this.SetValue(ButtonTextProperty, value); } 
  }
  public static readonly DependencyProperty ButtonTextProperty = DependencyProperty.Register(
    "ButtonText", typeof(string), typeof(MyButton),new PropertyMetadata(false));

然后你必须将它绑定到你的 xaml 代码中：

  <YourControl x:Name="MyButtonName">
    ... // some xaml code
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Image Source="/Images/btn1_normal@2x.png" Stretch="Fill" />
        <TextBlock x:Name="Text" Text="Button" Foreground="Black"
                   VerticalAlignment="Center" HorizontalAlignment="Center"
                   Text="{Binding Path=ButtonText, ElementName=MyButtonName}"/>
    </Grid>
 </YourControl>

最后，您可以使用“MyButton”Control：

<MyControlls:MyButton Width="90" Height="55" ButtonText="Hello World!">
</MyControlls:MyButton>

【讨论】：