如何在我的组合框 ItemTemplate 中有一个可点击的按钮？

Question

这是我目前所拥有的：

<dxe:ComboBoxEdit Name="cboUserCustomReports"
                      Width="300" Height="Auto"
                      Margin="0,5,0,5"
                      ItemsSource="{Binding Path=UserReportProfileList,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"
                      EditValue="{Binding Path=UserReportProfileID,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                      ValueMember="UserReportProfileID"
                      DisplayMember="ReportName"
                      PopupClosed="cboUserCustomReports_PopupClosed">
            <dxe:ComboBoxEdit.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100*"/>
                            <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0"
                                   Text="{Binding ReportName, Mode=Default}" 
                                   VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
                        <Button Name="btnDelete" 
                                Grid.Column="1"
                                Width="20" Height="20"
                                VerticalAlignment="Center" HorizontalAlignment="Right"
                                Click="btnDelete_Click">
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Source="/RMSCommon;component/Resources/Delete.ico"></Image>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Grid>
                </DataTemplate>
            </dxe:ComboBoxEdit.ItemTemplate>
        </dxe:ComboBoxEdit>

首先，我希望这两列是独立的。用户必须能够选择或删除项目。

其次，我想让 ItemTemplate 中的按钮可以点击。

我需要添加什么来获得这种行为？

这就是现在的样子：

Answer 1

点击
我假设您的按钮是可点击的，并且您想知道如何处理点击事件。对吧？
对于点击处理程序，添加以下代码：

private void btnDelete_Click(object sender, RoutedEventArgs e) {
    FrameworkElement fe = sender as FrameworkElement;
    if(null == fe){
        return;
    }
    UserReportProfile userReportProfile = fe.DataContext as UserReportProfile;
    if (null == userReportProfile) {
        return;
    }
    // Do here your deletion-operation

}

我假设您的项目类名为 UserReportProfile。否则，相应地更改声明的类型。

布局
对于对齐方式，将以下声明添加到您的 ComboBox：

HorizontalContentAlignment="Stretch" 

这为您的 DataTemplate-Grid 提供了完整的宽度，您可以根据需要对项目进行布局。

<dxe:ComboBoxEdit Name="cboUserCustomReports"                         
      HorizontalContentAlignment="Stretch"            
      Width="300" Height="Auto"                         
      Margin="0,5,0,5"   
      ...>

Answer 2

你的问题不够清楚。但我猜你想垂直对齐组合框中的 text 和 images。如果是这样，那么您只需要这样做：

<Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

而且我认为您的项目已经可以点击了！