带有属性-Binding 的自定义 UserControl 模板

Question

我创建了一个包含椭圆和标签的自定义用户控件。椭圆的标签内容和颜色是绑定的： Binding-Properties 是 DependencyProperties。椭圆的颜色取决于状态，它是一个布尔值（转换器创建颜色）

这是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>

但是 "Status" 和 "Text" 的绑定不起作用。（Status="True" 或 Text="Model" 正在工作）。

您知道问题出在哪里吗？ DataContext 有问题吗？

此致菲尔

Answer 1

您不能像

那样将 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 没有任何意义。

带有属性-Binding 的自定义 UserControl 模板

Custom UserControl Template with Property-Binding

c#

wpf

binding

user-controls

dependency-properties

带有 属性-Binding 的自定义 UserControl 模板

Custom UserControl Template with Property-Binding

c#

wpf

binding

user-controls

dependency-properties

带有属性-Binding 的自定义 UserControl 模板