XAML Runtime Usercontrol Binding

Question

I have been fixating on this from some time: I am developing a windows phone app: I have a XAML Page as a template and three UserControls:

One of which has map-layout, one generalInfo-layout, Summary+Pic layout.

I want to create 3 buttons at the top and change the active UserControl respectively.

I dont want to you use a PivotPage.

HELP? Advice? Code?

Answer 1

One very primitive approach would be to subscribe to the Click event of all 3 buttons and basically just change the Visibility property of your UserControls in the event handlers appropriately.

Of course there are other approaches you might want to consider - like using the MVVM pattern or using TabControl and TabItem from the sdk if available for WP7 or using event triggers - but this can be a good starting point.

Your MainPage should look something like this:

<UserControl x:Class="SilverlightApplication10.MainPage"
             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"
             xmlns:silverlightApplication10="clr-namespace:SilverlightApplication10"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel x:Name="LayoutRoot"
                    Orientation="Horizontal"
                    Background="White">

            <Button Height="30"
                    Content="content1"
                    Click="Button_Click" />

            <Button Height="30"
                    Content="content2"
                    Click="Button_Click_1" />

            <Button Height="30"
                    Content="content3"
                    Click="Button_Click_2" />

        </StackPanel>

        <Grid Grid.Row="1">
            <silverlightApplication10:SilverlightControl1 x:Name="ctrl1"
                                                          Visibility="Collapsed" />

            <silverlightApplication10:SilverlightControl2 x:Name="ctrl2"
                                                          Visibility="Collapsed" />

            <silverlightApplication10:SilverlightControl3 x:Name="ctrl3"
                                                          Visibility="Collapsed" />
        </Grid>

    </Grid>
</UserControl>

And then your event handlers should take care of setting the Visibility property of all these UserControls:

private void Button_Click(object sender, RoutedEventArgs e)
{
    ctrl1.Visibility = Visibility.Visible;
    ctrl2.Visibility = Visibility.Collapsed;
    ctrl3.Visibility = Visibility.Collapsed;
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    ctrl2.Visibility = Visibility.Visible;
    ctrl1.Visibility = Visibility.Collapsed;
    ctrl3.Visibility = Visibility.Collapsed;
}

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    ctrl3.Visibility = Visibility.Visible;
    ctrl1.Visibility = Visibility.Collapsed;
    ctrl2.Visibility = Visibility.Collapsed;
}