如何将自定义属性添加到用户控件以进行绑定？

Question

我想提出一个名为的用户控件MusicalNotationBox 只存储1 MusicalNotation （这是一个强制性的一个MusicalNotationBox有一个非空MusicalNotation对象绑定）。 我需要的绑定MusicalNotation从XAML（MVVM）属性设置为一个在我MusicalNotationBoxModelView 。

MusicalNotationBox是一个UserControl，用于可视化给定集合中的特定MusicalNotation 。

因此，我希望能够采用这种方式（将我的ModelView作为DataContext ，ofc）

<ItemsControl ItemsSource={Binding ListOfMusicalNotations}>
    <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemsTemplate>
        <DataTemplate>
            <c:MusicalNotationBox MusicalNotation={Binding MusicalNotation}/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

（我添加了ItemsControl标记，以阐明<MusicalNotationBox>使用方式。）

如何实现呢？

---

额外：

这是我的MusicalNotationBox.XAML （以防万一）

<UserControl x:Class="NumberedMusicalScoresUserControl.MusicalNotationBox"
         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:local="clr-namespace:NumberedMusicalScoresUserControl.MusicalNotationBoxProperties"
         mc:Ignorable="d">
<UserControl.Resources>
    <local:DotConverter x:Key="DotConverter"/>
    <local:NoteConverter x:Key="NoteConverter"/>
    <local:AccidentalConverter x:Key="AccidentalConverter"/>
    <local:BackgroundConverter x:Key="BackgroundConverter"/>
</UserControl.Resources>
<UserControl.InputBindings>
    <KeyBinding Key="OemPeriod" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="Blank"/>
    <KeyBinding Key="D0" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="Rest"/>
    <KeyBinding Key="D1" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N1"/>
    <KeyBinding Key="D2" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N2"/>
    <KeyBinding Key="D3" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N3"/>
    <KeyBinding Key="D4" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N4"/>
    <KeyBinding Key="D5" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N5"/>
    <KeyBinding Key="D6" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N6"/>
    <KeyBinding Key="D7" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="N7"/>
    <KeyBinding Modifiers="Control" Key="P" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="SHARP"/>
    <KeyBinding Modifiers="Control" Key="T" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="FLAT"/>
    <KeyBinding Modifiers="Control" Key="OemPlus" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="OCTAVE+"/>
    <KeyBinding Modifiers="Control" Key="OemMinus" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="OCTAVE-"/>
    <KeyBinding Modifiers="Control" Key="OemPeriod" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="DOT+"/>
    <KeyBinding Modifiers="Control" Key="OemComma" Command="{Binding KeyboardHotkeyCommand}" CommandParameter="DOT-"/>
</UserControl.InputBindings>

<Grid x:Name="grid" Margin="10,5,10,5"
      HorizontalAlignment="Center" VerticalAlignment="Center"
      Background="{Binding IsSelectedOrFocused, Converter={StaticResource BackgroundConverter}, Mode=OneWay}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock Grid.Column="0" Grid.Row="1"
               Text="b"
               Visibility="{Binding Path=MusicalNotation.Accidental, Converter={StaticResource AccidentalConverter}, ConverterParameter=FL, Mode=OneWay}" 
               FontSize="15" FontFamily="CourierNew" 
               HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Path Grid.Column="1" Grid.Row="1" Stroke="Black" StrokeThickness="1" Stretch="Fill"
          Visibility="{Binding Path=MusicalNotation.Accidental, Converter={StaticResource AccidentalConverter}, ConverterParameter=SP, Mode=OneWay}" >
        <Path.Data>
            <LineGeometry StartPoint="1,0" EndPoint="0,1">
                <LineGeometry.Transform>
                    <RotateTransform CenterX="0" CenterY="0" Angle="30"/>
                </LineGeometry.Transform>
            </LineGeometry>
        </Path.Data>
    </Path>
    <TextBlock Grid.Column="1" Grid.Row="1" 
               Text="{Binding Path=MusicalNotation.Note, Converter={StaticResource NoteConverter}, Mode=OneWay}" 
               FontSize="15" FontFamily="CourierNew" 
               HorizontalAlignment="Center" VerticalAlignment="Center"
               Margin="2.5,0,2.5,0"/>
    <ItemsControl Grid.Column="1" Grid.Row="0" 
                  ItemsSource="{Binding Path=MusicalNotation.Octave, Converter={StaticResource DotConverter}, ConverterParameter=TOP, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse HorizontalAlignment="Center" VerticalAlignment="Top"
                         Margin="{Binding Margin}" Fill="{Binding Fill}" 
                         Width="{Binding Diameter}" Height="{Binding Diameter}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <ItemsControl Grid.Column="1" Grid.Row="2" 
                  ItemsSource="{Binding Path=MusicalNotation.Octave, Converter={StaticResource DotConverter}, ConverterParameter=BOT, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse HorizontalAlignment="Center" VerticalAlignment="Bottom"
                         Margin="{Binding Margin}" Fill="{Binding Fill}" 
                         Width="{Binding Diameter}" Height="{Binding Diameter}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <ItemsControl Grid.Column="2" Grid.Row="1" 
                  ItemsSource="{Binding Path=MusicalNotation.Dot, Converter={StaticResource DotConverter}, ConverterParameter=RIGHT, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse HorizontalAlignment="Left" VerticalAlignment="Center"
                         Margin="{Binding Margin}" Fill="{Binding Fill}" 
                         Width="{Binding Diameter}" Height="{Binding Diameter}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Answer 1

无需创建任何其他属性。 您的控件仅由一个视图模型定义-只需使用DataContextProperty（ docs ， example ）。 在您的情况下，将自动为每个项目设置-这就是WPF的行为。 只需绑定到usercontrol内部所需的任何属性（WPF引擎将自动初始化其dataContext）

<ItemsControl ItemsSource="{Binding ListOfMusicalNotations}">
    <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" IsItemsHost="True"/>
            </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemsTemplate>
        <DataTemplate>
            <c:MusicalNotationBox/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

如果要了解有关添加属性的信息，请阅读将依赖项属性添加到control 。

PS：实际上，您可以将MusicalNotationBox定义为不是用户控件而是资源中的模板：

<Resources>
        <DataTemplate x:Key="MusicalNotationBox">
                <TextBox Text="{Binding Name}"/>
        </DataTemplate>
</Resources>

并像这样使用

<ItemsControl.ItemsTemplate>
    <StaticResource x:Key="MusicalNotationBox"/>
</ItemsControl.ItemTemplate>