如何在 UWP 的 ItemsRepeater 中使用 UserControl

Question

我正在尝试在 ItemsRepeater 中使用 UserControl，但遇到问题 it.I 我正在使用 Prism 和 MVVM 模型

我在单独的 A.xaml 文件中定义了一个 UserControl

  <UserControl>
  <Grid>
     <Button Background="Grey" Content="{x:Bind AViewModel.text}">
  <Button>
  <Grid>
  <UserControl>

相应的 A.xaml.cs 文件绑定到定义属性文本的 AViewModel

我有另一个 XAML 文件 B.xaml，它使用如下定义的控件

<Grid>
  <ItemsRepeater ItemSource={"x:Bind BViewModel.ListOfObservableCollection"}>
     <ItemRepeater.Layout>
        <StackLayout>
     </StackLayout>
  </ItemRepeater.Layout>
</ItemsRepeater>
</Grid>

这个 XAML 文件有一个对应的 B.XAML.cs 文件绑定到 BViewModel，它有 Observable 集合列表。我希望通过使用 UserControl 显示一个垂直的按钮列表，其中包含来自观察集合列表的文本。我该如何实现？

Answer 1

How to use UserControls in an ItemsRepeater for UWP

您可以将 UserControl 插入 ItemsRepeater 的 ItemTemplate。并给 UserControl DependencyProperty 以接收文本值。请注意，您需要将 ListOfObservableCollection 内容编辑为 AViewModel，如下所示

用户控件

<UserControl>
    <Grid>
        <Button Background="Gray" Content="{Binding ButtonContent}" />
    </Grid>
</UserControl>

代码隐藏

 public sealed partial class AControl : UserControl
  {
      public AControl()
      {
          this.InitializeComponent();
          (this.Content as FrameworkElement).DataContext = this;
      }


      public string ButtonContent
      {
          get { return (string)GetValue(ButtonContentProperty); }
          set { SetValue(ButtonContentProperty, value); }
      }

      // Using a DependencyProperty as the backing store for ButtonContent.  This enables animation, styling, binding, etc...
      public static readonly DependencyProperty ButtonContentProperty =
          DependencyProperty.Register("ButtonContent", typeof(string), typeof(AControl), new PropertyMetadata(null));

  }

用法

<Page.DataContext>
    <local:BViewModel x:Name="ViewModel" />
</Page.DataContext>
<Grid>
    <muxc:ItemsRepeater ItemsSource="{Binding ListOfObservableCollection}">
        <muxc:ItemsRepeater.ItemTemplate>
            <DataTemplate>
                <local:AControl ButtonContent="{Binding Text}" />
            </DataTemplate>
        </muxc:ItemsRepeater.ItemTemplate>
    </muxc:ItemsRepeater>
    <local:AControl ButtonContent="hh" />
</Grid>

代码隐藏

public sealed partial class MainPage : Page
{
   
    public MainPage()
    {
        this.InitializeComponent();
     
    }
}
public class AViewModel
{    
    public string Text { get; set; }
   
}
public class BViewModel
{
    public ObservableCollection<AViewModel> ListOfObservableCollection { get; set; }
    public BViewModel()
    {
        ListOfObservableCollection = new ObservableCollection<AViewModel>();
        ListOfObservableCollection.Add(new AViewModel { Text = "Test1" });
        ListOfObservableCollection.Add(new AViewModel { Text = "Test1" });
        ListOfObservableCollection.Add(new AViewModel { Text = "Test1" });
        ListOfObservableCollection.Add(new AViewModel { Text = "Test1" });
    }
}

如何在 UWP 的 ItemsRepeater 中使用 UserControl

How to use UserControls in an ItemsRepeater for UWP

c#

xaml

uwp-xaml