XAMLユーザーコントロールをグリッドに配置する方法

Question

次のmain.xamlとusercontrolがあります。

グリッドの2行目、2列目にユーザーコントロールを何度も配置する必要があります。ビジュアルスタジオを使用することで、ユーザーコントロールをドラッグアンドドロップすることはできません。コードで行う必要があります。私は知らないどのように

MainPage.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

<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が常駐。これは、コンテキストに応じて<Window>または<UserControl>タグ内に、あなたのXAMLの先頭に定義されているCLR名前空間のエイリアスです。

例えば、

<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が "Views"という名前のフォルダにあるので、：xmlns：UC = "clr-namespace：Test.Views"

<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"); 
     } 
    } 

}

最後に、いけないが、他のアクションを実行するためにログインUserControlからボタンクリックイベントをキャプチャするMainPage.xamlをしてイベントハンドラを使用することを忘れてしまいました。

MainPage.xamlをここで

<UC:Login BtnLoginClick="Login_BtnLoginClick"/> 

Login.xaml [ユーザーコントロール]で定義された "BtnLoginClick" のイベントハンドラ。

私は "Login_BtnLoginClick"を作成したので、この "BtnLoginClick"イベントの新しいイベントを作成します。から来ている：私は

MainPage.cs

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