Q101. ListBoxItem で子要素の編集時に強調表示するには？

A．IsKeyboardFocusWithin プロパティが True の場合、IsSelected プロパティを true にするよう、ListBoxItem のスタイルにトリガーを設定します。

DataTemplate で ListBoxItem に TextBox などの編集用コントロールを設けた場合、子要素の TextBox にフォーカスがあっても強調表示されないことがあります。以下の画像は4行目のTextBox にフォーカスがありますが、2行目がハイライトのままの状態です。

<ListBox ItemsSource="{Binding Persons}" Grid.Row="1" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" VerticalAlignment="Center" Text="{Binding Path=Name, Mode=OneWay}" />
                <TextBox Grid.Column="1" Text="{Binding Path=Age, Mode=TwoWay}" Margin="2,4" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

TextBox 編集時に項目を強調表示にするには、以下のように ListBoxItem のスタイルにトリガーを設定します。

<ListBox ItemsSource="{Binding Persons}" SelectedIndex="0" Grid.Row="1" >
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <!-- このトリガーを設けないと子要素編集時に強調表示しない -->
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="true">
                    <Setter Property="IsSelected" Value="true" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" VerticalAlignment="Center"
                           Text="{Binding Path=Name, Mode=OneWay}" />
                <TextBox Grid.Column="1" Text="{Binding Path=Age, Mode=TwoWay}" Margin="2,4" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

WPF FAQ の目次に戻る