Alternate way to display usercontrols in wpf

Question

I'd like to know if there is an alternate way to display usercontrols inside mainwindow in WPF application. Currently I make use of the visibility property of usercontrols to display one usercontrol at a time on a button click. I set the visibility of the usercontrols to Hidden and on button clicks I change the visibility. It works perfectly. But is this the correct way to do this?

EDIT:

I tried something like this but it does not work.

mainwindow.xaml:

<Window x:Class="WpfApplication4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication4"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="54*" />
        <RowDefinition Height="257*" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="1">
        <ContentControl Content="{Binding CurrentView}"/>
    </Grid>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="25,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    <Button Content="Button" Height="23" HorizontalAlignment="Right" Margin="0,12,251,0" Name="button2" VerticalAlignment="Top" Width="75" />
</Grid>

</Window>

There are two user controls namely-UserControl1 and UserControl2. In the code behind:

 private UserControl currentview;


    private UserControl CurrentView
    {
        get
        {
            return this.currentview;
        }
        set
        {
            this.currentview = value;
            //RaisePropertyChanged("CurrentView");
        }
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        UserControl1 uc1 = new UserControl1();
        CurrentView = uc1;
    }

It does not work. What is the right way to do it?

score 4 · Accepted Answer · edited Feb 23 '13 at 08:34

4

You can have a ContentControl (in the MainWindow xaml), and bind its content to a view so that you can switch it in your code. Like this:

<Window x:Class="WpfApplication4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication4"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="54*" />
        <RowDefinition Height="257*" />
    </Grid.RowDefinitions>

    <ContentControl Grid.Row="0" Content="{Binding CurrentView}"/>

    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="25,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    <Button Content="Button" Height="23" HorizontalAlignment="Right" Margin="0,12,251,0" Name="button2" VerticalAlignment="Top" Width="75" />
</Grid>

</Window>

In the code behind:

    private UserControl currentView;

    public UserControl CurrentView
    {
        get
        {
            return this.currentView;
        }

        set
        {
            if (this.currentView == value)
            {
                return;
            }

            this.currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }

edited Feb 23 '13 at 08:34

Dave Clemmer

3,741
12
49
72

answered Aug 21 '12 at 11:58

Amadeus Hein

706
1
4
12

I am new to this. Can U pls explain where the currentView code is to be placed? Also I want the usercontrol displayed inside a Grid. – Shee Aug 21 '12 at 12:19
1

If you're new to C#/WPF and its MVVM style, I'd suggest looking at this fantastic SO question and answer: http://stackoverflow.com/questions/1405739/mvvm-tutorial-from-start-to-finish Also, to add it in a grid simply wrap a around the - I will edit the answer to show you. – Amadeus Hein Aug 21 '12 at 12:25
I tried what u said. Could u pls tel me where I am going wrong? I have edited the Question – Shee Aug 22 '12 at 07:15
Hello, try adding your code-behind as a data context to your window and see if it helps (DataContext="{Binding RelativeSource={RelativeSource Self}}"), updated the answer also. – Amadeus Hein Aug 22 '12 at 09:52
What does the `RaisePropertyChanged()` function do? I couldn't add its corresponding namespace – Shee Aug 22 '12 at 11:06

score 0 · Answer 2 · answered Aug 21 '12 at 12:03

0

I think there's nothing really wrong with it, if you are ok with your controls to stay in memory during the lifecycle of your window. Also, Amadeus Hein's answer.

answered Aug 21 '12 at 12:03

franssu

2,422
1
20
29

Alternate way to display usercontrols in wpf

2 Answers2

Linked