如何在WPF中创建带图片文本、勾选框居右的复选框控件

我需要设计一款自定义列表项控件：左侧区域放置图片与文本内容，右侧角落显示复选框勾选标记。
初始实现代码如下：

<ListView x:Name="MyListView">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" >
            <CheckBox IsChecked="{Binding IsChecked}">
                <StackPanel Orientation="Horizontal">
                    <Image VerticalAlignment="Center" Source="{Binding Img}">
                    </Image>
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                        <TextBlock Text="{Binding Name}"  />
                    </StackPanel>
                </StackPanel>
            </CheckBox>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

上述代码运行效果不符合预期，预期效果如下：

默认CheckBox的布局逻辑是勾选标记固定居左，自定义内容区域排列在勾选标记右侧。当前代码直接把图片+文本的组合作为CheckBox的内容传入，最终呈现的必然是勾选框在最左、图文跟在右侧的效果，和「左图文、右勾选框」的需求完全相反。

放弃将图文区域作为CheckBox子内容的写法，改用Grid做两栏布局：左栏占满剩余宽度放置图片和文本，右栏自适应宽度放置无内容的纯勾选框，即可实现需求。
完整实现代码如下：

<ListView x:Name="MyListView">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate">
            <Grid Margin="6,2">
                <Grid.ColumnDefinitions>
                    <!-- 左栏占满剩余可用空间 -->
                    <ColumnDefinition Width="*"/>
                    <!-- 右栏适配复选框宽度 -->
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- 左侧图文区域 -->
                <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
                    <Image VerticalAlignment="Center" Source="{Binding Img}" Width="40" Height="40"/>
                    <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                        <TextBlock Text="{Binding Name}" FontSize="14"/>
                    </StackPanel>
                </StackPanel>

                <!-- 右侧角落复选框，清空内容仅保留勾选标记 -->
                <CheckBox Grid.Column="1" 
                          IsChecked="{Binding IsChecked}"
                          VerticalAlignment="Center"
                          HorizontalAlignment="Right"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

扩展优化 #

如果需要实现点击整行任意位置都能切换复选框状态，只需要做两处调整：

• 给右侧CheckBox添加属性IsHitTestVisible="False"，屏蔽复选框本身的点击响应
• 给根Grid添加鼠标左键点击事件，在事件逻辑中切换当前绑定数据项的IsChecked属性即可，不需要调整现有布局结构。

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