WPF 用户控件，托管动态内容以供用户控件重用。 MVVM

Question

我会尽量清楚自己想要完成的工作，并愿意接受有关其他方法以实现我想要的结果的建议。

1000 英尺的景色。

我有一个UserControl，我想在我的应用程序的每个屏幕中重复使用它。此控件更像是带有图标 (bindable)、动态 (bindable) 标签的模板外观。

UserControl.xaml (CardView.xaml)

<Border BorderBrush="{Binding Path=BorderColor, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
     <StackPanel Orientation="Vertical" Style="{StaticResource CardStyle}">
      <StackPanel>
           <Border Style="{StaticResource MyBorderStyle}">
               <Label Content="{Binding Path=CardTitle, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
            </Border>
      </StackPanel>
      <Label Style="{StaticResource LabelIcon}">
          <Path Fill="#FF000000" HorizontalAlignment="Center" 
             Stretch="UniformToFill"  Data="{Binding Path=VectorString, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal">
      // Dynamic Content Here. 
      //   Any kind of XAML content for the consumer of the control. 
      //     not in C# but I want to host the control and put controls in 
      //     here that I can bind to in XMAL by parents view model. 
    </StackPanel>
</Border>

消费者代码 (customer.xaml)

<local:CardView CardTitle="Test" VectorString="F1 M" BorderColor="#FF0088">
  // Here's where I want to put dynamic XAML content.
  // Want to host anything and bind to it using the consumers View Model.
  // Example
     <Button Content="{Binding SomeText}" />
     <StackPanel>
         <Button>..... variable content but bindable
     </StackPanel>
 </local:CardView>

所以总而言之，我有一个用户控件，我想在多个地方使用它并且在正文中具有可变内容。变量内容将在使用者 XAML 中进行标记。

我已经挖掘出一些建议，但似乎不适合模型

1. 使用内容模板。我本来打算，但你如何绑定到内容模板中的控件？

2. 内容演示者。如何绑定到消费者视图模型？

Answer 1

这很容易通过使用ContentControl 来实现。只需将其插入您的 CardView.xaml：

<Border BorderBrush="{Binding Path=BorderColor, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
 <StackPanel Orientation="Vertical" Style="{StaticResource CardStyle}">
  <StackPanel>
       <Border Style="{StaticResource MyBorderStyle}">
           <Label Content="{Binding Path=CardTitle, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
        </Border>
  </StackPanel>
  <Label Style="{StaticResource LabelIcon}">
      <Path Fill="#FF000000" HorizontalAlignment="Center" 
         Stretch="UniformToFill"  Data="{Binding Path=VectorString, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
  // Dynamic Content Here. 
  <ContentControl Content={Binding CustomContent} /> 
</StackPanel>

然后在您的 ViewModel 中添加一个类型为对象的属性“CustomContent”，其中包含您的Customer 的实例。