ListBoxItem 模板中的 XAML 按钮答案

【问题标题】：XAML Buttons in ListBoxItem templateListBoxItem 模板中的 XAML 按钮
【发布时间】：2017-01-09 20:13:19
【问题描述】：

我有一个具有单选的 ListBox。选择项目时，它应该显示其他选项，例如 - 编辑、删除按钮。

所以我这样做了：

<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>

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

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

和

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

但这一切都不起作用。我如何对这 3 个按钮的点击事件做出反应？

【问题讨论】：

@AndriiKrupka nop，但 DataContext 是 self，所以如果你想建议绑定到命令，我很高兴看到 UWP 的示例
看我的回答。我创建了样本
我认为您需要在列表框中有一个 DataTemplate。您应该使用单击事件定义所有按钮，并隐藏或不隐藏与列表框项的选定值相关的它们。您需要创建一个实现 IValueConverter 的 ValueConverter 类，以将选定的（真/假）值转换为可见性属性。

标签： c# xaml uwp

【解决方案1】：

当模板/样式与按钮在同一个 XAML 文件中定义时，您可以轻松地在 XAML 中使用 Click Handler：

<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 and Command Bindings。在 WPF 中使用事件处理程序已经过时了。

【讨论】：

正如我所说 - 我试图在模板/样式本身中添加 Click 处理程序 - 但它没有被触发（是的，它与 ListBox 在同一个 xaml 上）
我上传了您的代码的简化解决方案：ufile.io/5e06e 它表明点击处理程序工作正常。如果它在您的代码中不起作用，则说明其他地方有问题。

【解决方案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)
{
    ...
}

【讨论】：

会将其标记为答案。你是对的。在我的按钮可见性实现中，事件没有触发 - 这很奇怪

【解决方案3】：

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

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"/>

【讨论】：