如何在WPF中正确使用UserControl?

时间:2015-05-15 16:41:04

标签: c# wpf xaml visual-studio-2013

我创建了这个用户控件

<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"

enter image description here

然而,如上所述,但与按钮 usuario 类似。

1 个答案:

答案 0 :(得分:0)

如果没有显式导航控件的可视树,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对象财产存在。

这些更改会创建属性,并将其连接到控件的Text元素的TextBox属性。

最后,在您使用UserControl的位置,您只需设置Text属性(而不是Content):

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