自定义UserControl模板与属性绑定

本文关键字:属性 绑定 UserControl 自定义 | 更新日期: 2023-09-27 18:02:47

我创建了一个自定义UserControl,它包括一个椭圆和一个标签。标签内容和椭圆的颜色被绑定:绑定属性是DependencyProperties。椭圆的颜色取决于Status,它是bool(一个转换器创建颜色)

这是UserControl1。xaml:

<UserControl x:Class="Plugin_UPS.Views.UserControl1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Converters="clr-namespace:WPF_Prism.Infrastructure.Converters.Ups;assembly=WPF_Prism.Infrastructure"
  mc:Ignorable="d"
  x:Name="UC1"
  d:DesignWidth="200" Height="40">
<UserControl.Resources>
    <ResourceDictionary>
        <Converters:BoolToColorConverter x:Key="BoolToColorConverter"/>
    </ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Height="42" Width="504">       
        <StackPanel HorizontalAlignment="Left" Margin="0,0,0,0" Height="Auto" Width="Auto" Grid.Column="0" Grid.Row="0">
            <Grid Height="Auto" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,0,0" 
                          MinWidth="200" MaxWidth="200" MinHeight="35" MaxHeight="40">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Ellipse HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0"
                                        Fill="{Binding Status, Converter={StaticResource BoolToColorConverter}, UpdateSourceTrigger=PropertyChanged}"
                                        Height="15"
                                        Width="15"
                                        StrokeThickness="1"
                                        Stroke="Black">
                </Ellipse>
                <Label Content="{Binding Text}" Height="Auto" Width="Auto" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="16" Grid.Column="1" Grid.Row="0" />
            </Grid>
        </StackPanel>
</Grid>
</UserControl>

这是UserControl1.xaml.cs:

namespace Plugin_UPS.Views
{
public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
    }
    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(UserControl1));

    public bool Status
    {
        get { return (bool)GetValue(StatusProperty); }
        set { SetValue(StatusProperty, value); }
    }
    public static readonly DependencyProperty StatusProperty =
        DependencyProperty.Register("Status", typeof(bool), typeof(UserControl1));
}
}

这是我的UPSViewModel.cs:

namespace Plugin_UPS.ViewModel
{
public class UPSViewModel
{      
    public UPSViewModel()
    {
    }
    public string UpsModelText { get { return "Model"; } }
    private bool replaceBatteryCondition; 
    public bool ReplaceBatteryCondition { get { return replaceBatteryCondition; } set { replaceBatteryCondition = value;  } }
 }
}

这是我的UPSView.xaml:(这里我实现了UserControl1)

<UserControl x:Class="Plugin_UPS.Views.UPSView"
         x:Name="UPSUC"
         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:i="http://schemas.microsoft.com/expression/2010/interactivity"
         xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
         xmlns:local="clr-namespace:Plugin_UPS"
         xmlns:Controls="clr-namespace:WPF_Prism.Controls.Controls;assembly=WPF_Prism.Controls"
         xmlns:ViewModel="clr-namespace:Plugin_UPS.ViewModel"
         xmlns:Views="clr-namespace:Plugin_UPS.Views"
         d:DataContext="{d:DesignInstance ViewModel:UPSViewModel}"
         mc:Ignorable="d" 
         d:DesignHeight="840" d:DesignWidth="1260">
        <Grid>
            <StackPanel>
                <Views:UserControl1 Margin="10,20,10,10" DataContext="{Binding RelativeSource={RelativeSource Self}}" Text="{Binding UpsModelText}" Status="{Binding ReplaceBatteryCondition}"></Views:UserControl1>
            </StackPanel>
        </Grid>
</UserControl>

但是"状态"answers"文本"的绑定不起作用。(状态="True"或文本="模型"正在工作)。

你知道是什么问题吗?数据上下文有问题吗?

致以最亲切的问候菲尔。

自定义UserControl模板与属性绑定

不能像

那样将UserControl的DataContext设置为自身
DataContext="{Binding RelativeSource={RelativeSource Self}}"

删除该赋值并写入

<Views:UserControl1 Margin="10,20,10,10"
    Text="{Binding UpsModelText}"
    Status="{Binding ReplaceBatteryCondition}" />

现在您必须在UserControl的XAML中指定绑定的源。

有多种方法可以做到这一点,其中之一是像这样设置RelativeSource属性:
<Label Content="{Binding Text,
                 RelativeSource={RelativeSource AncestorType=UserControl}}" ... />
<Ellipse Fill="{Binding Status,
                RelativeSource={RelativeSource AncestorType=UserControl},
                Converter={StaticResource BoolToColorConverter}}" ... />

请注意,在填充绑定上设置UpdateSourceTrigger=PropertyChanged是没有意义的。