具有屬性綁定的自定義UserControl模板

Question

我創建了一個自定義UserControl，其中包含一個Ellipse和一個Label。 標簽內容和橢圓的顏色已綁定：綁定屬性是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 =“ 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沒有任何意義。