如何向用户控件添加自定义属性以实现绑定目的

本文关键字：实现绑定自定义属性添加用户控件 | 更新日期: 2023-09-27 18:09:33

我正在制作一个名为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>

如何向用户控件添加自定义属性以实现绑定目的

不需要创建任何附加属性。您的控件仅由一个视图模型定义-只需使用DataContextProperty(docs，示例)。在您的情况下，它是自动设置为每个项目-这是WPF的行为。只需绑定到用户控件内所需的任何属性(其dataContext将由WPF引擎自动初始化)

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

如果你想了解如何添加属性，请阅读Add dependency property to control.

注::实际上，你可以定义你的MusicalNotationBox不是作为一个用户控件，而是作为一个模板在资源:

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

，像

一样使用

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