Question

我有一个自定义内容视图，标题为Label，另一个为Label作为细节，编辑为Icon；单击该图标时，详细标签将转换为Entry进行更改，并且更改将继续进行绑定。

我已将多个自定义视图绑定到同一对象的不同属性，并尝试编辑每个视图并移至下一个视图，问题是似乎复制了各个视图

我也放了x:Name，但它仍然与上面的视图重复相同的值..

只需编辑姓氏

现在，如果我移至第三视图并对其进行编辑，它将新值复制到所有先前编辑的值。 -对于这种情况下的姓氏，考虑到页面中使用的视图不相同，这很奇怪，并且在调试时只命中一次该方法。

自定义内容视图：

<StackLayout Orientation="Horizontal"
                     VerticalOptions="Start"
                     Padding="25,10,25,10">
            <StackLayout x:Name="stackLayoutDetail"
                         HorizontalOptions="FillAndExpand">
                <Label x:Name="title"
                       Text="{Binding Title}" />
                <Label x:Name="detail"
                       Text="{Binding Detail}"
                       FontSize="Large"
                       FontAttributes="Bold" />
            </StackLayout>
            <Image x:Name="editIcon"
                   Source="edit_icon.png"
                   WidthRequest="25"
                   HeightRequest="25"
                   IsVisible="{Binding EditIconVisible}">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="EditIcon_Clicked" />
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>

代码背后：

private static Entry newEntry = new Entry();

public static readonly BindableProperty DetailProperty = BindableProperty.Create(propertyName: nameof(Detail),
                                                                                            returnType: typeof(string),
                                                                                            declaringType: typeof(LabelledEntrywithIcon),
                                                                                            defaultValue: default(string));


        public string Detail
        {
            get
            {
                return (string)GetValue(DetailProperty);

            }
            set => SetValue(DetailProperty, value);
        }

private void EditIcon_Clicked(object sender, System.EventArgs e)
        {
            detailLabel = (Label)stackLayoutDetail.Children[1];
            stackLayoutDetail.Children.RemoveAt(1);
            newEntry.Text = Detail;
            stackLayoutDetail.Children.Add(newEntry);
            editIcon.IsVisible = false;
            newEntry.Completed += NewEntry_Completed;

        }


        private void NewEntry_Completed(object sender, System.EventArgs e)
        {
            try
            {
                var _newText = newEntry.Text;
                detailLabel.Text = _newText;
                stackLayoutDetail.Children.RemoveAt(1);
                stackLayoutDetail.Children.Add(detailLabel);
                Detail = _newText;
                editIcon.IsVisible = true;
            }
            catch (System.Exception ex)
            {

                Debug.WriteLine(ex.Message);
            }
        }

页面

<local:LabelledEntrywithIcon x:Name="firstName"
                                     Title="First Name"
                                     Detail="{Binding Fella.FirstName}" />
        <local:LabelledEntrywithIcon  x:Name="lastname"
                                      Title="Last Name"
                                     Detail="{Binding Fella.LastName}" />
        <local:LabelledEntrywithIcon  x:Name="gender"
                                      Title="Gender"
                                     Detail="{Binding Fella.Gender}" />

后面的代码：

ViewModel=new MainViewModel();
BindingContext = ViewModel;

要测试的完整代码在Github存储库中：https://github.com/pmahend1/CustomViewDuplicationIssue

Answer 1

奇怪，但是我更改了一行代码，它现在可以按预期运行。

在类变量上，将private static Entry newEntry= new Entry();更改为 private static Entry newEntry;

使用EditIcon_Clicked方法代替使用的newEntry.Text = Detail;

newEntry = new Entry { Text = Detail };

我不确定为什么每个LabelledEntrywithIcon的新条目都引用相同的引用

Answer 2

您可以通过以下方法简化问题，而不是创建新条目并查找和删除标签并在其后添加新条目：

<StackLayout Orientation="Horizontal"
                 VerticalOptions="Start"
                 Padding="25,10,25,10">
        <StackLayout x:Name="stackLayoutDetail"
                     HorizontalOptions="FillAndExpand">
            <Label x:Name="title"
                   Text="{Binding Title}" />
            <Label x:Name="detail"
                   Text="{Binding Detail}"
                   IsVisible="{Binding ShowLabel}"
                   FontSize="Large"
                   FontAttributes="Bold" />
             <Entry ... IsVisible="{Binding ShowEntry}" ... />
        </StackLayout>
        <Image x:Name="editIcon"
               Source="edit_icon.png"
               WidthRequest="25"
               HeightRequest="25"
               IsVisible="{Binding ShowLabel}">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="EditIcon_Clicked" />
            </Image.GestureRecognizers>
        </Image>
    </StackLayout>

请注意，我有意在入口元素内写...作为您可能要在其中进行的所有自定义（字体大小等）的占位符。

现在，添加两个BindablyProperties（类型为bool）ShowEntry和ShowLabel，其中ShowLabel默认为true，ShowEntry默认为false。现在，您要做的就是调整您的EditIcon_Clicked事件：

    private void EditIcon_Clicked(object sender, System.EventArgs e)
    {
        ShowLabel = false;
        ShowEntry = true;
        newEntry.Text = Detail;
        newEntry.Completed += NewEntry_Completed;

    }

并将NewEntry_Completed修改为

    private void NewEntry_Completed(object sender, System.EventArgs e)
    {
        try
        {
            var _newText = newEntry.Text;
            detailLabel.Text = _newText;
            ShowLabel = true;
            ShowEntry = false;
            Detail = _newText;
        }
        catch (System.Exception ex)
        {

            Debug.WriteLine(ex.Message);
        }
    }

基本上，这与您的解决方案相同，但是您不必将UI项拖到代码后方，尤其是随之而来的错误和错误。

具有Label-Entry的自定义内容视图重复了Xamarin表单

2 个答案: