WPF: Как связать видимость кнопки внутри элемента ListBox ItemsControl с использованием данных selecteditem?

Question

У меня есть окно списка, которое привязывается к ObservableCollection элементов. Каждый listboxItem содержит несколько текстовых блоков и несколько кнопок. Я хотел бы показать кнопки внутри listboxItem только при выборе элемента списка или hightlight. Если элемент списка не выделен, кнопка должна быть скрыта. Я попытался использовать datatrigger для привязки к свойству IsSelected. Однако это не сработает. Пожалуйста посоветуй. спасибо

 <ListBox Name="LayoutListBox" SelectedItem="{Binding Path=SelectedLayout, Mode=TwoWay}" ItemsSource="{Binding Layouts}" SelectionMode="Single" HorizontalContentAlignment="Stretch"> 
     <ListBox.ItemContainerStyle> 
     <Style TargetType="ListBoxItem"> 
      <Style.Resources> 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Gray"/> 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray"/> 
      </Style.Resources> 
     </Style> 
     </ListBox.ItemContainerStyle> 
     <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <Border HorizontalAlignment="Stretch" Margin="2" CornerRadius="2" BorderBrush="#80808080" BorderThickness="1" Background="GhostWhite"> 
        <Grid> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height ="*"/> 
            <RowDefinition Height ="*"/> 
           </Grid.RowDefinitions> 
           <DockPanel Grid.Row="1" Grid.Column="3" DockPanel.Dock="Right"> 
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Visibility="{Binding Path=ViewName, Converter={StaticResource Converter}, ConverterParameter=false}"> 
             <Button ToolTip="Save"> 
              <Image Source="/Common.View;component/LayoutManager/View/Images/PushPin.png" /> 
             </Button> 
             <Button Click="EditButtonClick" ToolTip="Edit"> 
              <Image Source="/Common.View;component/LayoutManager/View/Images/pencil.png" /> 
             </Button> 
             <Button Click="DeleteButtonClick" ToolTip="Delete"> 
              <Image Source="/Common.View;component/LayoutManager/View/Images/cross.png" /> 
             </Button> 
            </StackPanel> 
           </DockPanel> 
          </Grid> 
         </DockPanel> 
        </Grid> 
        </Border> 
      </Grid> 
     </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

Answer 1

Я приложил простой пример, чтобы показать кнопку в элементе списка, когда вы выбрали. он должен связать, как RelativeSource и иметь в использовании конвертер

Пример:

<Window.Resources> 
     <BooleanToVisibilityConverter x:Key="booleanVisibleConverter" /> 
    </Window.Resources> 
    <Grid> 
     <ListBox ItemsSource="{Binding ObservableCollection}" Grid.Row="0" SelectedItem="{Binding Path=Item}" 
       SelectionMode="Single" IsSynchronizedWithCurrentItem="True" Margin="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectedIndex="0"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Orientation="Horizontal"> 
         <Label Content="{Binding}" /> 
         <Button Content=" X " Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected, Converter={StaticResource booleanVisibleConverter}}" /> 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 

Answer 2

Вы можете создать стиль, чтобы связать с каждым из ваших кнопок следующим образом:

<Style TargetType="{x:Type Button}"> 
    <Setter Property="Visibility" Value="Collapsed"/> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding RelativeSource={RelativeSource 
          Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, 
          Path=IsSelected}" Value="True"> 
      <Setter Property="Visibility" Value="Visible"/> 
    </DataTrigger> 
    </Style.Triggers> 
</Style>