WinRT/C++中如何创建可点击图片或图片按钮

方案1：直接在Button的Content中嵌入Image #

这是最简便的原生实现方式，无需额外控件，直接利用Button的Content属性承载Image，同时保留Button的点击交互逻辑：

<Grid x:Name="FeatureBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="FeatureBarLeftPaddingColumn" Width="10"/>
        <ColumnDefinition x:Name="LogFileAnalysis"/>
        <ColumnDefinition x:Name="FeatureBarRightPaddingColumn" Width="10"/>
    </Grid.ColumnDefinitions>

    <!-- 带图片的可点击Button -->
    <Button x:Name="LogAnalyzerButton" Width="50" Height="50" Grid.Column="1" Click="LogAnalyzerButton_Click">
        <Image Source="/Assets/logfileAnalyzerIcon.png" Width="50" Height="50"/>
    </Button>
</Grid>

后台代码添加点击事件处理：

private void LogAnalyzerButton_Click(object sender, RoutedEventArgs e)
{
    // 写入点击后的业务逻辑
}

方案2：给Image绑定点击事件 #

如果不想依赖Button控件，可以直接给Image添加点击事件（不同XAML平台事件名略有差异）：

• UWP/WinUI：使用Tapped事件
• WPF：使用MouseLeftButtonDown事件

示例代码（以UWP为例）：

<Grid x:Name="FeatureBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="FeatureBarLeftPaddingColumn" Width="10"/>
        <ColumnDefinition x:Name="LogFileAnalysis"/>
        <ColumnDefinition x:Name="FeatureBarRightPaddingColumn" Width="10"/>
    </Grid.ColumnDefinitions>

    <Image x:Name="LogAnalyzerIcon" Grid.Column="1" Source="/Assets/logfileAnalyzerIcon.png" 
           Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Left"
           Tapped="LogAnalyzerIcon_Tapped"/>
</Grid>

后台代码：

private void LogAnalyzerIcon_Tapped(object sender, TappedRoutedEventArgs e)
{
    // 写入点击后的业务逻辑
}

方案3：自定义Button样式（进阶美化） #

如果需要去掉Button默认的边框、背景，只保留图片的点击反馈，可以自定义Button的ControlTemplate：

<Grid x:Name="FeatureBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="FeatureBarLeftPaddingColumn" Width="10"/>
        <ColumnDefinition x:Name="LogFileAnalysis"/>
        <ColumnDefinition x:Name="FeatureBarRightPaddingColumn" Width="10"/>
    </Grid.ColumnDefinitions>

    <Button x:Name="LogAnalyzerButton" Width="50" Height="50" Grid.Column="1" Click="LogAnalyzerButton_Click">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Image x:Name="IconImage" Source="/Assets/logfileAnalyzerIcon.png" Width="50" Height="50"/>
                <!-- 添加点击时的视觉反馈 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="IconImage" Property="Opacity" Value="0.7"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

内容的提问来源于stack exchange，提问作者eschmo