如何在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"/>