Question

我的ListBox看起来像这样：

<ListBox Name="ListBoxUsers" ItemsSource="{Binding Path=TempObservableUsers, ElementName=MainWindow, NotifyOnSourceUpdated=True}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" />

如您所见，此ListBox会显示来自名为 TempObservableUsers 的ObservableCollection的用户列表。这部分工作正常。

列表的每个元素如下所示：

enter image description here

正如您所看到的，我修改了ItempsPanelTemplate以使其看起来与众不同。在这里，我附上我的代码：

 <Style TargetType="ListBox" x:Key="VerticalListBox">
    <Setter Property="Margin" Value="0,0,10,0"></Setter>
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="{DynamicResource RegularBlue}" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="Width" Value="450" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" Width="450" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Vertical" Width="450" Margin="0,5" >
                    <StackPanel Orientation="Horizontal" Background="{DynamicResource TransparentMainBlue}" >
                        <Image Width="70" Height="70" Margin="5" Source="../images/delete.png" />
                        <StackPanel Orientation="Vertical" Width="285" >
                            <StackPanel Orientation="Horizontal">
                                <Label Content="NAME:" FontWeight="Bold"/>
                                <Label Content="{Binding Path=Name, FallbackValue=Name}" Foreground="White" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <Label Content="ID:" FontWeight="Bold"/>
                                <Label Content="{Binding Path=Identifier, FallbackValue=Identifier}" />
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top">
                            <Image Source="../images/edit.png" Width="20" />
                            <Image Source="../images/detail.png" Width="20" />
                            <Image Source="../images/delete.png" Width="20" />
                        </StackPanel>
                    </StackPanel>
                    <Grid Height="30" Background="{DynamicResource RegularBlue}">
                        <Label Content="XXXX-XXXX-XXXX-XXXX" Foreground="White" HorizontalContentAlignment="Center" FontWeight="Bold" />
                    </Grid>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

好的，之后：

如您所见，每个项目都包含右上角的一些图像。我希望每个人都能完成它的工作：编辑，更多，删除......

所以我需要将每个图像点击与ListBox上的相应项绑定。

如何绑定每个图片点击以执行相应的操作（修改，更新，删除）以及ListBox上的相应项？

编辑：现在我的代码对于每个项目模板都是这样的：

<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top">
      <Button Command="{Binding DataContext.DeleteCommand}" CommandTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}" CommandParameter="{Binding}">
          <Image Source="../images/delete.png" Width="20" />
      </Button>
      ............
 </StackPanel>

如何实施DeleteCommand？ PS：我还没有使用MVVM模式，因为我并不喜欢它。只尝试绑定该按钮直接从我的ResourceDictionary命令i xaml。

Answer 1

如果我尝试满足您的要求，那么我会Button使用Image内部而不是Image s。接下来，我将使用RelayCommand形式在视图模型中处理我的ICommand。使用此方法，使用ICommand属性可以轻松地将相关项目传递到CommandParameter：

<StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" 
    VerticalAlignment="Top">
    <Button Command="{Binding DataContext.EditCommand, RelativeSource={RelativeSource
        AncestorType={x:Type YourPrefix:ThisView}}}" CommandParameter="{Binding}">
        <Image Source="../images/edit.png" Width="20" />
    </Button>
    <Button Command="{Binding DataContext.DetailCommand, RelativeSource={RelativeSource
        AncestorType={x:Type YourPrefix:ThisView}}}" CommandParameter="{Binding}">
        <Image Source="../images/detail.png" Width="20" />
    </Button>
    <Button Command="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource
        AncestorType={x:Type YourPrefix:ThisView}}}" CommandParameter="{Binding}">
        <Image Source="../images/delete.png" Width="20" />
    </Button>
</StackPanel>

为了实现这一点，它假定：

1）您已将DataContext或Window的{{1}}设置为具有UserControl属性ICommand的类的实例，{{ 1}}和EditCommand。

2）将DetailCommand的XAML命名空间前缀值替换为您自己的有效前缀。

3）您将此代码所在视图的虚构DeleteCommand名称替换为您添加此代码的YourPrefix或ThisView的实际名称，例如。 Window。

关于如何使用UserControl，这是另一个问题，并且反对单一问题，Stack Overflow的单一问题精神。但是，有很多关于此的教程。以下是一些可以帮助您的方法：

如果您以前没有使用过MainWindow，那么MSDN上的Commanding Overview页面是一个非常宝贵的资源，并且对它们有很好的介绍。
您会在searching Stack Overflow for RelayCommand找到数十个有用的帖子。
您可以在Visual Studio论坛的Implementation RelayCommand问题中找到此类的清晰实现。

Answer 2

由于没有可用于图像的命令绑定，我将使用出现在图像中的按钮进行相同的演示

首先为按钮编写样式，删除原始外观并仅留下我想要显示的内容（在这种情况下为图像）

<Style x:Key="simpleButton" TargetType="Button">
    <Setter Property="Width" Value="70"/>
    <Setter Property="Height" Value="70"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后我将我的datatemplate定义为

<DataTemplate>
    <StackPanel Orientation="Vertical" Width="450" Margin="0,5" >
        <StackPanel Orientation="Horizontal" Background="{DynamicResource TransparentMainBlue}" >
            <Button Style="{StaticResource simpleButton}" 
                    Command="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=LixtBox}}" 
                    CommandParameter="{Binding}">
                <Image Source="../images/delete.png"/>
            </Button>
            ...

然后我将在我的视图模型中编写一个DeleteCommand，并使用SimpleCommand，RelayCommand等初始化它的实现。

public ICommand DeleteCommand { get; set; }

一旦这一切就绪，我现在显示图像的按钮将自己绑定到命令，并在执行时将当前项目作为命令参数推送（点击按钮）

如何在包含多个元素的列表框中处理MouseDown

2 个答案: