Question

我有一个控件模板：（1）

<Style x:Key="customItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <ToggleButton>
                    <Grid Width="260" Height="58">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="58"/>
                            <ColumnDefinition Width="202"/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{StaticResource image_resourse}"/>
                        <Button Grid.Column="1"> Button text </Button>
                    </Grid>
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

它用于自定义ListBoxItems，如下所示：（2）

<ListBox>
    ...
    <ListBoxItem Style="{StaticResource customItemStyle}">
    ...
</ListBox

我想在将样式应用于ListBoxItem时设置该模板内的Button的Click处理程序。（1） - 样式文件中的代码（2） - 来自某个组件定义文件的代码

我该怎么做？

Answer 1

执行此操作的方法是在模板上定义ICommand。这样，您就可以轻松地将处理程序绑定到您需要的任何代码。

从继承ListBoxItem开始，并包含“ICommand”依赖属性：

public class CommandListBoxItem : ListBoxItem 
{
    public static readonly DependencyProperty ButtonCommandProperty = 
        DependencyProperty.Register("ButtonCommand", typeof(ICommand), typeof(CommandListBoxItem), null);
    public bool ButtonCommand
    {
        get { return (ICommand)GetValue(ButtonCommandProperty); }
        set { SetValue(ButtonCommandProperty, value); }
    }

    public CommandListBoxItem()
    {
        DefaultStyleKey = typeof(CommandListBoxItem);
    }
}

现在修改控件模板以将命令链接到按钮单击：

<Style x:Key="customItemStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type custom:CommandListBoxItem}">
                <ToggleButton>
                    <Grid Width="260" Height="58">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="58"/>
                            <ColumnDefinition Width="202"/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="{StaticResource image_resourse}"/>
                        <Button Grid.Column="1" Command="{TemplateBinding ButtonCommand}"> Button text </Button>
                    </Grid>
                </ToggleButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

最后，将command属性绑定到视图模型（或代码隐藏）中的命令：

<ListBox>
    ...
    <custom:CommandListBoxItem Style="{StaticResource customItemStyle}" 
                               ButtonCommand="{Binding CommandFromViewModel}" />
    ...
</ListBox>

Answer 2

您需要稍微改变才能应用该样式。可以处理Button_Click

<Window.Resources>
        <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <ToggleButton>
                            <Grid Width="260" Height="58">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="58"/>
                                    <ColumnDefinition Width="202"/>
                                </Grid.ColumnDefinitions>
                                <Image Grid.Column="0" Source="{StaticResource image_resourse}"/>
                                <Button Grid.Column="1" Click="Button_Click">Button text</Button>
                            </Grid>
                        </ToggleButton>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

<Grid>       
        <ListBox >
            <ListBoxItem>0ABC</ListBoxItem>
            <ListBoxItem>1ABC</ListBoxItem>
            <ListBoxItem>2ABC</ListBoxItem>
        </ListBox>
</Grid>

在xaml.cs内部，可以处理按钮点击

private void Button_Click(object sender, RoutedEventArgs e)
 {
    MessageBox.Show("E hoooo");
 }

如何将“单击”处理程序添加到作为控件模板一部分的按钮？

2 个答案: