WPF 控件【U】UserControl(一) UserControl、ContentControl、Page的区别，及它们的使用方法

一、简介

        本文将介绍用户控件UserControl与Page的区别，及两者的使用方法。

部分参考：

https://www.cnblogs.com/lelehellow/p/6026766.html（重点）

https://www.cnblogs.com/ZXdeveloper/p/4479721.html

https://www.cnblogs.com/denghejun/p/3671061.html

还有其他参考，见下文。

二、UserControl、ContentControl、Page性质、用法

1、三者，一定要放在Window下才能显示。若是在Prism架构中，一定要放在shell才能显示。

2、常情况下，一个window加载多个page，而运行的solution大都是一个window。

3、当微软自带的控件（比如button,canvas等）不足以满足开发者的需求，这是可以用到usercontrol啦。

4、ContentControl用来切换动态内容。

5、其他（若有其他区别，请大家告知我一下，我学习学习。非常感谢）

1、UserControl

1.1、性质

     省略。UserControl是一定要放在Window中才能显示的。

1.2、用法

1.2.1、Window的Xaml直接添加

<Window x:Class="WpfApplicationDemo.UserControlDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:my="clr-namespace:WpfApplicationDemo.Control"
    Title="UserControlDemo" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBlock1" Text="下面是用户控件" VerticalAlignment="Top" />
        <StackPanel Height="175" HorizontalAlignment="Left" Margin="20,57,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="246" />
        <my:UserControl1 HorizontalAlignment="Left" Margin="38,46,0,0" x:Name="userControl11" VerticalAlignment="Top" Height="183" Width="406" />
    </Grid>
</Window>

1.2.2、Window的C#代码中直接添加

public partial class UserControlDemo : Window
    {
        public UserControlDemo()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            UserControl1 demo = new UserControl1();
            this.stackPanel1.Children.Add(demo);
        }
    }

或者

1.2.3、Window下Frame.Content加载

https://blog.****.net/lordwish/article/details/52667150

UserControl control = obj as UserControl;
this.frame1.Content = control;

2、ContentControl

2.1、性质

内容控件ContentControl，往往用来加载动态内容，比如动态加载UserControl.xaml。

2.2、用法

2.2.1、contentControl.Content直接加载UserControl.xaml

contentControl.Content = userControl1

参考:https://blog.****.net/xm9304/article/details/46412349

2.2.2、Prism.MVVM架构中ContentControl区域可以动态切换用户控件UserControl

 

2.2.1、Prism.MVVM架构中ContentControl区域 

3、Page

3.1、性质

参考1：https://blog.****.net/software_kid/article/details/9339847

Page 是从 UserControl 继承的，Page 封装了对 Frame 的导航，这也是 Page 的最大特点和职责，而 UserControl 没有这个职责。

参考2：https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.page?redirectedfrom=MSDN&view=netframework-4.7.2#适用于

封装一页可由 Windows Internet Explorer、NavigationWindow 和 Frame 导航到和承载的内容。

3.2、用法

     由以上可以知道，Page可以被NavigationWindow 和 Frame加载。但是不同的方法，有缺点不一样。请参考：

https://blog.****.net/xpj8888/article/details/83022627

3.2.1、Frame.Navigate导航举例

<Window>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <WrapPanel VerticalAlignment="Center">
            <Button Name="btnA" Height="30" Width="60" Margin="5" Click="btnA_Click">页面A</Button>
            <Button Name="btnB" Height="30" Width="60" Click="btnB_Click">页面B</Button>
        </WrapPanel>
        <Frame Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
    </Grid>
</Window>

        private void btnA_Click(object sender, RoutedEventArgs e)
        {
            //注意：这里使用Navigate，不用Source,具体区别自己可以试试
            this.frmMain.Navigate(new Uri("PageA.xaml", UriKind.Relative));
        }

        private void btnB_Click(object sender, RoutedEventArgs e)
        {
            this.frmMain.Navigate(new Uri("PageA.xaml", UriKind.Relative));
        }

3.2.2、Frame.Source加载

参考：https://blog.****.net/lordwish/article/details/52667150

 <Frame x:Name="Frame" Height="1092" Width="1920" Source="Views/StudyPage.xaml" NavigationUIVisibility="Hidden" Panel.ZIndex="1"/>

3.2.3、Frame.Content加载

https://blog.****.net/lordwish/article/details/52667150

private void btnA_Click(object sender, RoutedEventArgs e)
        {
            PageA a = new PageA();
            this.frame.Content = a;
            a.ParentWindow = this;
        }