如何在網格中放置一個 XAML 用戶控件

Question

我有以下 main.xaml 和用戶控件。

我需要將用戶控件多次放置在網格的第 2 行第 2 列，通過使用 visual studio，它不允許拖放用戶控件，所以我想我必須通過代碼來完成，我只是不知道如何

主頁.xaml

<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" x:Name="grid" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush="White" BorderThickness="3" Grid.Column="1" Background="Red" CornerRadius="30"/>
        <TextBlock x:Name="txtCountry" Grid.Column="1" TextWrapping="Wrap"  FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBlock x:Name="txtTime" Grid.Row="1" TextWrapping="Wrap" FontSize="180" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

用戶控制

<UserControl
    x:Class="AlarmPro.TimeOnCity"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AlarmPro"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="150"
    d:DesignWidth="250">

    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border BorderBrush="#FFDE6A6A" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#FFDC4646">
            <TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Background="#FFAE4F00">
            <TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
        </Border>

    </Grid>
</UserControl>

Answer 1

你的意思是這樣的嗎？

 <my:UserControlName Grid.Column="2" Grid.Row="2" ... />

<my:在這種情況下是UserControl所在的CLR命名空間的別名。它根據上下文定義在XAML的頂部，在<Window>或<UserControl>標記內。

例如，

<Window ... 
    xmlns:my="clr-namespace:AssemblyName"
    ...
/>

Answer 2

MainPage.xaml中

<Page
    x:Class="UserControlExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UserControlExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="MainContent" Background="Azure" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden" 
                VerticalScrollBarVisibility="Hidden">                        
            <local:UserControl1 x:Name="MyHelloWorldUserControl" Grid.Row="1" />
        </ScrollViewer>
    </Grid>           
</Page>

UserControl1.xaml

<UserControl
    x:Class="UserControlExample.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UserControlExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Bisque">
        <StackPanel>
            <StackPanel Orientation="Horizontal" Height="81">
                <TextBlock Text="Your Name is" Foreground="Blue" FontSize="30" Margin="0,0,0,10"/>
                <TextBox x:Name="Input" Background="White" Width="225" />
             </StackPanel>
             <Button Content="Click Me" Foreground="Brown" FontSize="30" Click="Button_Click"/>
             <TextBlock x:Name="Output" FontSize="100"/>
         </StackPanel>
     </Grid>
 </UserControl>

Answer 3

MainPage.xaml ，我使用命名空間綁定登錄UserControl：xmlns：UC =“clr-namespace：Test.Views”，因為我在名為“ Views ”的文件夾中有我的usercontrol。

<ScrollViewer>
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
</ScrollViewer>

Login.cs

public partial class Login : UserControl    {

    public event EventHandler BtnLoginClick;

    public Login()
    {
        InitializeComponent();
    }

    private void btnLogin_Click(object sender, RoutedEventArgs e)
    {
        string userName = txtUserName.Text;
        string userPassword = txtUserPassword.Password.Trim();
        if (userName != null && userName != string.Empty && userPassword != null &&       userPassword != string.Empty)
        {
            if (this.BtnLoginClick != null)
            {
                this.BtnLoginClick(this, e);
            }
        }
        else
        {
            MessageBox.Show("Invalid username or password");
        }
    }

}

最后，不要忘記使用MainPage.xaml中的事件處理程序從Login Usercontrol捕獲按鈕單擊事件以執行其他操作。

MainPage.xaml中

<UC:Login BtnLoginClick="Login_BtnLoginClick"/>

這里“BtnLoginClick”是Login.xaml [User Control]中定義的事件處理程序。

當我創建“Login_BtnLoginClick”時，為此“BtnLoginClick”事件創建新事件。

MainPage.cs

private void Login_BtnLoginClick(object sender, EventArgs e)
{
Messagebox.Show("Event captured successfully");
////Here you can add your stuffs...     
}

Answer 4

對於 UWP，在UserControl.xaml中，找到本地命名空間xmlns:local notation: xmlns:local="using:ProjectName.Folder"在頂部（按照慣例，C# 命名空間的命名方式與包含它們的文件夾相同，因此文件夾也意味着命名空間）。

在MainPage.xaml 中，添加對此命名空間的引用。 引用前綴可以是任何所需的名稱：例如， CustomPrefix ，如xmlns:CustomPrefix="using:ProjectName.Folder"中所示。 然后，在MainPage.xaml中的任意位置，通過在其名稱前加上前綴來顯示控件<CustomPrefix:...> 。

UserControl.xaml

<UserControl
   xmlns:local="using:ProjectName.Folder">

主頁.xaml

<Page
   xmlns:CustomPrefix="using:ProjectName.Folder">

   <CustomPrefix:UserControl />

</Page>

需要構建項目以丟棄 Visual Studio 中的 XAML 錯誤，否則設計視圖將保持空白並且 XAML 會出現綠色波浪線。