将 属性 绑定到用户控件

Bind property to UserControl

我遇到了与此 Thread 相同的问题。

我也读过这个 article 但我找不到出现此异常的原因:

我正在调用一个 UserControl,其中应该调用另一个 UserControl。

在第一个 UserControl 中,我想执行以下操作

<UserControl
x:Class="TwitterUniversalHubTest1.UCGlobalTweet"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TwitterUniversalHubTest1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="150"
d:DesignWidth="400">

<Grid Height="Auto">
    <Border Background="#FFFFFFFF" Margin="10 0 0 5" CornerRadius="2 2 15 2">
        <Grid Width="380">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <StackPanel Tag="{Binding UserID}" Grid.Row="0" Name="ProfileInfo" Tapped="Profile_Tapped" Orientation="Horizontal" Margin="15 15 15 0">
                <Grid Width="360" Margin="0 0 0 10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="50"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Height="45" Width="45" CornerRadius="5">
                        <Border.Background>
                            <ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
                        </Border.Background>
                    </Border>
                    <StackPanel Grid.Column="1" Orientation="Vertical" Margin="0 5 0 0">
                        <TextBlock Text="{Binding FullName}" Foreground="Black" FontSize="18" FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding TwitterHandle}" Foreground="DarkGray" FontSize="12"/>
                    </StackPanel>
                    <Image Grid.Column="2" Source="Assets/ActionIcons/Twitter_logo_blue_32.png" Width="32" VerticalAlignment="Top"></Image>
                </Grid>
            </StackPanel>

            <StackPanel  Grid.Row="1" Margin="14.5,0,0,0" Height="Auto">

                <StackPanel Name="TwContent" Tag="{Binding TweetID}" Margin="15 0 15 0" Tapped="Content_Tapped">

                    <local:ComplexTextPresenter x:Name="ComplexTextPresenterElement" Input="{Binding Content}" DataContext="{Binding Content}"/>
                    <ItemsControl  ItemsSource="{Binding ContentImages}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Image Source="{Binding }" MaxWidth="350" Margin="0 0 0 5"  HorizontalAlignment="Center"></Image>

                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    <TextBlock Foreground="DarkGray" Text="{Binding DateSend}" FontSize="10"></TextBlock>
                </StackPanel>
                <StackPanel Name="ActionButtons">
                    <Grid Tag="{Binding TweetID}" Width="380" Height="25" Margin="0 0 0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Button Grid.Column="0" HorizontalAlignment="Center" Margin="20 0 0 0" Style="{StaticResource replyActionButton}" Tapped="Reply_Tapped"></Button>

                        <ToggleButton Grid.Column="2" HorizontalAlignment="Center" Style="{StaticResource retweetActionButton}" Tapped="Retweet_Tapped"></ToggleButton>
                        <TextBlock Grid.Column="3" HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding RetweetCount}" Foreground="DarkGray"/>

                        <ToggleButton x:Name="FavButton" Grid.Column="4" HorizontalAlignment="Center" 
                                          Style="{StaticResource likeActionButton}" 
                                          IsChecked="{Binding LikeState}"  
                                          Tapped="Favourite_Tapped"/>
                        <TextBlock Grid.Column="5"  HorizontalAlignment="Left" Margin="-15 0 0 0" VerticalAlignment="Center" Text="{Binding LikeCount}" Foreground="DarkGray"/>
                    </Grid>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>
</Grid>

Input="{Binding Content}"中的内容属性是一个字符串。

输入 属性 绑定出现问题。 ItemsControl 中的绑定工作正常。如异常所述,绑定位于 Line:43 位置:90.

ComplexTextPresenterElement 的代码隐藏如下所示:

public static readonly DependencyProperty InputProperty = DependencyProperty.Register("Input", typeof(string), typeof(UCGlobalTweet), new PropertyMetadata(default(string), InputPropertyChangedCallback));

private static void InputPropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
    var ctrl = dependencyObject as ComplexTextPresenter;
    if (ctrl == null)
        return;
    ctrl.Init();
}

public static readonly DependencyProperty InputCollectionProperty = DependencyProperty.Register("InputCollection", typeof(ObservableCollection<object>), typeof(UCGlobalTweet), new PropertyMetadata(default(ObservableCollection<object>)));
public static readonly DependencyProperty OnHyperlinkCommandProperty = DependencyProperty.Register("OnHyperlinkCommand", typeof(ICommand), typeof(UCGlobalTweet), new PropertyMetadata(default(ICommand)));

