WP8.1 use user control

Question

I want to create a small app with multiple tab contents. Now this could be easily done with a pivot or a panorama and simply swipe through the tabs. However I prefer using user controls to do that. Now I have created a blank silverlight app and a user control with 2 textboxes and 1 button. On my mainpage I have a button which should bring up and set the user control with a Tap event. Here is the xaml of the button

<phone:PhoneApplicationPage
x:Class="set.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
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}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="157,49,0,0" VerticalAlignment="Top" Tap="button_Tap"/>

    </Grid>
</Grid>

User control

<UserControl x:Class="set.Helper.Login"
    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}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0,0,10,10">
        <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="55" TextWrapping="Wrap" Text="email" VerticalAlignment="Top" Width="333" Margin="74,97,0,0" FontSize="16" FontFamily="Arial" FontStyle="Italic" GotFocus="textBox_GotFocus" Foreground="#FF767575"/>
        <TextBox x:Name="textBox_Copy" HorizontalAlignment="Left" Height="55" TextWrapping="Wrap" Text="password" VerticalAlignment="Top" Width="333" Margin="74,157,0,0" FontSize="16" FontFamily="Arial" FontStyle="Italic" GotFocus="textBox_Copy_GotFocus" Foreground="#FF767575"/>
        <Button x:Name="button" Content="Login" HorizontalAlignment="Left" Margin="74,217,0,0" VerticalAlignment="Top" Height="71" Width="333" Foreground="White" Background="#FF002DA6"/>

    </Grid>
</UserControl>

and here is the tap event

private void button_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            //set user interface here
        }

How can I switch to user control? How can I use it?

John P. John P. · Accepted Answer · 2015-12-11T21:42:41

This wasn't so difficult. I simply added a stackpanel and on tap event I just created the user control and stored it in memory and then added a children in the stackpanel.

private void button_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            Helper.Login loging = new Helper.Login();
            stkTest.Children.Add(loging);
        }

stackpannel

<StackPanel Name="stkTest" HorizontalAlignment="Left" Height="608" Margin="10,150,0,0" Grid.RowSpan="2" VerticalAlignment="Top" Width="460"/>

WP8.1 use user control

1 Answers