列表框项模板中的 XAML 按钮

Question

我有一个只有一个选择的列表框。选择项目后，它应显示其他选项，例如 - 编辑、删除按钮。

所以我这样做了：

<ListBox ItemContainerStyle="{StaticResource MyItemStyle}" Loaded="MyList_Loaded">
</ListBox>

这是我的模板：

<Style x:Key="MyItemStyle" TargetType="ListBoxItem">
        <!--Deleted to minimize the snippet-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid x:Name="LayoutRoot" BorderThickness="0,1,0,0" BorderBrush="Black" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <!--Deleted to minimize the snippet-->
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EditButtons">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <!--Deleted to minimize the snippet-->
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="PressedBackground" Grid.RowSpan="2" Fill="Transparent" Control.IsTemplateFocusTarget="True"/>
                        <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="Stretch"/>
                        <Grid Grid.Row="1" HorizontalAlignment="Right" Margin="13,0,13,13" Visibility="Collapsed" x:Name="EditButtons">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <HyperlinkButton 
                                x:Name="SendButton" 
                                VerticalAlignment="Center"
                                IsTabStop="True"
                                TabIndex="3"
                                Margin="7,0,0,0"
                                Content="Send" 
                                Style="{StaticResource HyperlinksStyle}" 
                                />
                            <HyperlinkButton 
                                x:Name="EditButton" 
                                VerticalAlignment="Center"
                                IsTabStop="True"
                                TabIndex="3"
                                Grid.Column="1"
                                Margin="7,0,0,0"
                                Content="Edit" 
                                Style="{StaticResource HyperlinksStyle}" 
                                />
                            <HyperlinkButton 
                                x:Name="DeleteButton" 
                                VerticalAlignment="Center"
                                IsTabStop="True"
                                TabIndex="3"
                                Grid.Column="2"
                                Margin="7,0,0,0"
                                Content="Delete" 
                                Style="{StaticResource HyperlinksStyle}" 
                                />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我不知道如何将单击处理程序绑定到这 3 个超链接按钮。我尝试：

private void MyList_Loaded(object sender, RoutedEventArgs e)
{
    var sendButton = FindChild<HyperlinkButton>(MyList, "SendButton");
}

和

从可视化编辑器直接在 XAML 中添加处理程序。

但这一切都没有奏效。我如何对这 3 个按钮的点击事件做出反应？

Answer 1

当模板/样式在与按钮相同的 XAML 文件中定义时，可以轻松地使用 XAML 中的单击处理程序：

<HyperlinkButton x:Name="SendButton" 
    VerticalAlignment="Center"
    IsTabStop="True"
    TabIndex="3"
    Margin="7,0,0,0"
    Content="Send" 
    Style="{StaticResource HyperlinksStyle}" 
    Click="HandleSendClick"
    />
private void HandleSendClick(object sender, RoutedEventArgs e)
{
    //...
}

但是，我建议您一般使用 MVVM 和命令绑定。在 WPF 中使用事件处理程序已经过时。

Answer 2

您必须使用要隐藏在列表框的 ItemTemplate 中的按钮实现网格，并且将触发单击事件。

<Page
...
xmlns:converter="using:VisibilyConverter" 
...
>
<Grid x:Name="LayoutRoot">
    <Grid.Resources>
       <converter:VisibiliyConverter x:Key="visibilityConverter" />
    </Grid.Resources>
    <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Grid.Row="1" HorizontalAlignment="Right" Margin="13,0,13,13" Visibility="{Bindig IsSelected, Mode=OneWay,
                            Converter={StaticResource visibilityConverter}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <HyperlinkButton 
                    x:Name="SendButton" 
                    VerticalAlignment="Center"
                    IsTabStop="True"
                    TabIndex="3"
                    Margin="7,0,0,0"
                    Content="Send" 
                    Style="{StaticResource HyperlinksStyle}" 
                    Click="SendButtonClick
                    />
                <HyperlinkButton 
                    x:Name="EditButton" 
                    VerticalAlignment="Center"
                    IsTabStop="True"
                    TabIndex="3"
                    Grid.Column="1"
                    Margin="7,0,0,0"
                    Content="Edit" 
                    Style="{StaticResource HyperlinksStyle}" 
                    Click="EditButtonClick
                    />
                <HyperlinkButton 
                    x:Name="DeleteButton" 
                    VerticalAlignment="Center"
                    IsTabStop="True"
                    TabIndex="3"
                    Grid.Column="2"
                    Margin="7,0,0,0"
                    Content="Delete" 
                    Style="{StaticResource HyperlinksStyle}" 
                    Click="DeleteButtonClick
                    />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

void SendButtonClick(object sender, RoutedEventArgs e)
{
    ...
}
void DeleteButtonClick(object sender, RoutedEventArgs e)
{
    ...
}

Answer 3

因此

，安装 nuget 包MvvmLightLibs并在代码隐藏中创建命令

public RelayCommand<MyClassModel> SendCommand { get; set; }

在 ctor 中初始化：

public MainPage()
{
    this.InitializeComponent();
    SendCommand = new RelayCommand<MyClassModel>(SendExecute);
    DataContext = this;
}

并执行回调：

private void SendExecute(MyClassModel item)
{
}

在 XAML 代码中，要ListBox和绑定命令的安装程序名称

<ListBox ItemContainerStyle="{StaticResource MyItemStyle}"
         x:Name="listBox"/>
<HyperlinkButton x:Name="SendButton" 
                    VerticalAlignment="Center"
                    Command="{Binding DataContext.SendCommand, ElementName=listBox}"
                    CommandParameter="{Binding }"
                    IsTabStop="True"
                    TabIndex="3"
                    Margin="7,0,0,0"
                    Content="Send"/>