UserControl communication with its parent page on Windows 8.1 - windows-phone-8

Question

I'm working on a Universal App (windows 8.1).
I'd like to increment the property "Number" in my main page by clicking on the button in my UserControl.
(the above code is an example)
Mainpage.xaml :
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:uc="using:App3"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<uc:MyUserControl1></uc:MyUserControl1>
</Grid>
</Page>
Mainpage.xaml.cs :
namespace App3
{
public sealed partial class MainPage : Page
{
public int number { get; set; }
public MainPage()
{
this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
MyUserControl1.xaml
<UserControl
x:Class="App3.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<StackPanel>
<TextBlock Text="Test" />
<TextBlock Text="Test" />
<TextBlock Text="Test" />
<Button Height="20"
Width="50"
Content="click"
Click="Button_Click"/>
<TextBlock Text="Test" />
<TextBlock Text="Test" />
<TextBlock Text="Test" />
</StackPanel>
</Grid>
</UserControl>
MyUserControl1.xaml.cs
namespace App3
{
public sealed partial class MyUserControl1 : UserControl
{
public MyUserControl1()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//TODO : ?
}
}
}
How can I do ? I don't want to use a property in app.cs...

Answer 1

Define a Dependency property in your usercontrol and bind this property to one property in your MainPage.by using dependency property your usercontrol will behave like an independent control just like some Button Control etc. It will give you a example how to use DependencyProperty too.
In your usercontrol add this code
public sealed partial class MyUserControl1 : UserControl
{
public MyUserControl1()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//TODO : ?
Caption = 2;
}
public int Caption
{
get { return (int)GetValue(CaptionProperty); }
set { SetValue(CaptionProperty, value); }
}
public static readonly DependencyProperty CaptionProperty =
DependencyProperty.Register("Caption", typeof(int), typeof(MyUserControl1),
new PropertyMetadata(0, null));
}
In you MainPage.xaml bind this caption property like this.
<Grid>
<uc:MyUserControl1 Caption="{Binding SomeValue,Mode=TwoWay}" ></uc:MyUserControl1>
</Grid>
Add property to MainPage.Xaml.cs like this.
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
this.DataContext = this;
}
public string SomeValue
{
set
{
string df = value; // put a break point here and check
}
}
}
Now put a break point on Set and see if is it changing or not.

Answer 2

Create an event in your Usercontrol like so:
namespace App3
{
public sealed partial class MyUserControl1 : UserControl
{
public event EventHandler ButtonClicked;
public MyUserControl1()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//TODO : ?
if (ButtonClicked != null)
ButtonClicked(this, new EventArgs());
}
}
}
then in your XAML for the MainPage set an eventhandler for ButtonClicked Event in the usercontrol like so
<uc:MyUserControl1 ButtonClicked="Increment_Click"></uc:MyUserControl1>
Then in the code Behind for your MainPage create the Increment_Click method:
private void Increment_Click(Object sender, RoutedEventArgs e)
{
number++;
}