XAML: access to controls inside user control

Question

I have userControl like this:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image Source="/Images/[email protected]" Stretch="Fill" />
    <TextBlock x:Name="Text" Text="Button" Foreground="Black"
               VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

I use this userControl in another XAML like this:

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

Now how I can access to textBlock named Text in this XAML and change his text (in Windows phone 8)? Something like this:

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

Thank You.

Answer 1

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/[email protected]" 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 2

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.