private IEnumerable<object> GetParsedInput()
{
    List<BaseInputPart> inputParts = new List<BaseInputPart>();
    var strings = Input.Split(new[] { " " }, StringSplitOptions.None).ToList();

    foreach (var s in strings)
    {
        if (s.IsHyperlink())
        {
            inputParts.Add(new HyperLinkPart { Content = s });
        }
        else
        {
            inputParts.Add(new LiteralPart { Content = s });
        }
    }
    return inputParts.OfType<object>().ToList();
}

public string Input
{
    get { return (string)GetValue(InputProperty); }
    set { SetValue(InputProperty, value); }
}

public ObservableCollection<object> InputCollection
{
    get { return (ObservableCollection<object>)GetValue(InputCollectionProperty); }
    private set { SetValue(InputCollectionProperty, value); }
}

public ICommand OnHyperlinkCommand
{
    get { return (ICommand)GetValue(OnHyperlinkCommandProperty); }
    set { SetValue(OnHyperlinkCommandProperty, value); }
}

private void Init()
{
    InputCollection = new ObservableCollection<object>(GetParsedInput());
}

public ComplexTextPresenter()
{
    this.InitializeComponent();
}


public abstract class BaseInputPart
{
    public abstract string Content { get; set; }
}

public class HyperLinkPart : BaseInputPart
{
    public override string Content { get; set; }
}

public class LiteralPart : BaseInputPart
{
    public override string Content { get; set; }
}

//更新:这是 UCGlobalTweet.xaml.cs

    public sealed partial class UCGlobalTweet : UserControl
{
    private readonly NavigationHelper navigationHelper;
    private readonly ObservableDictionary defaultViewModel = new ObservableDictionary();
    private readonly ResourceLoader resourceLoader = ResourceLoader.GetForCurrentView("Resources");

    //passingparameter
    public string MyContentProperty { get; set; }

    public UCGlobalTweet()
    {
        this.InitializeComponent();
        Init();
    }

    private void Init()
    {

        ComplexTextPresenterElement.Input = "This is where the Content string has to be....";
        ComplexTextPresenterElement.OnHyperlinkCommand = new RelayCommand<object>(Execute);
    }

    private void Execute(object o)
    {
        //put here the code that can open browser 
    }

    public ObservableDictionary DefaultViewModel
    {
        get { return this.defaultViewModel; }
    }

    // Tap user specific content
    private void Profile_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Debug.WriteLine("I've clicked on information from Profile --> UserInfoPage");
        List<object> passingParameters = new List<object>();

        StackPanel st = (StackPanel)sender;
        string userIDList = (string)st.Tag;

        //provisional Data transfer
        // get UserObject out of SearchResult, therefore I have to put the user content as a global variable to access it here, but this will require a lot of space probably...
        // So for now I recall the UserObject again.

        var usersResponse =
               (from user in TweetContent.Connection.User
                where user.Type == UserType.Lookup &&
                      user.UserIdList == userIDList
                //user.ScreenNameList == "JoeMayo,Linq2Tweeter"
                select user).ToList();

        User curUser = usersResponse.FirstOrDefault();
        passingParameters.Add(curUser);

