XAML: access to controls inside user control

Question

I have userControl like this:

Answer 1

You can't do that directly. Here are two alternatives.

Solution 1 : use a ViewModel

Use a view model class to store the properties that you need to display in your custom control.

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} />

This use the MVVM pattern. See WPF Apps With The Model-View-ViewModel Design Pattern, if you never used it.

Solution 2 : use a CustomControl

Replace your UserControl by a CustomControl. In that case Text can be a dependency property, so that you can write.

<MyButton Text="Hello !" />

This is much more complex. See How to Create a WPF Custom Control.

Which to choose ?

If you intend to use your control in several different projects, and you need to be able to change the skin of the control, choose the UserControl.

Otherwise, go for the ViewModel and eventually apply the MVVM pattern in the remaining off your project.

Answer 2

I found the solution.

<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>

And in C# code :

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); }
    }

And then in everywhere you can use like this:

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

Answer 3

To achieve this task, one solution could be to declare a Dependency Property into your Control (which seems to be called "MyButton") code behind :

  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));

Then you have to bind to it into your xaml code :

  <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>

Finally, you are able to use your "MyButton" Control :

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