Как связать WPF CustomControl с ListBox - PullRequest
Новая
       16

Как связать WPF CustomControl с ListBox

2 голосов
/ 22 мая 2010

Я пытаюсь создать очень простой браузер контактов. У меня есть объекты коллекции контактов, которые отображаются в элементе управления ListBox, который показывает полное имя контакта, а справа у меня есть customControl с именем BasicContactCard. Это XAML для ContacWindow, в котором отображается ListBox: 

<DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
    <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
        <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
    </Border>
    <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="0.125*" />
        </Grid.RowDefinitions>
        <local:BasicContactCard Margin="8 8 8 8" />
        <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
    </Grid>
</DockPanel>

и это XAML для CustomControl: 

 <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8">
    <Grid Width="auto" Height="auto" DockPanel.Dock="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <TextBlock x:Name="companyField" Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Company"/>
        <TextBlock x:Name="contactField" Grid.Row="1" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Contact"/>
        <TextBlock x:Name="phoneField" Grid.Row="2" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="Phone"/>
        <TextBlock x:Name="emailField" Grid.Row="3" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="email"/>
    </Grid>
</DockPanel>

У меня проблема в том, как связать отдельные элементы CustomControl с объектом, находящимся за SelectedItem в ListBox?

Ответы [ 3 ]

0 голосов
/ 22 мая 2010

Вы можете использовать свойство SelectedItem объекта ListBox в качестве своего DataContext (это не DataSource, а что-то «похожее», если хотите) для пользовательского элемента управления.

Предположим, у вас есть этот объект: 

public class Contact
{
    public string Name { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public string Email { get; set; }
}

Тогда это ваш новый XAML: 

    <DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
        <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
            <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
        </Border>
        <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" />
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="0.125*" />
            </Grid.RowDefinitions>
            <local:BasicContactCard Margin="8 8 8 8" />
            <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
        </Grid>
    </DockPanel>

    <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8" DataContext="{Binding ElementName='contactList', Path=SelectedItem}">
        <Grid Width="auto" Height="auto" DockPanel.Dock="Top">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <TextBlock x:Name="companyField" Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Company }"/>
            <TextBlock x:Name="contactField" Grid.Row="1" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Contact }"/>
            <TextBlock x:Name="phoneField" Grid.Row="2" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Phone }"/>
            <TextBlock x:Name="emailField" Grid.Row="3" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="8,8,8,8" Text="{Binding Email }"/>
        </Grid>
    </DockPanel>

Ключевая часть такова: 

    <DockPanel Width="auto  " Height="auto" Margin="8,8,8,8" DataContext="{Binding ElementName='contactList', Path=SelectedItem}">

Конечно, посмотрите, как получить значения для TextBlock:

Text = "{Связывающая компания}" />

Там вы устанавливаете DataContext DockPanel из выбранного элемента списка ListBox для контактов.

Я не проверял это, но я думаю, что у вас есть представление о двух взаимосвязанных вещах. Удачи.

0 голосов
/ 16 июня 2010

Ну, в конце концов я понял это, и все оказалось намного проще, чем я думал!Doh!

В основном я установил DataContext для объекта Grid в ContactWindow на ListBox, чтобы любой объект внутри этой Grid наследовал DataContext. 

<DockPanel Width="auto" Height="auto" Margin="8 8 8 8">
    <Border Height="56" HorizontalAlignment="Stretch" VerticalAlignment="Top" BorderThickness="1" CornerRadius="8" DockPanel.Dock="Top" Background="Beige">
        <TextBox Height="32" Margin="23,5,135,5" Text="Search for contact here" FontStyle="Italic" Foreground="#FFAD9595" FontSize="14" BorderBrush="LightGray"/>
    </Border>
    <ListBox x:Name="contactList" DockPanel.Dock="Left" Width="192" Height="auto" Margin="5 4 0 8" ItemsSource="{Binding}" DisplayMemberPath="FullName" />
    <Grid DataContext="{Binding ElementName=contactList, Path=SelectedItem}">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="0.125*" />
        </Grid.RowDefinitions>
        <local:BasicContactCard Margin="8 8 8 8" />
        <Button Grid.Row="1" x:Name="exit" Content="Exit" HorizontalAlignment="Right" Width="50" Height="25" Click="exit_Click" />
    </Grid>
</DockPanel>

Надеюсь, это может помочь кому-то ещев той же лодке, что и я во время их обучения.

0 голосов
/ 22 мая 2010

Я думаю, использование DataTemplate для ItemTemplates из ListBox - лучший выбор. Нет необходимости использовать CustomControl. DataTemplate определяет внешний вид каждого элемента в вашем списке.

...