如何在WPF中正確使用UserControl？

Question

我創造了這個用戶控件

<UserControl x:Class="POS1.Windows.Controles.txttransparente" 
      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" 
      Height="auto" Width=" auto" 
      > 


    <Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"> 
     <TextBox Name="txt1" Background="Transparent" BorderBrush="Black" BorderThickness="3" Text="Usuario" FontSize="20" FontWeight="ExtraBold" ></TextBox> 
    </Border> 


</UserControl> 

當我把它添加到一個窗口，

<Controls:MetroWindow 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" 
     xmlns:Custom="http://modernwpf" xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" 
    x:Class="POS1.MainWindow" 
    xmlns:txt="clr-namespace:POS1.Windows.Controles" 
     Title="MainWindow" Height="292" Width="535" AllowsTransparency="True" WindowStyle="None" 
     > 


    <Grid> 

     <Grid.RowDefinitions > 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions > 
      <ColumnDefinition Width="133*"/> 
      <ColumnDefinition Width="134*"/> 
      <ColumnDefinition Width="135*"/> 
      <ColumnDefinition Width="133*"/> 
     </Grid.ColumnDefinitions> 
     <Border Grid.ColumnSpan="4" Grid.RowSpan="7" CornerRadius="40,50,60,70"> 
      <Border.Background> 
       <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/b.jpg"/> 
      </Border.Background> 

     </Border> 
     <Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"> 
      <TextBox Background="Transparent" BorderBrush="Black" BorderThickness="3" Text="Usuario" FontSize="20" FontWeight="ExtraBold" ></TextBox> 
     </Border> 
     <TextBox Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Text="Contraseña" FontSize="20" FontWeight="ExtraBold" ></TextBox> 
     <Button Grid.Row="5" Grid.Column="1" Content="Aceptar" FontSize="12" FontWeight="ExtraBold" ></Button> 
     <Button Grid.Row="5" Grid.Column="2" Content="Olvidé contraseña" FontSize="12" FontWeight="ExtraBold" ></Button> 

     <txt:txttransparente Content=" Hola Mundo" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2" ></txt:txttransparente> 



    </Grid> 
</Controls:MetroWindow> 

，你看，我不能修改txt1.Text，所以我代替Content="hola mundo"

但是，這看起來如上所述，但不像按鈕usuario。

Answer 1

如果沒有顯式導航控件的可視樹，UserControl中的元素需要實現機制，以使用控件將數據從客戶端代碼傳遞到其中包含的元素。執行此操作的常見策略是簡單地在您的UserControl類型本身聲明屬性，然後將控件樹中相應的成員綁定到該屬性。

例如：

class txttransparente : UserControl 
{ 
    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
     "Text", typeof(string), typeof(txttransparente)); 

    public string Text 
    { 
     get { return (string)GetValue(TextProperty); } 
     set { SetValue(TextProperty, value); } 
    } 
} 

然後在你的XAML爲UserControl：

<UserControl x:Class="POS1.Windows.Controles.txttransparente" 
      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:local="clr-namespace:POS1.Windows.Controles" 
      mc:Ignorable="d" 
      Height="auto" Width=" auto"> 

    <Border BorderBrush="Yellow" Background="Transparent" CornerRadius="10,10,10,10" 
      Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"> 
     <TextBox Name="txt1" Background="Transparent" BorderBrush="Black" 
        BorderThickness="3" 
        Text="{Binding Text, 
RelativeSource={RelativeSource AncestorType={x:Type local: 
txttransparente}}}" 
        FontSize="20" 
        FontWeight="ExtraBold"/> 
    </Border> 
</UserControl> 

注意，不僅在那裏的TextBox.Text屬性結合的變化，還增設了xmlns:local的聲明，以便綁定可以找到屬性存在的父對象UserControl。

這些更改會創建屬性，並將其連接到控件的TextBox元素的Text屬性。

於是最後，在您使用的UserControl，您只需設置Text屬性（而不是Content）：

<txt:txttransparente Text="Hola Mundo" Grid.Row="6" Grid.Column="1" Grid.ColumnSpan="2"/>