簡介

"用戶控件"繼承自UserControl,而UserControl繼承自ContentControl,也就是內容控件
UserControl和Window是一個層次上的，都有xaml和cs文件

流程

創建用戶控件

寫好用戶控件

<UserControl x:Class="WpfDemo.UserControlDemo.OwnUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Content="這是一個用戶控件"></Label>
        <Slider Minimum="0" Maximum="100" Grid.Row="1"></Slider>
    </Grid>
</UserControl>
 

用戶控件也可以套用用戶控件，組成更復雜的界面

<UserControl x:Class="WpfDemo.UserControlDemo.UseUserControlUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:userControlDemo="clr-namespace:WpfDemo.UserControlDemo"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Content="這是另一個用戶控件，在這裏使用了OwnUserControl用戶控件"></Label>
        <userControlDemo:OwnUserControl Grid.Row="1"></userControlDemo:OwnUserControl>
        <Label Grid.Row="2" Content="這個用戶控件在OwnUserControl的基礎上再添加一個Slider"></Label>
        <Slider Grid.Row="3" Minimum="0" Maximum="200" ></Slider>
    </Grid>
</UserControl>
 

窗體引用用戶控件

<Window x:Class="WpfDemo.UserControlDemo.UseUserControlWindow"
        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:userControlDemo="clr-namespace:WpfDemo.UserControlDemo"
        mc:Ignorable="d"
        Title="UseUserControlWindow" Height="600" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="0.2*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Content="使用OwnUserControl用戶控件"></Label>
        <userControlDemo:OwnUserControl Grid.Row="1"></userControlDemo:OwnUserControl>
        <Label Grid.Row="2" Content="使用UseUserControlUserControl用戶控件"></Label>
        <userControlDemo:UseUserControlUserControl Grid.Row="3"></userControlDemo:UseUserControlUserControl>
    </Grid>
</Window>
 

示例代碼

https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/UserControlDemo

用戶控件(UserControl)