首页 > 解决方案 > ListBox selection only one item in wpf xaml

问题描述

I have a ListBox in my WPF application. That ListBox contain Image control, TextBlock etc. When user click on one item in ListBox, I want to select only that Image control. see the attached image. How can I do like this selection? enter image description here

my code,

  <ListBox Name="mediaListBox" BorderThickness="0"  SelectionChanged="mediaListBox_SelectionChanged"  ItemsSource="{Binding ThumbnailItems}" SnapsToDevicePixels="True" SelectedItem="{Binding SelectedItem}" Background="Transparent" Drop="ImagePanel_Drop" AllowDrop="true">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="IsSelected" Value="True"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}" >
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <StackPanel Width="120">
                            <Grid>
                                <Image Height="90" Source="{Binding Path=Thumbnail}" Margin="0,8,8,0" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
                                <Button Visibility="{Binding IsVisible,Converter={StaticResource booleanVisibilityConverter}, FallbackValue=Hidden,UpdateSourceTrigger=PropertyChanged}" Style="{DynamicResource CloseButton}" HorizontalAlignment="Right" VerticalAlignment="Top" Command="{Binding ElementName=mediaListBox,Path=DataContext.RemoveGallaryItemCommand}" CommandParameter="{Binding SelectedItem}"  Width="16" Height="16" Content="x"></Button>
                            </Grid>
                            <TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" Text="{Binding Path=Name}" >
                                <TextBlock.ToolTip>
                                    <ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
                                        <ToolTip.Content>
                                            <TextBlock Text="{Binding Name}"/>
                                        </ToolTip.Content>
                                    </ToolTip>
                                </TextBlock.ToolTip>
                            </TextBlock>
                        </StackPanel>
                    </StackPanel>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Currently,

enter image description here

标签: c#wpflistbox

解决方案


ControlTemplate您可以为ListBoxItem容器定义自定义,例如:

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}" 
                                    Background="{TemplateBinding Background}" 
                                    SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" Value="Green" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="Green" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

推荐阅读