        (Window.Current.Content as Frame).Navigate(typeof(UserInfoPage), passingParameters);
    }

    // Tap tweet specific content
    private void Content_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Debug.WriteLine("I've clicked the Tweet content --> Going to TweetInfoPage");
        List<object> passingParameters = new List<object>();

        StackPanel ContentTapped = (StackPanel)sender;
        ulong tag = (ulong)ContentTapped.Tag;
        var test = TweetContent.FulltweetList;
        var tweet = test.FirstOrDefault(tw => tw.TweetID == tag);

        passingParameters.Add(tweet);


        (Window.Current.Content as Frame).Navigate(typeof(TweetInfoPage), passingParameters);

    }

    //Action Buttons
    private void Reply_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Debug.WriteLine("Reply Button Tapped");
        var test = (Button)sender;

        e.Handled = true;
        Debug.WriteLine("New State for Reply: " + test.IsPressed);
    }

    private void Retweet_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Debug.WriteLine("Retweet Button Tapped");
        //var test = (Button)sender;

        //e.Handled = true;
        //Debug.WriteLine("New State for Retweet: " + test.IsPressed);
    }

    private async void Favourite_Tapped(object sender, TappedRoutedEventArgs e)
    {
        try
        {
            Debug.WriteLine("Favourite Button Tapped");
            ToggleButton tBtn = (ToggleButton)sender;
            Grid pGrid = (Grid)tBtn.Parent;
            var curTweet = TweetContent.FulltweetList.Where(tw => tw.TweetID.Equals(pGrid.Tag));

            if (tBtn.IsChecked == false)
            {
                Debug.WriteLine("Status should be Checked: " + tBtn.IsChecked);
                await TweetContent.Connection.DestroyFavoriteAsync((ulong)pGrid.Tag);
                curTweet.First().LikeCount--;
            }

            if (tBtn.IsChecked == true)
            {
                Debug.WriteLine("Status should be UnChecked: " + tBtn.IsChecked);
                await TweetContent.Connection.CreateFavoriteAsync((ulong)pGrid.Tag);
                curTweet.First().LikeCount++;
            }
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Error while updating Favourite State: Message: " + ex);
        }
        finally
        {
            e.Handled = true;
        }
    }

    private void RealLink_Clicked(object sender, RoutedEventArgs e)
    {
        var hyperlink = sender as Hyperlink;
        if (hyperlink == null) return;
        //Process.Start(hyperlink.NavigateUri.AbsoluteUri);
    }

}

下面是 ComplexTextPresenter.xaml - 我所说的第二个 UserControl

<UserControl
x:Class="TwitterUniversalHubTest1.ComplexTextPresenter"
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:ts="using:TwitterUniversalHubTest1"
xmlns:panel="using:Gregstoll"  
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" x:Name="This">
<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="HyperlinkDataTemplateKey">
            <HyperlinkButton Padding="0" Margin="0" FontSize="12" CommandParameter="{Binding }" Command="{Binding ElementName=This, Path=OnHyperlinkCommand}" Content="{Binding Path=Content}" Foreground="Blue"/>
        </DataTemplate>
        <DataTemplate x:Key="LiteralDataTemplateKey">
            <TextBlock Padding="0" Margin="0" FontSize="12" Text="{Binding Path=Content}"></TextBlock>
        </DataTemplate>
        <ts:MyDataTemplateSelector x:Key="DataTemplateSelectorKey"
                              LiteralDataTemplate ="{StaticResource LiteralDataTemplateKey}"
                              HyperlinkDataTemplate="{StaticResource HyperlinkDataTemplateKey}"/>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <!--<Rectangle Fill="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>-->
    <ListBox Margin="-5 0 0 15" Foreground="Black" ItemsSource="{Binding ElementName=This, Path=InputCollection}" ItemTemplateSelector="{StaticResource DataTemplateSelectorKey}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <panel:UniversalWrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ListBox>
</Grid>

干杯, 乌尔平

您的绑定中没有 DataContextElementNameSource。有几种方法可以使代码工作,我会给你最简单的方法,你可以选择其中的任何一种。

1) 将 UserControlDataContext 设置为 {Binding RelativeSource={RelativeSource Self}}。不过,这是一种糟糕的方法,因为您可能会覆盖现有的 DataContext 或从外部代码中覆盖它。

2) 命名您的 UserControl 并使用 ElementName.

绑定到它
Input="{Binding Content, ElementName=userControl}"

3) 使用{x:Bind}:

Input="{x:Bind Content}"

当您注册您的属性时,您应该传递包含属性的 class 的类型,但您传递的是 typeof(UCGlobalTweet)。你应该这样做:

class ComplexTextPresenterElement
{
    public static readonly DependencyProperty InputProperty = DependencyProperty.Register("Input", typeof(string), typeof(ComplexTextPresenterElement), new PropertyMetadata(default(string), InputPropertyChangedCallback));    
    public static readonly DependencyProperty InputCollectionProperty = DependencyProperty.Register("InputCollection", typeof(ObservableCollection<object>), typeof(ComplexTextPresenterElement), new PropertyMetadata(default(ObservableCollection<object>)));
    public static readonly DependencyProperty OnHyperlinkCommandProperty = DependencyProperty.Register("OnHyperlinkCommand", typeof(ICommand), typeof(ComplexTextPresenterElement), new PropertyMetadata(default(ICommand)));
}