具有属性绑定的自定义UserControl模板

时间:2016-08-17 09:04:57

标签: c# wpf binding user-controls dependency-properties

我创建了一个自定义UserControl,其中包含一个Ellipse和一个Label。标签内容和椭圆的颜色是绑定的: Binding-Properties是DependencyProperties。 Ellipse的颜色取决于Status,它是一个bool(转换器创建Color)

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

但&#34; Status&#34;和&#34;文字&#34;不管用。 (Status =&#34; True&#34;或Text =&#34; Model&#34;正在运行)。

你有什么想法可能是什么问题? DataContext有问题吗?

最好的问候 菲尔

1 个答案:

答案 0 :(得分:0)

您不能将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}}" ... />

请注意,在Fill Binding上设置UpdateSourceTrigger=PropertyChanged没有意义。